Semantic Elements in HTML5

Semantic elements are one of the most significant introductions in HTML5. In the previous versions of HTML the generic tag <div> with id or class attributes was used for structuring the web page. For example, for defining sidebars, footers, menu or other structural blocks the <div> tag was used with corresponding meaning (div="footer").

Semantic elements introduced in HTML have intrinsic meaning, and convey that meaning to both the browser and the developer. They clearly define what kind of content they contain (for example, the <footer> tag is used instead of <div id="footer">).

Let’s have a closer look at semantic elements and their meaning.

The <header> element

The <header> element defines a header for the document or section. It usually contains a logo, search bar, navigation links, etc.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
      display: inline-block; 
      margin-right: 10px;
      color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
          <li>Home</li>
          <li>About us</li>
        </ul>
      </nav>
      <h1>Welcome to our page</h1>
      <hr>
    </header>
    <article>
      <header>
        <h2>Title of the document</h2>
        <p>The content of the paragraph.</p>
      </header>
    </article>
  </body>
</html>

The <nav> element

The <nav> element defines a block of navigation links, either within the current document or to other documents. Note, that not all links in the HTML document can be placed inside the <nav> element; it can only include major navigation blocks. For example, the <nav> tag cannot be placed in the <footer> tag for defining links in the footer of the website.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>

The <article> element

The <article> element is used to define an independent, self-contained content (articles, blog posts, comments, etc.). The content of the element has its own meaning and it is easily differentiated from the rest of the webpage content.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>

The <section> element

The <section> element is used to group standalone sections within a webpage containing logically connected content (news block, contact information etc.).

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h1>Hypertext markup language HTML</h1>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h1>CSS</h1>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>

The <aside> element

The <aside> element defines a section with additional information related to the content around the aside element. It is generally used to enhance an article with additional information, or highlighting parts that can be interesting to the user.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>I like watching Game of Thrones.</p>
    <aside>
      <h4>Game of Thrones</h4>
      <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
    </aside>
  </body>
</html>

The <footer> element

The <footer> element defines the footer of a web page or a section. As a rule, it contains copyright information, contact details, navigation links, etc.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

The <address> element

The <address> element is used to provide contact information of the author or the owner of an article, document or all website.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <address>
      Author: W3docs Team<br />
      <a href="mailto:info@w3docs.com">Send Mail to the Author</a>
    </address>
  </body>
</html>

The <main> element

The <main> element defines the main content of the page. The content of the <main> tag must be unique and do not duplicate blocks of the same type that are repeated in other documents, such as the header of a site, header, footer, menu, search, copyright information, etc.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>Languages HTML and CSS are intended for site layout.</p>
      <article>
        <h2>HTML</h2>
        <p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>CSS is a language of styles, defining the display of HTML documents. </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

The <figure> element

The <figure> element is used for indicating self-contained content. The tag can include images, diagrams, illustrations, code examples, etc.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>A cute baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
    </figure>
  </body>
</html>

The <figcaption> element

The <figcaption> element is used for adding signature or annotation to the <figure> tag.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

The <time> element

The <time> element defines a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>

The <mark> element

The <mark> element is used to mark a part of the text which has relevance. It can be used to highlight text for showing emphasis, highlight search terms in search results to provide context; or distinguish new content added by user by showing it differently.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
  </body>
</html>

The <bdi> element

The <bdi> element is used to isolate bidirectional text (when a language with right-to-left directionality, such as Arabic or Hebrew, is used inline with left-to-right languages)

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the documnet</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>

The <wbr> element

The <wbr> tag is used to instruct the browser, where in the text a line-break could be added. Unlike the <br> tag, which oblige the browser to insert a line-break, when <wbr> is used the browser first analyze its content, and then insert a line-break if necessary (too long word or URL address).

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Example of a long string of text without wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
    <p>Example of a long string of text with wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>
    </p>
  </body>
</html>