HTML Semantic Elements

A semantic element is an element that makes sense in meaning both to the browser and the developer.

HTML5 introduced a number of semantic elements which we are going to go through one by one.

<article>

This defines content which is independent of other content within the website. For example, if you display book titles and excerpts as a grid on your website, then you can use the article tag to achieve this.

Example:

<article>
  <h2>Diary of a wimpy kid</h2>
  <p>This is a story of a boy who used to cry a lot.</p>
</article>
 
<article>
  <h2>Harry Potter</h2>
  <p>...a mother who loved her child enough to repel a curse</p>
</article>

The article tag can be used interchangeably with the div tag.

<aside>

Defines descriptive content about the page, such as additional information, or a sidebar.

Example:

<section>
  <p>Lorem ipsum is dummy text</p>
 
  <aside>
    <p>
      Lorem ipsum was originally used by newspapers in the 1800s in order to add
      placeholder text before making the correct publications.
    </p>
  </aside>
</section>

<details>

Defines a dropdown section that users can open and close whenever they need to. You can use this tag to create a "Frequently Asked Questions" section, to create a "Read more" button, or to represent further information about something.

You can add all elements inside the details tag depending on your needs.

Example:

<details>
  <p>
    Did you know I am hidden content that you can only see when you click the
    button? These are the things they don't want you to know.
  </p>
</details>

Additional styling has been applied for the interactive example below:

When you run the snippet above, you will have a title called "Details" and an icon that, when you click, will show the text inside. If you want to change this title to something more descriptive, use the <summary> tag. See the example below:

<details>
  <summary>Read more...</summary>
  <p>
    Did you know I am hidden content that you can only see when you click the
    button? These are the things they don't want you to know.
  </p>
</details>

Additional styling has been applied for the interactive example below:

The title will now show "Read more..." instead of the default "Details".

<figure>

Defines self-contained content such as illustratons, diagrams, images and even code snippets.

Example:

<figure>
  <img src="https://learnerspree.com/logo.png" alt="learnerspree logo" />
</figure>

In order to add a caption to the figure, use the figcaption element.

<figcaption>

Defines the caption for the figure element. Unlike the caption element for tables, figcaption can be placed as the first or last element inside the figure.

If more than one figcaption is present, the first one will be taken as the caption for the figure.

Example:

<figure>
  <img src="https://learnerspree.com/logo.png" alt="learnerspree logo" />
  <figcaption>learnerspree Logo</figcaption>
</figure>

<footer>

Represents a footer in a document. It typically contains:

1. Author information
2. Copyright information
3. Contacts
4. Sitemap
5. More website links
6. Related documents
7. Social media profiles
8. Newsletter subscription buttons
9. Donation buttons
10. Licence information.
11. Logo

Example:

<footer>
  <img src="/logo.png" alt="company logo" />
  <p>
    This page was built in NextJs by
    <a href="https://tsbsankara.com">Thomas Sankara</a>
  </p>
  <p>Copyright Thomas Sankara, 2023</p>
</footer>

This is a simple example of a footer. You can add many elements inside the footer as the need arises, and there are some websites such as Amazon (opens in a new tab) that have huge footers.

<header>

Is used to create a section for introductory content such as navigation links and logos.

Example:

<header>
  <div>learnerspree</div>
 
  <div>
    <a href="about.html">About Us</a>
    <button>Login</button>
    <button>Sign Up</button>
  </div>
</header>

The header above contains two divs, the first having the company name, and the second containing extra navigational links.

<main>

Represents the main content of your website that does not repeat across the entire website, such as your logos, navigation links and forms.

The content inside the main element should be unique to the document. Also, it cannot be a descdendant of any element except the div and section.

Example:

<!-- Heading and navigation links -->
 
<main>
  <section>
    <article>
      <img src="/profile.png" alt="Profile picture" />
      <p>Buy my eBook. Link in my bio</p>
    </article>
 
    <article>
      <img src="/profile.png" alt="Profile picture" />
      <p>Subscribe to my YouTube Channel</p>
    </article>
  </section>
</main>
 
<!-- Footer element -->

You MUST NEVER have more than one main element in a document.

<mark>

Is used to highlight text.

Example:

<p>
  <mark>
    Shino: This is important text. The reason is because it is highlighted.
  </mark>
</p>

Shino: This is important text. The reason is because it is highlighted.

<nav>

Represents a set of navigational links. Usually, only include the major links in the nav element.

Example:

<nav>
  <a href="about.html">About us</a>
  <a href="contact.html">Contact us</a>
  <a href="login.html">Login</a>
  <a href="create-account.html">Create Account</a>
</nav>

The above code example is going to render the following navigation:

<section>

Defines a section in a document.

Example:

<section>
  <h2>VINDICATIOOON</h2>
  <p>
    This is what Captain Raymond Holt said when Detective Diaz was pleased with
    his balloon arch.
  </p>
</section>
 
<section>
  <h2>Dumbledore once said:</h2>
  <p>
    I'm sorry, you must have been mistaken that I was going to, what was
    it..."Come quietly"...
  </p>
</section>

<summary>

Represents the visible clickable heading of the details tag. It should be the first child after declaring the details element.

Example:

<details>
  <summary>A famous quote...</summary>
  <p>You're lying Dolores. And one mustn't tell lies.</p>
</details>

The code snippet above renders the following: (additional styling has been applied so this is not how it looks by default).

<time>

Defines a specific time.

Example:

<p>I was born on the <time>32nd of December</time></p>

It takes in a datetime attribute which represents the exact date and time. Adding this attribute will allow browsers to offer to set a reminder through the user's calendar, and it also improves search results.

Example:

<p>
  We have a tree planting session on
  <time datetime="2023-03-23 09:00">23rd of March at 9am</time>
</p>

The date format for the datetime attribute is YYYY-MM-DD