HTML5 Semantic Notepad

HTML5's new semantic elements allow web pages to label and group block content such as articles, sections, navigation, figures, captions, etc. with more descriptive element names.

In the notepad below, the content has been marked up using HTML5's semantic elements. The outline on the left is generated based on the semantics of the notepad's markup using HTML5's Outline Algorithm implemented in JavaScript.

Semantic Elements

Cleaner, more logical markup. Accessibility improvements.

HTML5 introduces new semantic elements that make document markup more logical and web pages more accessible.

This document utilizes semantic tags to markup its content. The outline on the left is generated using the HTML5 spec's Outline Algorithm implemented in JavaScript. You can edit the document's content and see how it affects the outline. Here's a list of some of the new elements Internet Explorer 9 supports:

The Article Element

The <article> element is used to markup self-contained compositions in a document, page, application, or site. This entire document in the notepad is enclosed in an <article> element.

Nested Articles

Article tags can be nested to represent content blocks which are related to the parent. For example, individual comments on a blog post. Also, new default styles are applied to H1 headings which are nested inside sectioning elements (articles, asides, navs, or sections) that provide a subordinate heading effect.

The Section Element

The <section> element is used to designate generic sections of a document. Each semantic element's description in this article is enclosed in a <section> element.

The Nav Element

The <nav> element is used to markup a section with navigation links. Not all links on a page need to be in a nav element. Rather, only the essential site/application navigation need be enclosed in a nav element. One use of this is that accessibility tools could differentiate the main navigation for a page from other links on the page.

The Aside Element

The <aside> element is used to designate content which is "tangentially related to the content around the aside element." For example, sidebars or pull-out quotes in an article.

The Hgroup Element

The <hgroup> element is used to group heading elements (H1-H6). This allows for lower importance headings (e.g., <h2>)to be lumped as subheadings to a higher priority heading (e.g., <h1>). Notice how the subheading "Cleaner, more logical markup. Accessibility improvements" was not included in the outline on the left. This is because the outline algorithm can identify it as subordinate to the "Semantic Elements" heading because they are grouped together with an <hgroup>.

The Header Element

The <header> element is used to identify the page or application's introduction or navigational aids. A typical example is enclosing the page's masthead.

The Footer Element

The <footer> element is used to identify the page or application's footer. Typically this contains author information, copyright data, colophons, appendices, or additional navigational links.

The Figure Element

IE9
Fig. 1 - This is a figcaption.

The <figure> element is used to enclose a figure like an illustration, diagram, or photo. New default margins are applied to figures as well.

The Figcaption Element

The <figcaption> element is used to identify a figure's caption.

The Mark Element

The <mark> element can be used to identify text which should be highlighted. Default styles are applied to make the text appear highlighted.

Try it out!

  1. Move the mouse (or use the Tab key) over the outline and see how it maps to content in the notepad. Click an outline entry to scroll to its content in the notepad.
    • The correlation between the outline and the notepad is made easier to implelment by how semantic elements describe their content.
  2. Edit the notepad's headings and see how the outline is adjusted in real time.
    • Being able to build such an outline (based on the page's semantic markup) might allow future accessibility agents to better describe pages to their users.
  3. Edit the markup by clicking "Edit Markup": create new sections, articles, hgroups, and more
    • After editing, click "Save Markup" to see the new outline and the default styles applied to your content.