• Tutorial List

HTML Semantic Elements

Last updated Jul 08, 2020
HTML Semantic Elements

What are Semantic Elements?

The HTML Semantic Elements are those elements that clearly describes its meaning to the browsers and as well as developers.

Examples of some semantic elements:

Elements such as <header> <footer> <table> <form> are all explicitly describes what type of content inside theme. That’s why these are all considered semantic elements.

On the other hand elements like <div> <span> do not describe what type of content they contain. Therefore these are non-semantic elements.


New HTML5 semantic elements:

The following semantic elements are added in HTML5 –

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

Example of usage of the semantic elements

HTML Sematic Element Example
HTML Sematic Element Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Semantic Elements</title>
<style>
  /* CSS has been removed */
</style>
</head>

<body>

<!-- header -->
<header class="_header">

    <div class="logo">Logo</div>

  <!-- nav -->
    <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</header>

<div class="container">
  <!-- article -->
    <article>
      
      <!-- article header -->
        <header>
            <h1>Main topic of the article</h1>
        </header>

      <!-- section -->
        <section>
            <h2>Sub topic of the article</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus exercitationem ut, cupiditate suscipit
            nihil sed iusto maxime ea dignissimos officiis.</p>
        </section>

      <!-- another section -->
        <section>
            <h2>Another Sub topic of the article</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum accusamus accusantium vero deleniti
            possimus voluptatem.</p>
        </section>

    </article>

  <!-- aside -->
    <aside>
        <div class="widget">
            <h4>Recent Posts</h4>
            <ul>
                <li><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></li>
                <li><a href="">In porta aliquet quam ac.</a></li>
                <li><a href="">Lorem ipsum dolor sit.</a></li>
                <li><a href="">Morbi maximus mauris non libero.</a></li>
                <li><a href="">In porta aliquet quam ac.</a></li>
                <li><a href="">Lorem ipsum dolor sit.</a></li>
                <li><a href="">Morbi maximus mauris non libero.</a></li>
            </ul>
        </div>
    </aside>

</div>

<!-- footer -->
<footer>&copy; 2020 example.com All rights reserved</footer>

</body>
</html>

Why use semantic elements?

With the Semantic elements

<header>...</header>

<article>
  
  <header>...</header>
  
  <section>...</section>
  
  <footer>...</footer>
  
</article>

<footer>...</footer>

With the Non-Semantic elements

<div id="header">...</div>

<div class="article">
  
  <div class="article-header">...</div>
  
  <div class="section">...</div>
  
  <div class="article-footer">...</div>
  
</div>

<div id="footer">...</div>

In both the above examples, you can see the Semantic elements increased the code consistency. Therefore the code is much easier to read for a developer.

Not only that, Search engines and assistive technologies are also able to better understand the content of your webpage.


Some semantic elements with description

<section> element in HTML

A section is a thematic grouping of content, and the <section> tag is used to define a standalone section in an HTML document.

<section>
  <h1>What is HTML?</h1>
  <p>HTML is a markup language, and it is used to create static web pages.</p>
</section>

<article> element in HTML

The <article> tag is used to define the article content on a webpage.

<article>

  <h1>The Article Title</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

</article>

<header> and <footer> elements in HTML

The <header> and <footer> tags define the header and footer of a document or section. And you can use these tags several times on a webpage.

<header>
	Site Header
</header>

<article>
  
  <header>
    <h1>Main topic of the article</h1>
  </header>

  <section>
    <h2>Sub topic of the article</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </section>
  
  <footer>
    <p>© 2020 John Doe</p>
  </footer>

</article>

<footer>
	Site Footer
</footer>

<nav> element in HTML

The <nav> tag defines a major set of navigation links (Not all the links).

<header>
	<nav>
      <a href="/html/">HTML</a>
      <a href="/css/">CSS</a>
      <a href="/js/">JavaScript</a>
      <a href="/jquery/">jQuery</a>
    </nav>
</header>

<section>
  <h1>What is HTML?</h1>
  <p>HTML is a <a href="/markup-vs-programming/" title="Markup Vs Programming Language">Markup language</a>, and it is used to create static web pages.</p>
</section>

<footer>
  <nav>
    <a href="/about/">About</a>
    <a href="/privacy/">Privacy</a>
    <a href="/contact/">Contact</a>
  </nav>
  <p>© 2020 example.com</p>
</footer>

You can put the navigation links inside a list or other elements such as div.

<nav>
  <ul>
    <li><a href="/home/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact us</a></li>
  </ul>
</nav>

<figure> and <figcaption> elements in HTML

The <figure> tag defines a self-contained content, and the <figcaption> tag is used to add the caption to the self-contained content (<figcaption> is optional).

<figure>
    <img src="http://localhost/w3jar-tutorials/wp-content/uploads/2020/05/mountains.png" alt="Mountains at sunset in the evening">
    <figcaption>Mountains at sunset in the evening</figcaption>
</figure>
<style>
  table,th,td{
    border:1px solid gray;
  }
</style>

<figure>
  
  <table>

    <tr>
      <th>Name</th>
      <th>Roll No.</th>
    </tr>

    <tr>
      <td>John Doe</td>
      <td>15</td>
    </tr>

    <tr>
      <td>Barry Oak</td>
      <td>16</td>
    </tr>
    
    <tr>
      <td>Mark Henry</td>
      <td>17</td>
    </tr>
    
    <tr>
      <td>Jane Doe</td>
      <td>18</td>
    </tr>

  </table>
  
  <figcaption>Table of the ABC school students</figcaption>
  
</figure>

Ask Questions

Your email address will not be published. Required fields are marked *