HTML5 Page Structure

Basic tutorial for DOCTYPE, HEADER and main idea about BODY you can find in my first HTML5 tutorial hre : HTML5 Beginner tutorial

Now I would like to talk a bit about HTML5 page structure and brand new, shining tags created just for HTML5. Let’s go then !

In body section we are placing content of a page. We have couple new tags to use to build structure of our website.

header

The header element represents a group of introductory or navigational aids.

• Header elements relate to the sections under which they occur, if they occur as direct descendants of the body element then they apply to the document as a whole.
• They are not limited to h1-h6 elements in fact they can contain almost any content you wish as long as it is appropriate heading data.
• A document may contain as many headers as you like but they should be limited to one per sectional container.

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

• Nav elements relate to the sections under which they occur, if they occur as direct descendants of the body element then they apply to the document as a whole.
• They may contain heading and text as well as links.
• Navigational elements should be used to identify large blocks of navigational data, they are not needed for smaller navigational displays.

article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

• Article elements contain the documents or page specific content of that specific document. For a blog the article tags would surround the blog post itself. For a forum the article would comprise of the initial post with subsequent posts / replies nested within it.
• Multiple article element are allowed either nested within one another or independant from each other. If independant from each other this would imply that the article elements contain content which would be self supporting i.e. content contained within the other article elements is not neccessary for understanding.

section

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.

• Section elements are used to group similar content into a block, as such all content within a section element should be directly related.
• Section elements are considered as seperate sections of a document and therefore should contain their own header data.
• Should not generally be used to contain the main body of a document as this is what the article element is for, may be used to break up a document into topical sections.
• Best used as a container within an article element to group common themed content e.g. The comments section of a blog should occur within the main article element but would best be contained within a specific section element with an appropriate heading such as comments.

aside

The aside element represents 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.

• Aside elements should contain content which is very loosely or unrelated to the main theme of the element in which they occur and the elements arround them.
• Within a blog aside elements may for example contain the side bar links to various other blog posts.

footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

• Footer element should be used based on what they will contain not where abouts within a documnet they occur. Footer elements do not need to be at the foot of a document they simple need to contain appropriate information about the document or section.
• multiple footers are allowed, one for each sectional container is acceptable.
• For a blog page the contact and copy write data at the bottom of the page would be within a footer. Also the author and date published for the blog entries, often positioned just beneath the blog heading would also be a footer.

Example HTML5 Page Structure :

Notice, that all tags from structure above are enclosed within a body tag.

Lets go through that structure above. At the top we have header that applies to whole page. It is a main header for whole document. He doesn’t need any special descriptions within a tag as browser will know that is first header after body tag and it applies to whole page content.
Second element is a nav (navigational element) it contain a main navigation for whole page.
Another two elements are type of article . They hold a main page content. That what is valuable as a content of page and create its own entity. Try to imagine like you would cut one article section form a page content and paste it into a new document. It should create one, separate and a meaningful unit. User should understand content of it and recognize it as w one, whole element.
Each one of articles has its own header ,sections with content and footer. Its create one unit itself.

Another element is a sidebar that is build out of div tag (used to build a 2 column structure of page ). That div contain aside elements .  Each aside element is not related with the main subject of the page. It creates separate element as well but not directly connected with sense of page, articles and purpose of page. It holds elements like archive section of blog, search bar, banners, adverts etc.

At the bottom we have a footer element for whole page. It contain a general footer information like copyright , company phone number etc.

Hope You liked my short tutorial. If you need more info about web design , try to read my other posts. Thanks !