HTML Tutorial – Semantic HTML

Semantic HTML –
Semantic HTML5 Elements Explained

Semantic HTML is a coding style. It uses HTML markup to reinforce the semantics or meaning of the content in webpages and web applications rather than just defining its look or appearance. It introduces meaning to the code we write.
For example: , , and , these tags clearly define its content.

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

List of new semantic elements

The semantic elements added in HTML5 are:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

Using Semantic HTML

The following structure below, might be help you understand the use of semantic html

<html>
  <head>
    <title></title>
  </head>
  <main>
    <header>
    	<nav>
    	  <ul>
    	    <li> </li>
    	    <li> </li>
    	  </ul>
       </nav>
    </header>
    <section>
    	<article>
    		<figure>
    			<img>
    			<figcaption></figcaption>
    		</figure>
    	</article>
    </section>
    <footer>
      <p></p>
    </footer>
 </main>
</html>

Advantages:

Easier to read
Greater Accessibility
Consistent Code

Sujay

Full Stack Web Developer, Senior Experience Engineer at Publicis Sapient

Sujay Kundu