Common Html Tags And Their Uses

There are many common html tags which can be used when building a web project,

Some are common while others are not, that is why, only a few of them are used in projects.

So, today, i will revealing to over 30 common html element you ahould know and how some of them are actually used.

Heading Tag <h1>

One common Html Tag is the Heading Tag.

It is Mostly used for creating title because of how bold they appear.

The heading tag is a block level html element.

There are six heading tag, all having different font size and weight ranging from. h1 down to h6.

h1 been the biggest of them all. note: the heading tag has a opening(<>) and closing tag() .

Bold Tag <b>

The bold tag does just one thing;

It makes a text to be bod without adding the font-weight property in css.

It an opening and closing tag.

Break Tag <br>

The break element is used to break inline elements or used to add space between two elements.

For block level element, it increase the margin between the elements.

Break tag does not have a closing tag like the bold element.

Nav Tag <nav>

Nav element is a container. its a block level element.

you can use it just like you use the “div” element but by convention, it is usually used to wrap around navigation content of a website.

Head Tag <head>

Another common Html tag is the head tag

The head element gives a description about the head contents of your webpage.

It is within the head element that we link our external resources (e.g, external CSS) which are need by the webpage.

At the head we give the the page a title using the title element.

contents within the head are not rendered to the page visitor.

header Tag <header>

Another block level element which is also a container.

just like the name “header”, it is used to wrap a round the the first contents of the webpage.

Some people place the navbar in the header, but there is no rule that says that’s how it should be.

In fact, placing your first contents in a header only gives you easy identifaction of where your first contents starts and ends. other than that, its just a naming convention.

Html Tag <Html>

the html element is used to wrap round all our contents because its what the browser needs to see in order to treat your content as a webpage. in fact, the html element is the head of the basic structure of every webpage. your html code is not complete without the html element at the beginning and end of your document.

body Tag <body>

the body element contains the contents which will be rendered to the page visitor on the browser .the body is a block level element and thats why all your web contents are stacked on each other as you add new contents

Article Tag <article>

the article is a block level element and it acts exactly like a div. because of the name, it is mostly used for blogs to separate areas where a new blog article should be written.

Section Tag <section>

the section element is just the same as the previously mentioned article element, the only difference is the name. its a block level element and it is used to separate each section of webpage from another.

Main Tag <main>

the main element is also in the same category with section and article element, meaning, they are all block level elements. the difference again is the name and it is mostly used to separate the main contents of the webpage from imported framework contents. for example, if you are creatung a new website and you also copy some code from external resource like bootstrap.com or materialize.com to name a few, you would not want it to be like the contents you created yourself, so that, should there be any error, you can easily trace and correct them with ease.

Div Tag <div>

Our awesome div. one of the most common Html tags

It is a tag that is used to separate one content from another.

the div is a block level element and it works just like article, section and main.

Script Tag

The script element is mainly used for two things ;

to link an external script to our current webpage
to allow the execution of JavaScript codes within a non JavaScript file.
the script file is strictly for javaScript, and when it is used outside a javaScript, it must have an opening and closing tag.

Style Tag <style>

the style element is used wrap around CSS codes in a non CSS file. it has an opening and closing tag. this element is used when you want to embed an internal styling to a file other than a CSS file.

Img Tag <img>

The Img tag is one of the most common Html tags as it has no alternative

Pretty straight forward, the img element is used to display image content on our webpage.

By default, the Img element is an inline level element and it does not require a closing tag.

link element <link>

Another element which does not require a closing tag, the link element is used to link an external file to our webpage. a typical example of using the link element is external Css. when you have a external stylesheet , all you need to do is to give the relative path in the href attribute of the link element.

Embed Tag <embed>

The embed element give room for the integration of an external application or interaction content which might not typically be an html content. just like the img element, the embed element does not require a closing tag

Input Tag <input>

the input element is used to accept input from the user. the input element can be used to accept different type of input from text to image. the input element is an inline level element.

Form Tag <form>

