HTML Semantics

In English Language, Semantics simply means the meaning and interpretation of words, signs, and sentence structure. Therefore in HTML, a semantic element clearly describes it’s meaning to both the browser and the developer. We know that HTML elements can be grouped into:

1. Semantics Elements

2. Presentational Elements.

Presentational Elements are subset of HTML elements used to determine the appearance of the document. They tell nothing about their contents. Examples are the <font>, <hr>, <b>, <div>, <span> element tags etc. But our focus in this article will be semantics html elements.

Before the advent of HTML5, programmers paid less attention to web pages design. They made use of different hacks available to present and build web pages. A good example is the use of <table> element which is supposed to be used for displaying tables on web pages to position elements! Another one is the use of non-semantic or presentational elements like <div> to display almost every thing on a web page. They would then give this element an id or class in order to describe its purpose. Example, instead of having a <nav> element for a nav bar, they would use <div id=”nav">. So web pages then where full of divs!. With the advent of HTML5, this problem was solved. New tags where introduced to mean what they represent on a web page. HTML semantics elements are as follows:

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

Let us take a few of them that are important and most widely used and explain.

SECTION

The <section> element defines a section in a document. According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.”

 <section class="bottom-section">
    <h2> 
        Everything you need to know about my favourite wild animal 
        Leopard 
    </h2>
    <p>
    The section element defines a section in a document. 
    According to W3C's HTML documentation: "A section is a thematic 
    grouping of content, typically with a heading."
    </p>
  
 </section>

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.

Examples of where the <article> element can be used:

• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles

HEADER

As the name implies should be used for the main heading of the page. It usually has an <h1>,<h2> …etc. nested inside it.

A <header> element typically contains:

• one or more heading elements (<h1> — <h6>)
• logo or icon

FOOTER

The <footer> element as the name suggests defines a footer for a document or section. It is usually located in the down part of a html page or web page.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links

NAV

The <nav> element defines a set of clickable navigation links. It is usually located at the top or left side of a html page or web page.

picture of how each html semantic elements looks like

CONCLUSION

Developers should try as much as possible to make use of these newly introduced semantic elements in their web pages, because it arranges and makes a HTML code more meaningful, easy to debug and style for the developer. It also helps for screen readers to be able to read your pages correctly to visually impaired users. So always try to use where necessary!!