As per W3C, the semantic web is- "Allows data to be shared and reused across applications, enterprises, and communities”. "Semantics provides the meanings of words and phrases in any language. Semantic element describes very clearly their meaning to browser where as non-semantic elements do not tell about its content.
Example of non-semantic elements are- <div> and <span>.
Example of non-semantic elements are- <form>, <table>, and <article>
Semantic Elements of HTML5-
HTML5 has following new semantic elements in an alphabetical order for developing a web page. As-
<section> Element of HTML5-
This element defines a section in a document in web page. We can also say that it is used to define a block of related elements. Section is also called as thematic grouping of content with a heading. The home page of User can be divided into various sections such as contact information, introduction, and content.
Example-
<section>
<h1>WWW</h1>
<p>World Wide Web (WWW) is a…………....</p>
</section>
<article> Element of HTML5-
The above-mentioned element mainly indicates self-contained content and independent contents. This is required when any article needs to be read independently from the rest of the web site. The <article> element is used with the- Forum post, Newspaper article, Blog post
Example-
<article>
<h1>WhatisHTML5?</h1>
<p> advantages of HTML5:
It is cleaner mark-up language and it’s code is very improved. It enables web designers to use cleaner, neater code. User can remove div tags and replace them with HTML5 semantic elements…………...</p>
</article>
<header> Element of HTML5-
The above-mentioned element shows a header of a document/section. A document contains many <header> elements, and is used as a container for introductory content.
Example-
<article>
<header>
<h1>HTML</h1>
<p>WhatisHTML5?</p>
</header>
<p> advantages of HTML5:
It is cleaner mark-up language and its code is very improved.
It enables web designers to use cleaner, neater code.
User can remove div tags and replace them with HTML5 semantic elements…………...
</p>
</article>
<footer> Element of HTML5-
The footer of a document/section can be displayed using above element. There may be many < footer > elements in a document. Basically, footer section contains- Author of the document, Copyright information, Contact information, Page Number etc.
Note- User can mention many <footer> elements in a web page.
Example-
<footer>
<p>Program written by:Dr John</p>
<p>Contact information:<ahref="mailto:jhon@example.com">
jhon@example.com</a>.
</p>
</footer>
<nav> Element of HTML5-
This element defines a set of navigation links. As-
Example-
<nav>
<ahref="/html5/">HTML5</a>
<ahref="/css/">CSS</a>
<ahref="/xml/">XML</a>
<ahref="/sql/">SQL</a>
</nav>
<aside> Element of HTML5-
The above element defines content such that aside from the content it is placed in e.g. sidebar.
Example-
<p>India is very great country. </p>
<aside>
<h4>Capital Delhi</h4>
<p>The culture of India is very rich.</p>
</aside>
<figure> and <figcaption> Elements of HTML5-
The figure caption is used to add an image visual explanation or description. User can group both image and caption in a <figure> element. As-
Example-
<figure>
<img src="cloud.jpg" alt="Cloud" width="400" height="300">
<figcaption>Fig1. - The Cloudy weather at Darjeeling. </figcaption>
</figure>
In the above example, the element <img> defines the image; The element <figcaption> defines the caption of the image.