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 the new semantic elements and what effect they will have on document structure. While reading the definition of these elements within the specification can help, understanding the algorithm that HTML5 uses to outline documents could add even further clarity to the subject. HTML5 contains many algorithms that instruct the 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 the 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 its outline. The algorithm starts with the body tag and establishes that as the outline's section root. The parser than 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? Well, again, look to the Sectioning content model we talked about. 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 the 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. All this may seem confusing, but it's much easier to grasp once you can visualize it. So in our next series of movies, I'm going to use an awesome online tool that can help us do just that. In the meantime, I also recommend you read the specification's section on creating document outlines. You can find this at w3.org/TR/html5/sections.html#outlines.
In this case, I recommend using the actual specification, not the author's guide, as it contains considerable more detail. And as you can see, it's fairly short, but it does a really great job of explaining how user agents should parse and section content in your HTML document. So don't shortchange yourself, go ahead and read this, so that you understand the outline algorithm in a little bit more detail.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99541 Viewers
56 Video lessons · 112762 Viewers
71 Video lessons · 81574 Viewers
131 Video lessons · 39161 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.