HTML5 Structural Elements
By using HTML5 structural elements and cascading style sheets designers can control where and how groups of content look on the page.
A few of the HTML5 Structural Elements include:
- header – header of the page (usually contains logo and tagline, possibly navigation)
- nav – main page navigation (sometimes nested in header)
- aside – side bar content
- main – main content area of the body
- article – article of content
- section – section of page or article
- footer – footer of page (may also contain a copy of the navigation)
Occasionally you need to group items that don't fit into one of the predefined HTML structural elements. In this case you can use a div element. The div (divide) element, just divides the content into it's own group.
When using the div element it is common to include an id attribute. The id name can be whatever you wish, however, it is meant to provide a description to the div (group) and it's content.
NOTE: That even through there are elements like header and footer, all HTML5 structural elements must appear inside the BODY element.
Typically before you begin developing a web site you should have a basic idea of how the site is gong to look, at the very least the page layout for the site.
Having the layout defined will help you identify all structural groups that need to be coded in the HTML and where they should go.
Usually you would use your HTML5 structural elements as you code the page from the beginning. In this example however, we are going to use a sample HTML file from a previous example and add HTML structural elements to the page.
It's important to note that for the most part you won't see any real change in our layout, at least not until we styles these elements.
One other side note, since this recording focuses on the HTML I choose not to add the css in this example. Instead the HTML page is linking to an external css (a css file hosted on a different website). This way you can see the styles and not all that extra code.