Most new HTML5 elements are covered in elsewhere in this blog (most particularly the forms and multimedia reading lists) but there are a few dozen tags that don’t fit into those categories. Most of these are section elements, newly introduced in HTML5, and are fundamental to the construction of a modern web page.

Goal: Build a page using HTML5 markup

Prerequisites: HTML5 Backgrounder

Total time: 3 hours

Core Material

1. HTML5 Section Elements
2. Best Practices For Header & Nav
3. <main>
4. <address>
5. The data tag & attribute
6. contentEditable
7. download
8. details & summary
9. Detecting details support
10. preload
11. Resource Hints
12. Mininfication

Supplementary Material

Read “HTML Hierarchy” and “HTML Semantics” from marksheet.io (12 minutes).

When You’re Done

When you’re finished with this reading list, you’ll be ready to make longer pages with more content in semantic markup. Before doing that, you should probably learn more about typography and writing on the web.

Photograph of a building in downtown Oslo by Ram Yoga, under a Attribution Non-commercial No-Derivations 2.0 generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.