Back to Top

1 HTML5 Semantic Elements - Use Next Level Web Designing

HTML semantic elements describe the various meanings of a website parts. For example, <img> is a semantic element because it clearly defines the image property and acts as a function for where they should be used. Others include <form>, <table>, <header>, <nav>, <section>, <footer>, <summary> etc.

Whereas tags such as <div> and <span> cannot be considered as semantic elements as they do not define anything to designers and developers. HTML5 new semantics elements are supported on latest browsers like Chrome, Firefox, IE Explorer 9 etc. It rectifies repeat usage of tags in HTML pages by reducing the JavaScript from a document. Older sites still use a div tag to create different parts of them such as footer, header, menus but these new set of HTML5 elements help differentiate between various parts and work smoother as well.

How HTML Semantic Elements help Websites?

Well, there are basically two types. Text-level and Structural.

Some examples of Text-Level elements

Mark - Mark tag will simply highlight or reference a text link based on its usage.
Time - Time tag can be used to define dates, time or combined both.

<time datetime="14:00">3pm</time>
<time datetime="2015-04-11">April 11th, 2015</time>

Meter - It can be used to markup measurements.

<meter>5 of 30</meter>

It can also be used to represent a fractional value like space available, a percentage of specific criteria. Attributes such as value, min, max, high, low & optimum can be used with Meter tag.

Progress - Variable values which are expected to change can be displayed using progress tag.

Loading completion is <progress>34%</progress>

Value, Min and Max can be used as attributes to it.

HTML <aside> element

Some examples of Structural Semantic Elements

These are the blocks of your site which will be defined using structural elements.
These will include Section, Header, Footer Aside, Nav, Article and so on.

Where Sections and Articles are more or less give similar meaning but you can put multiple articles inside a section. Also you can combine articles within articles and section within sections.

As most of the latest computers are updated with operating systems and browsers, you can surely utilize these semantic elements in your site development. Consider leakage of those visitors who are using IE as their default browser.

HTML5 semantic elements will keep your site sections and parts intact and well formatted. Simply your layout will not break suddenly at some parts and design will remain firm.

You can surely read more brief articles on HTML5 to make your site designing more effective on below sites.


HTML5 will significantly add new layers to your existing site design and make your sections more meaningful and easy to understand. These text-level and structural elements will keep your site layout work more effective and remove any unnecessary tags.

Share your experience with HTML5 here in comments.
Related Posts Plugin for WordPress, Blogger...