This was originally published Jan 5, 2016.

An Overview of HTML5 Semantics

What are HTML5 semantics and why should we use them? What is divitis and why shouldn’t we use it? This post is meant to answer all these questions, and more.

An overview of this overview:

  • Major semantic elements for outlining
  • Semantic elements for inline-text
  • Other cool tags you should be ooh-ing over
  • Tags you should stop using

What are HTML5 semantics?

Simply put, a semantic element clearly describes its meaning to both the browser and developer - for example, instead of div and span, we can use better alternatives such as form, table, and img.

Interesting trivia: The HTML5 WG came up with semantics such as header, footer, nav, section after Google analyzed 1 billion pages to see what authors were using to describe their divs and other elements.

The Fight Against Divitis

Fight against divitis! Instead of div’s everywhere with ID’s and classes, use semantic HTML5 tags.

Why use semantic tags? Primarily to enhace:

  • accessibility - help assistive technologies read and interpret your webpage
  • searchability - help computers make sense of your content
  • internationalization - only 13% of the world are English native speakers
  • interoperability - help other programmers understand the structure of your webpage

Semantic Elements For Document Outlining

Img

The main semantic tags you should know for larger document outlines are, from top to bottom:

  • header
  • nav: a navigation bar - it should not belong to the main outline of the HTML doc and aren’t usually rendered by assistive technologies
  • aside: a sidebar - it should not belong to the main outline of the HTML doc and aren’t usually rendered by assistive technologies

  • section: “A section is a thematic grouping of content, typically with a heading” (W3S), such as:

    • Introduction
    • content
    • contact information

  • article: a “Independent, self-contained, complete composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication)” (MDN) - such as

    • a forum post
    • magazine article
    • blog entry
    • must be identified by a heading within the article element

  • footer

Key points about document outlining

  • Each section, i.e. body, section, article, aside, nav can have their own header and footer tags!

Text Content Elements

Everyone knows about divand li. Some other interesting ones include:

  • main: the “main content of the <body> of a document or application.”
  • pre:‘preformatted text’ - often displayed in monospace.
  • keygen: A private key that is generated and stored locally, and a public key sent to the server, whenever a form is submitted! (Not supported in I.E.).
  • datalist: an input with pre-defined values in a datalist!

  • Figure: A marked-up photo, with a caption. alt is used for accessibility reasons. 
  <figure>
  <img src="images.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

Inline Semantic Tags

  • mark: highlights with a simple <mark> tag!
  • progress: showing a progress bar!

Other Cool Tags You Should Be Ooh-ing Over

canvas

Canvas is amazing. I could go on and on about how users can not only draw graphics on the fly. Basically, Canvas is a 2D drawing API added to HTML5, where you can draw anything directly without Flash or Java.

How does Canvas fit with the rest of the graphics rendering community? You can draw things on the web with 4 ways: SVG, CSS, direct DOM animation, and Canvas.

Canvas differs from those 3 in that:

  • SVG is a vector API that draws shapes - it will always stay smooth in shape, whereas Canvas is pixelated. Better for existing shapes (i.e. PSD or Illustrator files) in which you want to render to the screen exactly
  • CSS is more for styling DOM elements. You can use CSS to style the rectangular area of the Canvas (i.e. border and bg).
  • DOM Animation is using CSS or JS to move objects around - better for large static areas

The benefits of Canvas is that you get more control over drawing and less memory, at a cost of writing more code. Canvas is great for charts, dynamic diagrams, video games, and letting the user draw directly on the web.

The best resource out there is Josh Marinacci’s “HTML Canvas Deep Dive.”

Video and Audio

Now you can easily embed media into HTML elements. I’m too young to have experienced the days in which embedding mp3 files was a nightmare and acrobatic trick for developers, but it still wows me by how easy it is to use:

Other tags

Tags like video, audioand canvas gets most of the attention from the web development community.

But did you know about these other, less impressive but no less important, tags?

<bidi>

For ‘bi-directional’ writing - for languages such as Arabic and Hebrew.

<time>

This is purely to annotate human-readable dates with a machine-readable one, such as:

  <time datetime="2011-11-13T20:00Z">My birthday</time>

Why? Search engines can use these timestamps to assist with filtering content; a browser in Sri Lanka could automatically convert dates into the Buddhist calendar; Gmail and other assistive technologies can detect and automatically format the date.

Tags You Should Stop Using

Elements such as center, font, big, and attributes such as align on imgand background on body have been depreciated - for a good reason!

If we maintain the philosophy that HTML is all about organization of content, and CSS as purely styling, then elements that were purely presentational don’t belong within HTML. More about depreciated elements are in the WG note from Dec 2014.

What about tags like SMALL?

small has now been re-defined to indicate side comments, such as disclaimers, caveats, legal restrictions, attribution - however, elements with small will still be displayed as, well, small fonts.

Conclusion

There's so much more to this topic, but those are some basics that anyone should know - the important semantic tags, as well as canvas, video and tags you should stop using. It's also worth looking into ARIA Web Standards to ensure you have a truly semantic website.