HTML5 Fun and Frolic

The header tag

This tag is used to group together introductory information. Your web pages will have at least one header. That header groups together the introductory content for the site: the site id, the tagline, the main menu. (This content is generally referred to as your banner or your masthead in the anatomy of a webpage.)

You can have other headers in a page if they are needed. Those headers usually group together introductory information for a specific news story, a blog post, that kind of thing. You do not need a header to group your page name with other content. When you have a page with multiple header tags, it is usually because you have a page that is aggregating multiple, separate stories. We'll have exercises that need multiple headers, but your projects will probably not need more than one.

The main tag

This tag groups together the page's unique primary (main) content. You would not include anything in the main that is also present on other pages (because it is unique). For instance, you wouldn't put your page's header tag inside the main, because that header is present on all other pages.

Because the content of the main is unique, you can only have ONE main per page. Keyboard navigation will allow a user to "jump to main," so consider this as you determine what goes in your main tag.

The footer tag

This tag groups together endnote information. You all know what footers are and what they look like: basically stuff like copyright notices, contact information, site policies, social media… that is the sort of information that is considered to be "endnote" and would go in a footer.

Most sites have a "global" footer with site-wide endnote information in addition to their "global" header with the site-wide introductary information. While all our sites will have headers, it is fine to have sites without footers if the site simply has no endnote information. Footers do tend to anchor the page and give a sense of the content having come to an end, however.

Like headers, a page can have multiple footers. Like multiple headers, multiple footers usually relate to separate, unrelated stories that are aggregated into a page. Things like tags, categories, etc show up in blog or news story footers.

The article tag

Specifies independent, self-contained content. An article is a “complete object” (don’t confuse it with publishing jargon, although the element is often used that way). Apply the “syndication” criterion: could the content were to be part of an RSS feed away from its page and still be complete? If "yes," use article.

article is commonly used for:

• primary content of the page (for ordinary webpages that are not news/blogs)
• blog posts
• news stories

In websites that consist of one page with different content (that the interface usually scrolls to after the user clicks on an item in the menu), that different content would go in an article, not a section. That is because each of those pieces of information are considered stand-alone; they could, in fact, have their own page in the site, even though they do not. We'll have an exercise that demonstrates this. However, most pages have only one article in them, unless they are aggregating separate news stories or blog posts.

Every page of your project websites will have an article in it: it will go inside the main, and often refer to identical content as the main. The main is the unique main content of the page, and the article is the complete, stand-alone content that could be syndicated. You will not be creating any one-page sites, or aggregations of news stories/blog posts. However, we’ll do exercises that have such content so you can see how to structure pages in these situations.

The article tag requires a section heading (an h2 tag).

The section tag

This is the most "generic" of the sectioning tags. A section is used to group thematically-related information together, but is incomplete in and of itself. It needs the other thematically-related information to be complete. For instance, in a page with a lot of content broken down into subtopics, those subtopics could be structured as sections – basically, subsections of the content. A section would be incomplete if it were syndicated.

If you use section tags, they will probably be nested inside a longer article. The article is the complete information, and the section tags break it down into subsections. You only need to do this if the article content is long; otherwise just use heading tags (probably h3) for subtopics in the article. It's likely that your project sites won't need to use sections, but we'll use them in exercises so you can learn what they are for.

The section tag requires a section heading (an h2 tag).

The nav tag

This tag groups together a navigational system in your site. The hyperlinks in a nav must be to pages within your site, not to external websites. A nav represents a structural system of navigation within the site.

Not all hyperlinks go in a nav tag. Links within text are obviously not “navigation” in a structural sense, nor are pages of hyperlinks as a resource to other websites, or search results, nor are hyperlinks to social media. You might create a structure of navigation (using lists) to social media, but because it doesn't navigate the site itself, it is not nav.

The nav tag does not require a section heading. It is optional. If you use one, use an h2 tag.

The aside tag

This is for content that is tangentially-related to the content in proximity to the aside. The aside could be tangentially-related to the entire page, or to a section or article, perhaps, depending on how the page is structured. It would be considered tangentially related to its "parent sectioning tag." An aside can also be considered separately from the content, although it is incomplete in an of itself, and needs its related content to make sense. You could not syndicate an aside.

Printed “sidebars” in a book offer a good analogy. It is understood as something that is related to, but stands apart (or aside) from the main page content.

commonly used for:

• groups of nav tags (as subnavigation, for instance)
• pull-quotes from page content (not a blockquote)
• sidebars
• advertising

We will probably use the aside element most often for sidebar navigation. In the layout, it is usually designed as a column in the overall design. In a sidebar of subnavigation, you would use the aside tag, and then as many nav tags as appropriate.

The aside tag does not require a section heading. It is optional. If you use one, use an h2 tag.