Sectioning elements

html5-tags-bw

nav Element

This element contains navigation links for major navigation blocks. Not right for all groups on links, mostly used for site navigation.
https://www.w3.org/TR/html5/sections.html#the-nav-element

aside Element

This is used for things like the side bar, advertising and other content separate from the main content of the section. Represents a sectional element so will create a new section in the document outline. Where you put the aside element matter. It must be tangentially related to the section it is alongside in the document outline.
https://www.w3.org/TR/html5/sections.html#the-aside-element

article Element

It really is a judgement call for using article or sectioning elements. An article is a piece of content that can stand alone, that is it could be taken out of the document and make sense still on it’s own. Only use if clear semantic reason to do so. Don’t use to create sections, that’s what section and div’s are for. An article element may contain section elements and a section element may contain article elements.
https://www.w3.org/TR/html5/sections.html#the-article-element

section Element

The theme of each section should be identifiable and typically have a heading. Examples of usage would include chapters and tabbed pages. Section is not an element for styling purposes, for that use the div element. Need to be in the document outline but doesn’t qualify as an article element and isn’t just for styling or scripting purposes like a div element then use section element. Sometimes a section element can contain article elements and visa versa, it really is a judgement call depending on the structure of the documents content.
https://www.w3.org/TR/html5/sections.html#the-section-element

div Element

When you need to group data for non-semantic reasons this is where a div element comes in. Typically used for styling and scripting purposes. Before HTML5 the <div> was used for the bulk of page structuring and even now is still used extensively as such as it’s a very versatile element. It’s a very powerful grouping element. Has no semantic meaning, but semantic meaning can be added using class and id attributes.
https://www.w3.org/TR/html5/grouping-content.html#the-div-element

header Element

Is introductory content for it’s nearest parent content. Sometimes the header element contains more then just the page title, but also things likes additional site information, logo and even sometimes the navigation. It does not affect the document outline.
https://www.w3.org/TR/html5/sections.html#the-header-element

footer Element

Similar to the header element in that it represents information about it’s parent content. Typically found at the bottom of it’s parent element. Also does not affect the document outline.
https://www.w3.org/TR/html5/sections.html#the-footer-element

main Element

Identifies the main content of the body of the document. Does not affect the document outline. Should be used to wrap content unique to that document and not content repeated over other documents like navigations, title and logo, footer information, etc.
https://www.w3.org/TR/html5/grouping-content.html#the-main-element

Speak Your Mind

*