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
span, we can use better alternatives such as
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:
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:
- 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
Key points about document outlining
- Each section, i.e.
body, section, article, aside, navcan have their own
Text Content Elements
Everyone knows about
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.).
inputwith pre-defined values in a datalist!
Figure: A marked-up photo, with a caption.
altis 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
progress: showing a progress bar!
Other Cool Tags You Should Be Ooh-ing Over
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:
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?
For ‘bi-directional’ writing - for languages such as Arabic and Hebrew.
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
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 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.
There's so much more to this topic, but those are some basics that anyone should know - the important semantic tags, as well as
video and tags you should stop using. It's also worth looking into ARIA Web Standards to ensure you have a truly semantic website.