Published on

Semantic Elements in HTML5

Semantic Elements in HTML5

Semantic Elements in HTML5

HTML5: Semantic Elements

Semantics is the branch of linguistics and logic concerned with meaning. In simple words, it is the study of the relationship between words and their meanings.

What is Semantics in HTML?

Semantic HTML introduces meaning to the web page rather than just presentation. It aims to be semantic and representational: people can know what elements they are looking at and the browsers know how to display them. Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

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

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

Semantic elements

These are some of the roughly 100 semantic elements available some of them are mentioned below:

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

HTML5 page layout

Web page layout is the important aspect while creating a website to make it responsive and well structured. Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: Used to define a header for a document or a section.
  • <nav>: Used to define a container for navigation links
  • <section>:Used to define a section in a document
  • <article>:Used to define an independent self-contained article
  • <aside>:Used to define content aside from the content (like a sidebar)
  • <footer>: Used to define a footer for a document or a section
  • <details>: Used to define additional details
  • <summary>:Used to define a heading for the <details> element

Sample example for HTML5 Layout

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My Website</title>
  </head>

  <body>
    <header>
      <nav>
        <ul>
          <li>Menu</li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h2>Article title</h2>
          <p>
            Posted on
            <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time>
            by <a href="#">Writer</a> - <a href="#comments">6 comments</a>
          </p>
        </header>
        <p>
          Pellentesque habitant morbi tristique senectus et netus et malesuada
          fames ac turpis egestas.
        </p>
      </article>

      <article>
        <header>
          <h2>Article title</h2>
          <p>
            Posted on
            <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time>
            by <a href="#">Writer</a> - <a href="#comments">6 comments</a>
          </p>
        </header>
        <p>
          Pellentesque habitant morbi tristique senectus et netus et malesuada
          fames ac turpis egestas.
        </p>
      </article>
    </section>

    <aside>
      <h2>About section</h2>
      <p>
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
        est. Mauris placerat eleifend leo.
      </p>
    </aside>

    <footer>
      <p>Copyright 2009 Your name</p>
    </footer>
  </body>
</html>