Semantic Notepad

In the notepad below, the content has been marked up semantically. On the left, you'll see an outline of the document's structure, courtesy of the HTML5 outline algorithm. On the right, the notepad.

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 quick overview of the new semantic elements:

The Article Element

The <article> element is used to markup a self-contained composition in a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. The content here 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

Kaleido
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 <figure> element can also be used to markup code samples, which is what is done here.

The Figcaption Element

The <figcaption> element is used to identify a figure's caption. This is particularly useful for accessibility agents which can use the caption to describe the figure to users.

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.