ptg16476052Laying Out a Page in HTML5 37313
When support for style sheets was widespread enough to be relied upon, table-based lay-
out gradually gave way to layouts based on elements positioned using CSS, and this is
still the current state of the art. Pages are usually structured using nested
elements
that are assigned id or class values that represent the structure of the page.
that are assigned id or class values that represent the structure of the page.
The authors of the HTML5 specification noticed that many of the names people were
assigning to their
elements were the same on just about every website and decided
to add elements to describe page structure that have semantic meaning.
to add elements to describe page structure that have semantic meaning.
Of course, elements like
,,
, and headings already exist. HTML5
adds elements that represent page headers and footers, navigation sections, and parts of
typical documents, like articles, sections, and asides. As browser support for these new
elements expands, they will gradually come to replace the nestedstructures that
make up just about every current web page.
Laying Out a Page in HTML5
Before digging into the new elements provided by HTML5, I want to talk about the struc-
ture of a typical web page. Here’s the source code for a sample web page:
<!DOCTYPE html>
A Typical Website
A Typical Website
A Headline
The text of an article.
This is an aside.
More article text.