If you are new to HTML5 or even for professional developers. The Semantic Elements are kind of a new terminology related to HTML5. In this article we have tried to give an overview and some details regarding what are semantic elements in HTML5 and how they are usually used.

Semantic Elements in HTML5 : an Introduction

A semantic elements in HTML5 clearly explains or deliberate its meaning to both the browser in which the webpage is renderd and the developer working to make the webpage. Semantic elements means “Elements with meaning”. It clearly identifies the content. Examples of non-semantic elements are <div> and <span> . These non-semantic elements tell nothing about its content. where as examples of semantic elements are <form>, <table>, and <img> which clearly defines its content.

List of HTML5 Semantic Elements

The list of HTML5 new semantic elements to clearly define different parts of a web page are:

• <aside>

The <aside> element defines some content aside from the content it is placed in (like a sidebar).The aside content should be related to the surrounding content.

• <figure>

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

• <figcaption>

The <figcaption> tag defines a caption for a <figure> element.The <figcaption> element can be placed as the first or last child of the <figure> element.

• <footer>

The <footer> element specifies a footer for a document or section.A <footer> element should contain information about its containing element.A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.You can have several <footer> elements in one document.

• <details>

Defines additional details that the user can view or hide

• <summary>

Defines a visible heading for a <details> element

• <header>

The <header> element specifies a header for a document or section.The <header> element should be used as a container for introductory content.You can have several <header> elements in one document.

• <nav>

The <nav> element defines a set of navigation links.The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element.

• <section>

The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading.

• <article>

The <article> element specifies independent, self-contained content.An article should make sense on its own and it should be possible to distribute it independently from the rest of the web site. <article> elements can be used at: Forum post ,Blog post,News story,Comment.

• <main>

Specifies the main content of a document

• <mark>

Defines marked/highlighted text.

• <time>

Defines a date/time.

Web Browsers supporting HTML5 Semantic Elements

Let’s look at some of the web browsers that are supporting the HTML5 Semantic Elements.

Internet Explorer 8 and earlier does not support these elements.

• Internet Explorer 9+,
• Firefox,
• Chrome,
• Safari and
• Opera