FYI
HTML5 does not contain a space between the "HTML" and the "5".
It's as if "HTML5" is a Brand Name!
Updated: November 9, 2011
HTML Tags are instructions we provide to a web browser.
These Tags define
certain sectionsof a web page.
Today, we use the <div> tag to "divide" a page into sections. But according to some, the <div> tag does not carry enough meaning behind it. (even though we use HTML attributes like id and class to describe the div and hook the CSS styles to the HTML)
But now, with HTML5, those sections will apparently have more "Meaning" because the new HTML5 tags are said to be "Semantic".
Semantic -the meaning of words.
I can't really explain the Semantics that are supposedly inherent in the new HTML5 Elements other than we will be using words other than "div". I guess using <header> instead of <div> is more semantic, but what are the benefits? (I guess I'm not yet convinced on the Semantics part of it all.)
In any case, Semantics, Shamantics. Let's just learn how to use the new HTML5 Elements! If there's more meaning to it all, then great.
Instead of rattling off definitions of each element, let's first look at one possible Layout scenario using HTML5.
Click on each section of the Layout Below to learn more about the HTML5 Element used to create that section. BUT.... read over the content below the image first.
Did you notice, not one single <div> was used in the above Layout?
Well, actually, I would most likely make a container and then nest all of the elements above inside this container. (The container is optional. And sometimes the container does not include the header and/or top nav, it really depends upon your design goals.) Furthermore, I would use a <div> tag for the container. Why? Well, staying inline with Semantics and the HTML5 Specs, a div is a generic element without any real meaning. Therefore, since the container is only meant for the purposes of appearance and structure, the <div> tag is most appropriate.
However, many <div> tags will be replaced by HTML5's <section> or <article> tag. The <section> is also "generic" to some extent, in that the content it contains is generic but related.
The <section> can have it's own header, h1, h2, footer, and other tags. And really, you can have several sections on any given page. This means, you can have more than one header and footer on any given page. (For instance, think of a blog and the individual blog posts. Each one has a header and footer.)
Again, the <div> tag will be used to help achieve design goals.
An element, by definition, is the opening + closing tag + all the content in between these tags. In these tutorials, I will use the terms Elements and Tags as if they mean the exact same thing.
GO to http://dev.w3.org/html5/spec/Overview.html#the-section-element to read over the specs yourself.
However, the <section> element differs from a div in that the section element contributes to the HTML5 Outline Algorithm (the Explicit Outline)
The Section Element is used any time you want to create a new Branch in the Document Tree (Outline). In doing so, the Section Element typically needs a Heading Tag. (There are rare times that a heading tag is not required, maybe in some HTML5 App. )
If you did not need a heading, then more than likely you should have used a Div tag and not the section tag.
A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various 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.
But Remember, you will need to use a heading in each section element to define that section.
Therefore, if you don't use a heading in your section element, you most likely should not use the section element. Instead, you need a div.
Everytime you add a new section, you can also use a new h1 element without worrying about the particular level of the Outline. Each new section can have a new h1. Therefore, each web page can now have more than one h1 per page.
Since most web pages have a header, the HTML5 specification includes the <header> element because it is so common. Usually, the header is at the top of a web page, but now you can have a header in any <section> of the page.
The header can contain h1 and h2 heading tags, but it doesn't have to. Actually, the only rules are as follows: you cannot nest a header or a footer inside another header or footer. Other than that, you are pretty much free to do whatever you want with the content of a header.
Any given web page can have more than one header. Let me explain: while we often think of a header as the top section of a web page, other sections within the page can now have a <header> as well. For instance, every <section> element can have a <header>. An <article> can have a header. But, the <header> is not a requirement in these other elements.
Again, it is very common to see a navigation menu on a web page, so HTML5 created the <nav> element.
The Nav element Is meant to hold a set of hyperlinks that link to another page or another part within the same page. Think of the horizontal navigation menu in my video tutorials. Instead of using a div tag, we can simply use the <nav> tag.
A "self-contained composition" within a page or application. This content should be able to stand on its own as if it was independent of its surroundings.
An article can be anything like a blog post, or for me, I can see it as a Tutorial.
Try to use an article instead of a <section> when ever you can.
Time will tell how this element is used. Personally, I plan to use it for my tutorials. But any kind of content can be placed in an <article> element. Though, that content should be able to stand on its own yet still make sense to the reader.
a section of a page that consists of 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.
This element can be used as a sidebar, but it's not to be used solely as a sidebar. The content within an aside element must be tangentially related to the nearby info.
The description of the aside element is open for interpretation. So don't limit it's use as a sidebar.
The <footer> tag should be self evident at this point. It is used to define a footer section of the page or of an other <section> of your page.
We are not limited to one footer per page. Again, think of a blog that has several blog posts. Each Post can have a header, footer, article, section and so on.
What we cannot do is nest a footer inside another footer just like we cannot nest a header in another header.
The Above illustration of a layout using HTML5 is not to be taken Literally!! Dear Lord! I am trying to point out some of the major differences between HTML4/XHTML and HTML5.
I have to remind myself that many people take what I say very literally, word for word, etc. But sometimes, I am trying to make a point. The point here needs to be clarified.
Notice that I put what could be a header in each <article>. That <header> could be, instead, a heading <h1> or an <hgroup>. Don't create a header, and then nest an h1 or an hgroup in that header!! That is overkill!!
Likewise, the <aside> element does not have to have a header! Use a heading tag if you'd like. Which heading tag? Well, that depends upon your Outline and the number of subheadings and Levels, etc... you want or need. Or leave out the heading. It's not a requirement.
The new HTML5 elements play a significant role in creating an explicit Outline. We no longer rely solely on Heading tags for creating an implicit outline. Instead, HTML5's Outline Model generates an Outline from the new HTML5 Elements.
This makes it possible for browsers and authoring tools to generate a Table of Contents. Again, more on this later. It will make more sense to you if you first learn a bit about the HTML5 Elements.
(we will discuss the Outline (implicit and explicit) a bit later.)
I am currently creating a new Web Site that will become a CSS and HTML5 Reference for Beginners using Expression Web or some other Web Editor. This reference site will be unique because I am using words most beginners can understand.
I am also going to post an HTML5 template for those using notepad or some other generic HTML editor. You will also find the code for each HTML5 element so that you can copy n paste each one as you need. Think of as HTML5-Lipsum!
Be sure to check back later for the site URL.
HTML5 Frequently Asked Questions