Top 20 HTML Tags used by the best programmers in the world

There are over 3trillion website on the internet and have you ever wondered which Html tags are the most famous, always reoccurring in the source code of every awesome website you come across?

Here are 20 Html tags used mostly:

HTML HEADING TAG

The html heading tag defines with <h1> to <h6> tag. In web design we have six levels of headings ranging from <h1> to <h6>. The opening tag and the closing tag.

<h1></h1>: These headings are used for the main headings, it is the biggest and the largest heading, and also is good to place a keyword with the h1 tag. For example: <h1> WELCOME TO PROGRAMMING LINE </h1>, in this result it will bring out “WELCOME TO PROGRAMMING LINE” in a h1 tag.

<h2></h2>: H2 heading are used for sub-heading in a website deisgn or website development. For example: <h2> Development</h2>,this result will bring out “DEVELOPMENT” in a h2 tag.

<h3><h3>: H3 tags are used for sections under the sub-menus. When you come across different website on internet you will see something like this.

<h4> tag and <h5> tag are used in series according to your decision. It has the opening tag and the closing tag.

<h6></h6>: This is the lowest and the smallest heading in Html Heading tag. For example :< h6>this is the lowest Html Heading Tag</h6>. It will display small when outputting the code or debugging.

HTML PARAGRAPH

The HTML Paragraph tag is defined by <p></p>.Any Html Tag code that opening tag must have a closing tag. The paragraph tag is used when one intend to write on a new paragraph.<p> is used at the beginning of the phrase while the closing tag must end with </p>

HTML BR TAG

The Html Br Tag defined by <br> tag only, it is used to enter a new line, when put at the end of sentences, the upcoming words will be in a new line. This Tag has no closing Tag. For example: <p> I love eating rice and beans </p> <br>

<p> I love eating beans and bread </p>

As seen in the example, the Br Tag is written at the end of the sentences so “I love eating beans and bread” will be on another line.

HTML LINKS

Html Links Tag are defined with the word <a> tag. The links are used in the menu to link to internal website pages and can be used anywhere to link to external website. The “href” attribute defines the link address.

For example: <a href=”www.facebook.com/login”> Login to facebook </a>

The <a> opening tag and closing tag are the link tag, while the href attribute point to the link www.facebook.com , the Login to facebook is the text that will be shown to the visitors of the website or blog.

HTML IMAGES

Html images are very important in web pages. To build a website it needs to contained responsive images. Html images are defined with <img>. Although it does not have a closing tag. Images can come either in Jpg form or Png form.

For example: <img src=”logo1.jpg” />

Images have some attribute which are “src, alt, height, width”

Images src: This means the source of where the image is save or is in a folder in your desktop or laptop Pc.

For example: <img src=”logo1.jpg” />

For easy navigation of site, I suggest to you to store all your images you want to use in a folder, and then recall the image in the code. For example: I create a new folder which I name “Web design” inside the folder am having my html code store there, and also I have a folder call ”Images” then in this folder I will save all my images there, then if I save a image of “logo1” in the images folder, if I want to call the image in Html code, it will be: <img src=”images/logo1.jpg” />

As seen when the browser check your site and it doesn’t find logo1.jpg image in the folder, the image will not shown.

Images alt: ALT is use to give a quick description of the image in case the image is not shown due to serve or service error the “alt” will show.

For example: <img src=”images/logo1.jpg” alt=”My Website logo” />

Images height: Images height is used to increase the height of the image to suite your desired choice.

For example: <img src=”images/logo1.jpg” alt=”My Website logo” height=”200px” />

Images width: Images width is used to increase the width of the image.

For example: <img src=”images/logo1.jpg” alt=”My Website logo” height=”200px” width=”150px” />

HTML TEXT FORMATTING TAG:

In HTML Text Formatting Tag we have the following Tag:

<b></b>: The “b” means bold which means it makes your text bold in between the opening tag and closing tag.

For example: <b> Bold </b>.

<i> </i>: The “I” tag means italic which means it makes your text been italic.

For example: <i> Italic</i>

<u></u>: The “U” tag means underline which makes your text been underline.

For example: <u>Underline </u>

All these tag which was stated below are use in HTML4 version, tags are now be in replacement with it in HTML5 version which is current version. The tags which are now use in HTML TEXT AND FORMATTING TAG for HTML5 are:

<strong></strong>: This is the same as the bold but it makes it very bold.

For example: <strong> Very strong words </strong>

<em> </em>: The “em” tag is the same as italic which does the same work with the italic.

For example: <em> This makes the text italic </em>

HTML LIST TAG:

The option to make different types of list in MS word can also be done with HTML code too. In list we have ordered list <ol> and un-ordered list <ul>. And each item in the list should start <li> tag.

Ordered lists are numbers and can be customized in CSS which will be explain in this blog.

Examples of Ordered list:

<ol>

<li> This is list Three</li>

</ol>

Un-ordered list are bullets and also can be customized in CSS also.

Examples of un-ordered list:

<ul>

</ul>

HTML TABLE TAG:

If you need to add the table to you webpage you should use <table> tag. As any table, the HTML table is divided into rows (with the help of the <tr> tag) and the row is divided into cells accordingly (with the <td> tag). You can use text, links, images and even other tables as the content for the cell. That’s actually the way the HTML code was made long ago: the whole page area was divided into table cells and each one contained some layout elements accordingly.

Here’s the simple sell example

HTML FORMS AND INPUT TAG:

Forms are very important in Web design, forms are usd to collect email list, to collect the information of a member and so on.

There’s no need to explain what a form is but there’s one thing we want to pay your attention to. The form in HTML is just the number of fields where you can type in the text, but that’s not the script that will send this info to your email or database. The <form> tag defines the form area. <input> tag is the field that has lots of the attributes depending on the content that should be entered to the field.

Example of simple form is:

<form>
First name:
<input type=”text” name=”firstname” />
<br />
Last name:
<input type=”text” name=”lastname” />
</form>

HTML TEXT AREA TAG:

The <textarea> tag defines a multi-line text input control, for example it can be used as the field for the message in your contact form.

For example:
<textarea rows=”2″ cols=”20″>
Please enter your comments, we will be glad to hear your feedback.
</textarea>

HTML DIV TAG:

This is a more a less new tag and it doesn’t have a separate special definition like link tag for example.
The <div> tag defines a division or a section in an HTML document. If you’re just starting you won’t be able to use it properly on your own, however feel free to edit the elements inside the div section as most often they are the same that we already studied.

When div tag are used in Html code it will be reference in CSS with a point “.”

For example:

Anything here will be in the container fluid

</div>

HTML SPAN TAG:

same as <div> tag, the <span> tag is pretty new one. The <span> tag provides no visual change by itself but rather provides a way to add a hook to a part of a text or a part of a document. If all you need is changing several lines of text close your eyes on this tag, or if you want to apply that same “effect” to some other element, just copy the <span> tag and attributes to the place you’d like to.

For example: <span align: left; > MOONLIGHT </span>

HTML SELECT TAG:

The select tag is used for making dropdown list with some options. The option shows the option in the dropdown.

For example: list the location of where your offices are located in the globe for customers to choose.

<option value=”Chn” > China </option>

<option value=” Poland” > Poland </option>

<option value=”Grm”> Germany </option>

<option value=”Ngn”> Nigeria </option>

</select>

Above are the Html Tags used by the world programmer in the world. If you have question you can kindly drop it in the comment box.

Share with your friends too

Tuesday, September 11, 2018