More elements

Roles played by information
Now that we know how to break up a page into elements and apply style, we are ready for a deeper look into various ways of grouping and structuring information.
In our rhubarb example, different types of information are not only styled differently, but play different roles. The ingredients for recipes appear as a bulleted list, the rhubarb identification chart appears as a table, and other information on the page is grouped into mini-articles on various topics.
Our focus in this module is the roles played by different types of information. In particular, we will consider:
- Lists: grouping related items in order
- Tables: grouping data in a tabular form
- Semantic elements: categorizing information by its meaning
Back in the old days (before HTML5), different classes of division elementsAn element used to group elements on different lines. were used to specify different roles. Now, best practices suggest using semantic elements instead.
Grouping and sectioning are also used to organize information on a page.
Grouping
The word rhubarb at the top of our example is styled differently from the rest of words in the heading: what special element exists to capture its meaning? As you may have guessed, there is no rhubarb
element to use. Moreover, it is not really the meaning of the word that sets it apart, but rather its style.
Two all-purposes ways of grouping elements are the span element (tag name span
), introduced here, and the division elementAn element used to group elements on different lines. (tag name div
), introduced earlier. Roughly speaking, the former is used to group elements that share a line and the latter to group elements on different lines. These elements are particularly useful when you wish to designate a group of words or elements to be formatted differently from others, as in our example. We've added an extra space between about and rhubarb so that the words don't look too crowded.
<h1>Ruminating about <span class="allcaps">rhubarb</span></h1>
In this case, another option would have been used RHUBARB
instead of rhubarb
; more generally, span elements work well to mark special parts of the text.
Sectioning
A new concept introduced in HTML5 is an outline associated with a page. Outlines, when implemented, will provide assistance in navigation. The section
, article
, aside
, and nav
elements (which we will introduce soon) can be used for sectioning, where a new nested outline is started when any of these elements is introduced. These will also be of great use for screen readers; using appropriate elements is a good habit to form now.