Cleaner, more logical markup. Accessibility improvements.
HTML5 introduces new semantic elements that make document markup more logical and web pages more accessible.
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.
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
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.