HTML Semantic Elements

A Semantic HTML element generally describes its meaning to both the browser and the developer. HTML contains both semantic and non-semantic elements.

Non-semantic elements are the one that doesn’t specify any meaning about its content

Example: 
<span><div>

Semantic elements on the other hand specify the meaning of their content.

Example: 
<article> <aside> <details> <figure> <figcaption> <footer> <header>
<main> <nav> <section> <summary> <time> <h1>...<h6>

Some of the benefits from writing semantic markup are as follows:

• Search engines will consider its contents as important keywords to influence the page’s search rankings
• Screen readers can use it as a signpost to help visually impaired users navigate a page
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
• Suggests to the developer the type of data that will be populated
• Semantic naming mirrors proper custom element/component naming.

Article

An article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. A given document can have multiple articles in it. For example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

Note: both starting and ending tags are mandatory only includes the global attributes.

Aside

An aside element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. Mostly aside tags are used to display the advertisements on the side of the content where the advertisement is actually not the part of the content directly.

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

The above code will ideally look like the following screenshot of the page.

Details

A details element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label must be provided using the <summary> element.
A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <summary> element is used as the label for the disclosure widget.

<details>
    <summary>I am the title</summary>
    I am the hidden description
</details>

Closed State

Opened State

An open attribute can be added to the Details tag to set the tab open by default. <details open>

Figure & Figcaption

A figure element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

Figcaption or Figure Caption element represents a caption or legend describing the rest of the contents of its parent <figure> element.

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

Footer

A Footer element represents a footer for its nearest sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents.

<article>
    <h1>Article Title</h1>
    <ol>
        <li>Content one</li>
        <li>Content two</li>
        <li>Content three</li>
    </ol>
    <footer>
        <p>© 2021 by Senthur Athiban</p>
    </footer>
</article>

Header

A Header element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

<header class="page-header">
    <h1>Header Title</h1>
</header>
<main>
    <p>I am the <em>main</em> content with some random text here.</p>
</main>

Main

A Main represents the main content of the <body> in document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

<header>Header</header>
<main role="main">
    <p>Body Content 1</p> 
    <p>Body Content 2</p>
</main>

Nav

A Nav element represents the navigation links that take to the content with the page or to another document.

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Menu1</a></li>
        <li class="crumb"><a href="#">Menu2</a></li>
        <li class="crumb">menu3</li>
    </ol>
</nav>
<h1>Header</h1>
<p>Content of the page</p>

Section

A section element represents a section of a document that doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

<h1>Page Heading</h1>
<section>
    <h2>Section 1</h2>
    <p>This is the content of section 1</p>
</section>
<section>
    <h2>Section 2</h2>
    <p>This is the content of section 2</p>
</section>

Summary

This element specifies a short description, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

<details>
    <summary>what is a summary ?</summary>
Clicking the summary element toggles the state of the parent element open and closed.
</details>

Time

The Time element represents a specific period in time that includes the datetime attribute to translate dates into a machine-readable format, allowing for better search engine results. It can be represented in one of the following formats

• 24-hour clock
• Gregorian calendar (with optional time and timezone information)
• Valid time duration

<p>
 This content contains  datetime
  <time datetime="2018-07-07">July 7</time>
</p>
<p>
  content contains duration
  <time datetime="PT2H30M">2h 30m</time>
</p>

H1 … H6

The Heading element represents six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

<h1>H1 Element</h1>
<h2>H2 Element</h2>
<h3>H3 Element</h3>
<h4>H4 Element</h4>
<h5>H5 Element</h5>
<h6>H6 Element</h6>

Additional Points to remember

• Make sure to use appropriate content-specific elements.
• Each element has its own advantages and does not randomly pick elements for displaying content as they directly reflect in your SEO benefits.
• Only one H1 element to be present for the entire page. Any number of h2 to h6 can be used on the same page.
• Nav links or footer links if linked to a different page other than your own site and if you do not want your traffic to be shifted to that external page then make sure nofollow and noreferrer added in rel attribute with the anchor tag.

<a href=”https://externallink.in" 
 rel=”noreferrer nofollow”>Click here to visit Point Jupiter website.
</a>