This post is part of series on Universal Design at Salesforce.com. As always, all of the content and images in these posts fall under our safe harbor agreement.

Landmarks and Sections

HTML5 includes many landmark style elements and containers. In the early days, it was common to place a link at the beginning of a website allowing users to, "Skip to the main content". Although you should still use this technique, in the future this will no longer be necessary. Assistive technology will allow users to jump around from Menu to Navigational element, to Headers, to an Aside and back again.

Placing content inside elements that represent the content is at the heart of semantic web development. Here are a few common semantic container elements. I've included their ARIA equivalents for graceful HTML4 degradation. Thanks go to html5doctor.com and the w3c for helping to define some of these terms.

<header role="banner">

Representing the header, or banner of a document, this element is commonly used to mark up a page's title and tagline.

<nav role="navigation">

Representing navigation for a web page, this element typically contains several links to other parts of your website. On salesforce, the set of object tabs would be considered navigation.

<section role="group">

Section is a bit trickier, as it represents a generic document or section of an application. If using a tabset to organize content, each tab view would be considered a separate <section>.

<article role="article">

Articles represent portions of a webpage that consist of independent parts of a document, such as blog posts, news articles, chatter posts, and even related comments. Articles can be nested, so an entire chatter, yammer or facebook thread would be one article, with sub-articles for each related comment.

<aside role="complementary">

Asides contain information that is tangentially related to the rest of the content in a page. Aside can be used for pull quotes, sidebars, advertising, blogrolls, etc.

<footer role="contentinfo">

Footers, typically at the bottom of a page, typically contain metadata about the enclosing section, such as who wrote it, copyright data, etc.

<menu role="menu">

The menu element represents a list of commands. Typically these items should be placed in a semantic list, <ol> or <ul>. Menu buttons, and split menu buttons may use the <menu> element.