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.
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="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.
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.