Understanding the outline algorithm
Video: Understanding the outline algorithmOne 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.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Understanding the outline algorithm
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.
There are currently no FAQs about HTML5 First Look.