How to Use HTML5 Semantic Elements
HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very least we should start learning them.
Over the last year or two I’ve read quite a number of posts talking about html5 structural tags and most of them left me a bit confused about how to use them.
Recently I read Jeremy Keith‘s excellent book, HTML5 for Web Designers from A Book Apart and now feel like I have a better understanding of how these tags should work.
This post is a further attempt to better understand things for myself and hopefully pass on some of that understanding to you.
Today I want to run through each of the new tags and briefly explain what each is meant to be used for. I’ll keep the code itself light in this post.
Note: Some of the elements below lead to a new content model for structuring documents. I’ll talk about more about content models on Thursday. Next week I’ll do my best to present some code for a typical blog post using these new html5 elements.
|<article>||Defines an article|
|<aside>||Defines content aside from the page content|
|<bdi>||Isolates a part of text that might be formatted in a different direction from other text outside it|
|<command>||Defines a command button that a user can invoke|
|<details>||Defines additional details that the user can view or hide|
|<dialog>||Defines a dialog box or window|
|<summary>||Defines a visible heading for a <details> element|
|<figure>||Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.|
|<figcaption>||Defines a caption for a <figure> element|
|<footer>||Defines a footer for a document or section|
|<header>||Defines a header for a document or section|
|<mark>||Defines marked/highlighted text|
|<meter>||Defines a scalar measurement within a known range (a gauge)|
|<nav>||Defines navigation links|
|<progress>||Represents the progress of a task|
|<ruby>||Defines a ruby annotation (for East Asian typography)|
|<rt>||Defines an explanation/pronunciation of characters (for East Asian typography)|
|<rp>||Defines what to show in browsers that do not support ruby annotations|
|<section>||Defines a section in a document|
|<time>||Defines a date/time|
|<wbr>||Defines a possible line-break|