IT 581: Page Organization

Elements for Page Organization

HTML5 introduced new elements that give semantic meaning to the major sections of a typical web page.
They include
- sections (section)
- articles (article)
- navigation (nav)
- tangentially related content (aside)
- headers (header)
- footers (footer)
While pages can be designed to look the same without using these elements, they can be important of non-visual browsers and non-human users such as search engine robots.

Organizational Elements: header, navigation, section, article, aside, footer

Element	Tag	Uses & restrictions
Header	<header> ... </header>	Introductory material for a page, section, or article. A header element usually contains a heading (h1-h6), but this is not required. The header element can for a section's table of contents, a search form, or logos. There can be several header elements in one document (for example in different sections or articles). A header cannot contain a header or a footer.
Navigation	<nav> ... </nav>	Primary navigation section, such as a page menu or site menu. Not all groups of links on a page need to be in a nav element.
Section	<section> ... </section>	A thematic grouping of content, typically with its own heading, such as the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Article	<article> ... </article>	Self-contained, reusable composition, such as a newspaper article, forum post, complete blog entry, or any other independent item of content.
Aside	<aside> ... </aside>	Content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
Footer	<footer> ... </footer>	Information about its section such as who wrote it, links to related documents, copyright data, and the like. There can be several footer elements in one document (for example in different sections or articles). A footer cannot contain a header or a footer.

A tranditional HTML page

Here is a simple, standalone web page that holds an article, although other types of content (like a blog posting, a product description, or a short story) would work equally well.

Page Structure with HTML5

The <div>element is a staple of current-day web design. It's a straightforward, allpurpose container that can apply formatting anywhere you want in a web page.
The limitation of the <div> is that it doesn't provide any information about the page.
To improve this situation in HTML5, you can replace some of your <div> elements with more descriptive semantic elements.

Browser Compatibility for the Semantic Elements

Browsers have different levels of support of these HTML5 semantic elements.

To support them, a browser simply needs to treat them like an ordinary < div> element.
you simply need to add a new rule to your style sheet. Here is a super-rule that applies block display formatting to the nine HTML5 elements that need it in one step:

article, aside, figure, figcaption, footer, header, hgroup, nav, section,
summary {
display: block;
}

Internet Explorer 8 and older introduce another challenge: They refuse to apply style sheet formatting to elements they don't recognize. There is a walkaround though.

A more complex example

The complete page html

The external style sheet used. css

Comments to: dong@hood.edu