Essential front-end development

HTML Elements

HTML5

In 2014, the HTML standard was updated to increase the support for multimedia and graphical content. In addition, HTML5, added new semantic elements such as <main>, <section>, <article>, <header>, <footer>, <nav> and <figure> in order to describe the structure of an HTML page better than wrapping related content in <div>s and calling it a day. These new elements are mostly rendered as regular <div>s.

The major catalyst behind these changes was the demise of Adobe Flash that previously was used whenever a web page wanted to show videos or create complex interactive elements.

The benefit of semantic elements

A semantic HTML element tells us what purpose an element and its children has, just by looking at the tag name, rather than having to look at the content. This is useful for search engine optimization, as well as providing a significantly better user experience for people who use assistive technologies.

Code comparison

<div>
  <div>
    <span>Clickbait blog post title</span>
    <span>Fake author</span>
  </div>
  <div>
    Senectus et netus et malesuada fames ac turpis egestas sed tempus,
    urna et pharetra pharetra, massa massa ultricies mi, quis.
    Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
  </div>
</div>

As developers, we can see that the first nested divider probably is a header and the next divider contains a summary of some blog post. But the tags themselves do not tell us anything useful.

<article>
  <header>
    <h2>Clickbait blog post title</h2>
    <h3>Fake author</h3>
  </header>
  <summary>
    Senectus et netus et malesuada fames ac turpis egestas sed tempus,
    urna et pharetra pharetra, massa massa ultricies mi, quis.
    Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
  </summary>
</article>

In this rewritten version we have used the <article> semantic element as the parent element to indicate that we are dealing with a self-contained element. We have used a <header> element with <h2> and <h3> elements to specify the title and author, and used a <summary> element for the, you guessed it, summary.

With the new and better version, users can ask their devices to list all articles on a page, and quickly find what they are looking for by filtering through the header contents.

Learn more