Below is a mock-up page to show how each of the above defined elements might be put together. This is a basic HTML5 page structure and may be used as a template to which your documents can be modeled. Imagine that the grey border around the outside represents the body element with the various HTML5 elements as descendants of it.
So let’s work through the above structure. It is only a guide but illustrates the basics quite well.
Firstly we have a header, this is a document level element and therefore applies to the whole document. This would contain the website name, any tag line or phrase and any logo that the website might have.
Next is the navigational element, again this is a document level element and therefore should contain only the main navigational links. This is basically where you would put your main navigation block.
The article element holds the main content of the page, it could be a blog entry, news article or forum post. Within the article element shown above there is also a header and footer which would be directly associated with the article element only. Additionally there are two section elements which could contain, tools, resources or comments, really anything seperate from the main content but still related.
Now notice that the right hand side bar has been created using a good old fashioned div container, this has been added to help style the document and it is important to understand that it is not included when we think about the semantic structure of the document.
So in terms of document structure the aside elements are document level, they would both contain items which would you would terms as unrelated to the main subject of the page and to one another. They may contain thing like a previous blog entries or articles.
Finally we have the document level footer element which in general will contain all your site wide footer information, like copyright terms links to sitemaps or terms and conditions.
That really is about it for HTML5 and the basic page structure. As always any question let me know via the comments section below.

Unknown

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 comments:

Subscribe to: Post Comments (Atom)