HTML 5 Semantic Tags

0 185

HTML 5 nav Semantic Structural Text-level Semantic Tags

in this tutorial, you will learn about HTML 5 nav Semantic Structural Text-level Semantic Tags

What is HTML Semantic Tags/elements

HTML 5 evolved by introducing new semantic elements, earlier versions of HTML had the universal tags div which was used to accomplished various task in makes a user confused when multiple div tags used in HTML structure.

Example of a non-semantic elements: <div>, <span>.

Example of a semantic elements: <form> <table> <header> <nav> <article> <aside> and <footer>.

HTML 5 introduced two types elements they are
text-level and structural elements.

Structural Semantic Tags

Structural Semantic Tags are block level elements and they are used to make structure of a web page.

HTML 5 header

Header elements will define the header of our website, we can be used either at the top of document or at the top of section, most of website currently using single header at the top of page called masthead, but no matter we can have multiple header in our HTML web group an introductory content or a set of navigational links header element used as a container. This information can be titles, subtitles, logos and so on.

HTML 5 nav(navigation)

nav elements often used for navigation links/menu to jump on other linked webpages or website. nav play a most important role in a other words it allows a user to navigate through webpage and website.

HTML 5 section

It is the main information bar that contains the most important information of the document. The section element represent a section of our web document, section elements similar like a div element tag but section element has more semantic meaning. In other words, section element is more meaningful as the content inside the section tags should be related.

HTML 5 article

the article element represents a section of content that is independent of a Web page or site content, possible sources of the article should be Blog post News story Comment Review Forum post.

HTML 5 aside

aside elements represent the content which is related to the main text of the web document .it is not important to have an aside aligned to the right, top, or left site of the web page it can be in middle, top, or at the bottom.

HTML 5 footer

A footer has information related to the web document. footer is similar like to the header but mostly developer representing footer at the bottom of the web page, there can be multiple footer in an html5 document. A footer can represent content such as author information copyright information about policy etc.

Text-level Semantic Tags

Text level semantic tags are currently inline elements and there are…


mark tag used to mark or highlight any text to make is highlighted in Web page that a visitor searched for.


<time> tag used to define a time or date in the Gregorian calendar. This tag can be used optional with time and timezone offset. This element can be used to encode dates and times in a machine-readable a web user can add birthday reminders or any schedule events to user’s calendar and this can produce better search result in search engine.

Attributes of <time> tags are.

Attribute Value Description
datetime datetime Provides the date/time given by the element’s content.
pubdate pubdate It is used for specifying publication date and time of the document.



The <meter> tag will define to displays markup or scalar measurement within a defined range. Absolute scalar values, such as height or weight, are not represented automatically by the meter tag. For this, the user must specify the height and weight within the known range of values. It is also used for displaying fractional value.
Attributes and values of <meter> tag are…

Attribute Value Value Description
form form_id specifying one or more forms that <meter> element belongs to.
high number high attribute is used for specifying the high range value .
low number low attribute is used for specifying a range of value that is to be considered as low and should be greater than min attribute value.
max number max attribute is used for specifying the maximum value of the range.
min number min attribute is used for specifying the minimum value of the range.
optimum number optimum attribute is used for specifying the optimal value for the <meter> tag.
value number value attribute is used for specifying the current value of the <meter> tag.


To display the progress of a task Progress tag is used with JavaScript.
<meter> tag Attributes and values are:

Attribute Value Description
max number max attribute is used for specifying the work as a floating point number that the task requires in total
value number value attribute is used for specifying how much task has been completed Table .



Leave A Reply

Your email address will not be published.