Be the first to write a review
HTML5: It’s A Whole New Ballgame
An overview of the HTML5 structure and continue with a look at new tags and uses for the tags
In this article, Nancy is going to introduce you to HTML5. This article is the first in a series that will start with an overview of the HTML5 structure and continue with a look at new tags and uses for the tags. We will also cover what browsers are supported, which are not and how to get the support-nots to play nicely.
Header
By definition, the header is the beginning of whatever content it is introducing. This can be a page, a section, an article or even a table of contents. Therefore, there is often more than one header on a page so it's easy to see that one would not use the header tag when constructing the CSS for a page because the CSS for one header probably has nothing to do with the CSS for another. The trick here is that we have to get beyond the thought that "header" is an ID for a div and we center it with auto margins, etc. If we did that, we would have a jumbled mess because while one header may look like the top of a page, another header on the same page may have smaller headings contained within it and therefore, a whole different set of CSS rules.
Header is used like this as the header of the page:
<body>
<header>
<h1>This is My Page</h1>
</header>
<section><p>The first section of my
page is going to be about anything I want it to be about.</p></section>
<section><p>The second section of my
page is going to be about the schools I have attended.</p></section>
<footer>The End</footer>
</body>
However, header can also be used like this:
<body>
<header>
<h1>This is My Page</h1>
</header>
<section><p>The first section of my
page is going to be about anything I want it to be about.</p>
<article>
<header><h2>Article 1</h2></header>
<p>This is my first article and I hope you
like it.</p>
</article>
<article>
<header><h2>Article 2</h2></header>
<p>This is my second article and it absolutely
rocks!</p>
</article>
<footer>The End</footer>
</section>
</body>
You will notice that the second example has a header for the page heading, but also two smaller headers, one as the heading of each of the two articles contained in the document. When we get to styling the document above, we could either declare id's on the header elements, use classes for styling, or in some cases, enclose the section in a div whose id we could than use for the declaration of the CSS. This reasoning is probably why Adobe switched their CSS page samples in Dreamweaver CS5 to use classes for styling rather than div id's.
Section
The definition of "section" in the HTML5 spec is as follows:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Please read the definition above. Now read it again. It is very easy to see "section" and think .. aha .. there is my container and go to town creating CSS for it. However, please note that the "section" tag is NOT a container for styling. A section is a portion of a document and the tag has nothing to do with the way it I s styled. A section could contain one or more articles and each of those could have headers and footers within them but a section will basically stop when the end of the document portion or application portion is reached.
Article
An article is a section of content that reads like a blog post or a newspaper article. An Article can contain sections, it can have its own header or footer, and will even contain comments sometimes. When you have content and you can't decide if you should use Section or Article, ask yourself if the content reads like a standalone piece that you might read on a blog and get the complete thought so that it could easily be its own short page. If that is the case, then you want Article. Section is more generic in nature.
Aside
The "aside" tag is used to set apart secondary content, similar to what we are used to seeing in a sidebar. "Aside" does not contain your articles or other main content. Sometimes the navigation will be enclosed in an aside tag, but it is much more than that. You might have contact information that you want set off by itself away from the content. You would use the "aside" tag for that sort of content.
Nancy Gill
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".
Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.