HTML Semantics

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like:

to indicate navigation, header, and footer.

In HTML there are several semantic elements that can be used to define different parts of a web page:

HTML
Element

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."

Examples of where a <section> element can be used:

Chapters
Introduction
News items
Contact information

A web page could normally be split into sections for introduction, content, and contact information.

Example

    <section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
    international organization working on issues regarding the conservation,
    research and restoration of the environment, formerly named the World
    Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>

    <h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
    The well-known panda logo of WWF originated from a panda named Chi Chi that
    was transferred from the Beijing Zoo to the London Zoo in the same year of
    the establishment of WWF.</p>
</section>

HTML
Element

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

Example

    <article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
    developed by Google, released in 2008. Chrome is the world's most popular
    web browser today!</p>
</article>

<article>
<h2>Mozilla
    Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
    by Mozilla. Firefox has been the second most popular web browser since
    January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>

    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
    Microsoft Edge replaced Internet Explorer.</p>
</article>

Example 2

  <html>
<head>
<style>
.all-browsers {
  margin: 0;

  padding: 5px;
  background-color: lightgray;
}

.all-browsers
  > h1, .browser {
  margin: 10px;
  padding: 5px;
}

  .browser {
  background: white;
}

.browser > h2,
  p {
  margin: 4px;
  font-size: 90%;
}
</style>

  </head>
<body>

<article class="all-browsers">
  <h1>Most
  Popular Browsers</h1>
  <article class="browser">

  <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser
  developed by Google, released in 2008. Chrome is the world's most popular web
  browser today!</p>
  </article>
  <article class="browser">

  <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an
  open-source web browser developed by Mozilla. Firefox has been the second most
  popular web browser since January, 2018.</p>
  </article>

  <article class="browser">
    <h2>Microsoft Edge</h2>

  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
  Microsoft Edge replaced Internet Explorer.</p>
  </article>

  </article>

</body>
</html>

Nesting
in
or Vice Versa?

The <article> element specifies independent, self-contained content.

The <section> element defines a section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML
Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (
-
)
logo or icon
authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

Example

   <article>

 <header>

<h1>What Does WWF Do?</h1>

   <p>WWF's mission:</p>

 </header>

  <p>WWF's mission is to stop the degradation of our planet's natural environment,
 and build a future in which humans live in harmony with nature.</p>

</article>

HTML
Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents

You can have several <footer> elements in one document.

Example

   <footer>

 <p>Author: Hege Refsnes</p>

 <p><a href="mailto:hege@example.com">hege@example.com</a></p>

</footer>

HTML
Element

The <nav> element defines a set of navigation links.

Note: Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Example

   <nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

HTML
Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example

    <p>My family and I visited The Epcot center this summer. The weather was
    nice, and Epcot was amazing! I had a great summer together with my
    family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
    park at Walt Disney World Resort featuring exciting attractions,
    international pavilions, award-winning fireworks and seasonal special
    events.</p>
</aside>

Example 2

  <html>
<head>
<style>
aside {
  width: 30%;

  padding-left: 15px;
  margin-left: 15px;
  float: right;

  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot
  center this summer. The weather was nice, and Epcot was amazing! I had a great
  summer together with my family!</p>

<aside>
<p>The Epcot center is a
  theme park at Walt Disney World Resort featuring exciting attractions,
  international pavilions, award-winning fireworks and seasonal special
  events.</p>
</aside>

<p>My family and I visited The Epcot center
  this summer. The weather was nice, and Epcot was amazing! I had a great summer
  together with my family!</p>
<p>My family and I visited The Epcot center
  this summer. The weather was nice, and Epcot was amazing! I had a great summer
  together with my family!</p>

</body>
</html>

HTML
and
Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

Example

<figure>

  <img src="pic_trulli.jpg" alt="Trulli">

  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>

</figure>

Why Semantic Elements?

According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML

Below is a list of some of the semantic elements in HTML.

Tag	Description
	Defines independent, self-contained content
	Defines content aside from the page content
	Defines additional details that the user can view or hide
	Defines a caption for a element
	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
	Defines a footer for a document or section
	Specifies a header for a document or section
	Specifies the main content of a document
	Defines marked/highlighted text
	Defines navigation links
	Defines a section in a document
	Defines a visible heading for a element
	Defines a date/time

Note: For a complete list of all available HTML tags, visit our HTML Tag Reference.

PreviousHTML Computercode Next HTML Style Guide

Want to go beyond the notes?

Join CodingNow 2.0's HTML course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

HTML Semantics – FAQs

Quick answers about learning HTML Semantics in HTML.

What does this HTML Semantics note cover?

This free note from CodingNow 2.0 explains HTML Semantics in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.

Is this HTML Semantics tutorial free?

Yes. Every HTML topic on CodingNow 2.0, including HTML Semantics, is 100% free with no signup required.

How long does it take to learn HTML Semantics?

With focused practice, most students grasp HTML Semantics in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.

Where can I practise HTML Semantics after reading?

Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.

What are Semantic Elements?

Semantic Elements in HTML

HTML Element

Example

HTML Element

Example

Example 2

Nesting in or Vice Versa?

HTML Element

-

)

Example

HTML Element

Example

HTML Element

Example

HTML Element

Example

Example 2

HTML and Elements

Example

Why Semantic Elements?

Semantic Elements in HTML

Want to go beyond the notes?

HTML Semantics – FAQs

HTML
Element

HTML
Element

Nesting
in
or Vice Versa?

HTML
Element

HTML
Element

HTML
Element

HTML
Element

HTML
and
Elements