HTML Semantic Elements

Feb 4, 2023 0 277

Niki Tandel

Web Developer

What are Semantic Elements?

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

Non-semantic element examples : <div> and <span>

semantic elements : <form>, <table>, and <article>

Semantic Elements in HTML

To indicate navigation, header, and footer, many websites use HTML code such as: <div id=”nav”> <div class=”header”> <div id=”footer”>.

There are some semantic elements in HTML that can be used to define various parts of a web page:

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

 <section> Element

A section in a document is defined by the <section> element.

Here are some examples of where an <section> element can be used:

  • Chapters
  • Introduction
  • News items
  • Contact information

Normally, a web page would be divided into sections for introduction, content, and contact information.

Example

<section>
  <h1>Nature</h1>
  <p>Nature is an essential component of humanity. It is one of the greatest blessings for human life, but most people do not recognise it as such. Nature has inspired many poets, writers, artists, and others throughout history. This amazing creation inspired them to write poems and stories about it. They truly valued nature, and their works reflect this even today.</p>
</section>

<section>
  <h1>Significance of Nature</h1>
  <p>Nature has existed long before humans, and it has always taken care of and nourished humanity. In other words, it provides us with a protective layer that protects us from various types of damages and harms. Human survival is impossible without nature, and humans must recognise this.</p>
</section>

Output

<article> Element

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

An article should make sense on its own and should be distributable separately from the rest of the website.

Here are some examples of how 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 that was released by Google in 2008. Today, Chrome is the most popular web browser on the planet!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is a web browser that was created by Mozilla. Since January 2018, Firefox has been the second most popular web browser.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser released by Microsoft in 2015. Microsoft Edge has taken the place of Internet Explorer.</p>
</article>

Output

Another example of <article> element

<!DOCTYPE html>
<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 that was released by Google in 2008. Today, Chrome is the most popular web browser on the planet!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is a web browser that was created by Mozilla. Since January 2018, Firefox has been the second most popular web browser.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser released by Microsoft in 2015. Microsoft Edge has taken the place of Internet Explorer.</p>
  </article>
</article>

</body>
</html>

Output

Nesting <article> in <section> or Vice Versa?

The <article> element specifies self-contained, independent content.
An <section> in a document is defined by the <section> element.

Can we use the definitions to determine how those elements should be nested? We simply cannot!

As a result, HTML pages with <section> elements containing <article> elements and <article> elements containing <section> elements will be found.

<header> Element

The <header> element is used to hold introductory content or a set of navigational links.

An <header> element typically includes:

  • one or more heading elements (<h1> – <h6>)
  • logo or icon
  • authorship information

It should be noted that multiple <header> elements can exist in a single HTML document. However, an <header> element cannot be contained within a< footer>, an <address>, or another <header> element.

Example

<article>
  <header>
    <h1>What is a company mission statement?</h1>
    <p>Company 's mission:</p>
  </header>
  <p>A mission statement encapsulates who your company is and why it exists. If you want to get fancy and speak a little French, it's raison d'être. Company mission statements are typically one or two sentences long. And the best mission statements are far from boring.</p>
</article>

Output

<footer> Element

The <footer> element specifies the bottom of a document or section.

A <footer> element typically includes:

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

In a single document, you can have multiple <footer> elements

Example

<footer>
  <p>Author:</p>
  <p><a href="mailto:meTandel@example.com">meTandel@example.com</a></p>
</footer>

<nav> Element

A set of navigation links is defined by the <nav> element.

Example

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<aside> Element

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

The a<side> content should be related to the surrounding content in some way.

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>

Another Example of <aside> Element

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

Output

<figure> and <figcaption> Elements

The <figure> tag denotes self-contained content such as illustrations, diagrams, photos, code listings, and so on.

A caption for an <figure> element is defined by the <figcaption> tag. The <figcaption> element can be the first or last child of the <figure> element.

The actual image/illustration is defined by the <img> element.

Example

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Niki Tandel

Web Developer
Read More

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories