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:

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.

aside tag
aside tag

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

Details element with closed content
Details element with closed content

Opened State

Details element with content opened
Details element with content opened

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>
Figure element with figcaption
Figure element with figcaption

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>
Footer element
Footer element

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>
Header element
Header element

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>
Main section of a body content
Main section of a body content

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>
nav element with navigation links
nav element with navigation links

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>
Section elements in a web page
Section elements in a web page

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

<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>
Time element with datetime and duration specified
Time element with datetime and duration specified

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>
Heading Element from H1 to H6
Heading Element from H1 to H6

Additional Points to remember

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

𝕛𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥 dєvєlσpєr

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store