Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the more confusing aspects of creating documents with HTML5 is when to use elements like section, aside, article, header, footer, and nav to structure content. While reading the definition of these elements within the specification can certainly help, understanding the algorithm that HTML5 uses to outline documents can add even further clarity to the subject. HTML5 contains many algorithms that instruct user agents how to handle HTML.
Some deal with parsing code, error handling, how to parse badly formed code, and how to handle form submittal. The outline algorithm details how sectioning content should be parsed to build an outline of the current document. Using the rules for the outline algorithm, you can ensure that your page is structured exactly the way you want it to be. This can be useful from a semantic standpoint for accessibility reasons or to make your content easier to syndicate. One of the easiest ways to picture the outline algorithm is to imagine your page as a table of contents.
In a typical table of contents you would list the most important sections as individual items and then list interior sections nested within them. So how does HTML5 decide which parts of your page are used to structure and create your outline? Going back to the content model discussion we had earlier, HTML5 examines how section and heading content is structured within the document to create the outline. The algorithm starts with the body tag and establishes that as the outline's section root.
The parser then walks down the elements in the document in order to establish its structure. Each time a new section is found, another item is added to the outline. If the section contains a heading, the heading is used to name the section. Since sections are treated as containers any new sections created within an existing one are nested in the outline. So what elements create a new section? Again, let's look at the sectioning content model. The article, aside, nav, and section elements will all generate a new section.
Their use in fact should be restricted to only when you intend to create a new section in your document. Now, one thing that can be a little tricky here is the use of headings within sections. The first heading content element in a section is used to define a heading for that section. After that, any additional headings will create new nested headings based on their ranks. It's easier to visualize this than explain it. So let's look at a few examples. So here we have a little bit of HTML markup.
Now, this code would create this outline. Now, what if the second review had subheadings within it? Now let's add a few heading tags here. Okay. So by adding a few headings we get the following outline. Note that the rankings of the headings determine whether they are child or parent nodes within the outline. Headings with the same or greater rankings create a new section whereas headings with a lower ranking create a nested section.
If you take a moment to write a brief outline of your page before you begin coding it, you'll be well on your way to understanding your pages initial structure and the elements you should use to construct it.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98470 Viewers
61 Video lessons · 85754 Viewers
71 Video lessons · 69656 Viewers
56 Video lessons · 101986 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.