HTML tags tell the browser how to structure, and display the content for the web pages. Semantic HTML is a feature which we can write HTML codes in a more descriptive way. It makes people understanding the role of this line or chunk of codes, instead of how they should structure or look like. Before semantic HTML, we often see a bunch of div tags, p tags, span tags, which tells nothing about their content and we normally use an "id" to tell what they are for (or commenting). However, we can do this in a more self-explanatory way without putting id, or classes just to describe what their roles are.

Here are codes before semantic HTML:

<div id="header">
     <div id="nav-bar">
        <a href="index.html">Home</a>
        <a href="about.html">About Us</a>
     </div>
</div>
<div id="main">
     This is the section where main content goes.
     <div class="content">
          <div>This is for section 1 content.</div>
     </div>
     <div class="content">
          <div>This is for section 2 content.</div>
     </div>
     <div class="content">
          <div>This is for section 3 content.</div>
     </div>
</div>
<div id="footer">
     <div>This is for footer.</div>
</div>

This is with the utilization of semantic HTML.

<header>
     <nav>
          <a href="index.html">Home</a>
          <a href="about.html">About Us</a>
     </nav>
</header>
<main>
     This is the section where main content goes.
     <section>
          <h2>Section 1</h2>
          <div>This is for section 1 content.</div>
     </section>
     <section>
          <h2>Section 2</h2>
          <div>This is for section 2 content.</div>
           <article>
                <figure>
                     <img src="/whatever.png" />
                     <figcaption>
                          This is the image caption.
                     </figcaption>
                </figure>
                <p>Article content goes here.</p>
           </article>
     </section>
     <section>
          <h2>Section 3</h2>
          <div>This is for section 3 content.</div>
     </section>
</main>
<footer>
     <div>This is for footer.</div>
</footer>

These are some examples of semantic HTML tags which were introduced in HTML5 that you can use in your codes:

<header>

• Containing introductory items for the webpage and navigation menu. It is similar but different from <h1>, as <header> is used to represent the section, and <h1> is used to put the title for that section.

<footer>

• Containing the footer information for example copyrights, privacy policy, contacts, etc.

<nav>

• Containing navigation links

<main>

• Represents the main content area, this should only be used once in the page. ( A document must not have more than one main element that does not have the hidden attribute specified.)

<section>

• Represents a standalone generic section, each section should ideally have a header for that section itself.

<figure> & <figcaption>

• This self-contained element can be used to group image with its caption

And there are around 100 of them...

Here are some of the benefits of using semantic HTML:

1) Readability
<header>, <footer>, <nav>... they act mostly like a <div>, however this will give a clearer understanding of what are the contents inside these blocks. From the two code blocks above, the second block is easier to read and understand. As a developer, we often need to look at other people's codes. Therefore, semantic HTML would definitely improve the reading experience of your codes.

2) Improve SEO
These keywords will improve the search ranking of your content because it provides richer information instead of <div> which tells nothing to the search engines.

3) Accessibility
Semantic HTML will improve the accessibility of your web page, which gives clearer context to audiences who access these pages through a screen reader, or relying on keyboard-only navigation (using tab key to jump from section to section). For example, you might want to use <button> instead of just solely the <a> tag for a button. For additional information, you may also assign "role" attribute to <a> with the value of button. This will also be recognized by screen reader.


I hope this gives you an insight of what semantic HTML is and how this could improve our code quality. Cheers.


Do follow me for more future articles on web design, programming and self-improvement 😊

Follow me on Medium