An Overview of HTML5 Semantics
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
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 technologiesaside
: a sidebar - it should not belong to the main outline of the HTML doc and aren’t usually rendered by assistive technologiessection
: “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 ownheader
andfooter
tags!
Text Content Elements
Everyone knows about div
and 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
: aninput
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, audio
and 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 img
and 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.