the form element is used to collect and manipulate form data.

These data are mostly collected using the input element.

The form element has an action and method attribute which are used in backend. the form is a block level element.

Button Tag <button>

The button element can be used for submitting form data.

The button is an inline element and it has the type attribute which is used to determine the type of function it will be used for.

Paragraph Tag <p>

One of the most common Html tags for text is the paragraph tag

The paragraph element is used to display paragraph text in our browser. A regular paragraph text has a light font weight and it a block level element.

Strong Tag <strong>

The strong element is used to make a text to be bold.

For instance, if you have a paragraph text and you want to make a word to stand out, simply enclose the word in a strong element and the text will be bold.

Emphasis Tag <em>

The Emphasis element is used to make emphasis about a content.

The content in this case is a text. the result of the emphasis element is only visible on the browser.

the emphasis element has both a opening and closing tag.

Anchor Tag <a>

The anchor element is used redirect a user form one page to another or within thesame page.

It is well known as link, because it is mostly used to link for one page to another.

Just like the button, the anchor element is an inline level element but it does not have a closing tag.

Table Tag <table>

The table element is used to display contents in a table format.

The table element displays like a block level element but its display value is actually not block but it is table.

Just like the form element, the table element has a opening and closing tag.

th (table heading) element <th>

Table heading element (th) is used to display the different heading in a table.

Its an inline level element and it has an opening and closing tag.

tr(table row) element <tr>

Tr row element is used to define the row for which table data will either be entered or displayed.

The table row element display each row in a table on a single line

hence, one might be tempted to say, it is a block level element.

td element. <td>

Table data element (td) is an inline level element which is used to display data on a table.

In most cases, the table data element is wrapped round a table row element (tr). the table data element has both opening and closing tag.

Label Tag <label>

The label element is used to create a label for an input field.

The label element has a “for” attribute which is used to assign it to a particular input field.

Label element displays inline and it has an opening and closing tag.

List Tags <li>

This is one of the most common Html tags just as common as the DIv tag.

The List tags are usually two, the Ordered list tag (OL) and unordered list tag (UL)

Unordered List Tag <ul>

Unordered list element displays list item with a default list style type of bullet. its a block level element and it has an opening and closing tag

Ordered list element <ol>

ordered list element displays list item with a default list style type of numver. its a block level element and it has an opening and closing tag

Footer Tag <footer>

Footer tag it is one of the most Common Html tag,

The footer element is also a container like the div.

But it is used in the footer section of a webpage to differentiate it from other sections of the webpage.

The footer is a block level element and just like other block level elemene, it has an opening and closing tag.

Aside Tag <aside>

The aside element is also a container.

think of a house, it has various rooms like bedroom, living room, kitchen room and rest room. Although not a common Html tag but useful

so also is the a webpage, it has different sections ranging from the navigation down to the footer, so the aside element is a container and it is mostly used to wrap contents that appears at the side of the webpage.

Audio Tag <audio>

just like the name, the audio element is used display audio contents on our webpage,

It is different from the image element “img” which does not have a closing tag.

Option Tag <option>

The option element is used synonymously with select element.

It hold the different values which can be selected from a list of drop down when you have multiple options to be selected.

Select Tag <select>

Another common Html tag used together with others input tags

The select element is an inline level element and it is used to display a list of options available for selection.

The select element options can only be displayed using “option” element.

Select element has both an opening and closing tag.

Span Tag <span>

A span tag is similar to the div that in that it is a container.

While the the div tag display block, the span tag displays inline

Textarea Tag <textarea>

This is one of the common Html tags used in a form

Textarea is a is used mostly in form to collect large volume of text input. the textarea element is an inline level element and it has both an opening and closing tag.

Title Tag <title>

The title element is found usually at the top of your html document.

It is used to give a description of the the current webpage. it has an opening and closing tag.

Video Tag <video>

The name already gives a description of the element already.

The video element is used display video contents of different format on our webpage.

It is also different from the image element “img” which does not have a closing tag.