Web Analytics: The effect of HTML outline algorithm on structure

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

HTML5 has been out for a long time, more and more people hope and began to apply HTML5 to the usual work, a station. The use of new labels, such as section, aspires, aside, NAV, is becoming more and more available, perhaps a good start to the self. Not understanding these labels from a number of ways may put yourself in a more confusing position. The HTML outline algorithm (outlining algorithm) is an important entry point.

First look at two outlines:

Both of these are my early works. At that time also feel that their structure is good, especially the second, but also used the HTML5 label, thinking that they have entered this new world. After looking at the HTML outline algorithm, the detection of these pages, really miserable. The first of various confusing titles do not say, "cast lineup" incredibly subordinate to the "user comments"? The second is not good speech, so many unnamed is what thing? But always tread on the history of pain to move forward.

Let's look at a few other people's refactoring page outlines:

Imagine that you are a somewhat visually impaired user who relies on a screen reader to browse through these pages, and the reader will interpret the page according to the hierarchy, which makes it easier for you to get the information you need? Maybe you want to know what the outline algorithm is like?

what is an HTML outline algorithm?

The outline algorithm allows the user agent to generate an information structure directory from a Web page, giving the user a quick overview of the page. Similar books, PDFs, help documents, and so on, have a clear directory structure, users can easily locate the desired content. A good structure of the outline, not only for search engine optimization, but also for the use of screen readers to browse the Web page of the blind (or weak vision) users to provide a great help.

Directory structure of the Help document:

Each page has an outline, first from a simple example to understand the Web page outline. Suppose you want to make a film introduction page, the theme of the August film promotion, the page structure may be as follows:

1.8-month movie referral 1. Domestic film 1, "four Famous catch" 2. "Search" 2. Foreign films 1. "Ice Age 4" 2.

HTML4 or before, we use HN (H1~H6) to generate the outline. HTML5 introduced new node elements (sectioning content), such as section, aspires, aside, NAV, and added some new rules, which are described in detail later.

the outline generated by HN

Perhaps the structure of HTML4 would write:

<div> <h1>8 Month film promotion </h1> <h2> domestic film </h2> <h3> "four famous catch" </h3> <p> four names are ... </p> <h3> "Search" </h3> <p> search is about. </p> <h2> foreign films </h2> <h3> "Lce age 4" </h3> <p> Ice Age 4 It's about. </p> <h3> "Doom" </h3> <p> is doomed to talk about. </p> <p> above content by Thunderbolt look offers </p><div>

As you can see, the page outline is generated by the level of the header.

If you want to see the outline of this code, try Geoffrey Sneddon's outline tool Outliner (strongly recommended), upload files and input fragment code. If you want to view the outline of an online Web page, you can install the plugin to the browser: CHROME:HTML5 outliner (recommended)/Web devoloper,firefox:web devoloper;opera:html5 outliner. (HTML5 outliner Chinese will display garbled, suggest to change English test.) Browser plugin can display Chinese)

Each title generates an implicit node (implicit section), followed by a lower relative-level caption that becomes its child, and the same level or higher caption closes the node and generates a new node. You can test the following code:

<h3> "Four famous catches" </h3><p> four famous names are ... </p><h3> "Search" </h3><p> search is about ... </p>

Or：

<h3> Search </h3><p> search is about. </p><h2> Foreign movie </h2> node element generated outline

Perhaps the structure of HTML5 would write:

<div> <h6>8 monthly movie promotion </h6> <section> <h1> domestic movie </h1> <article> <h1> The four famous </h1> <p> four famous names are ... </p> </article> <article> <h3> "search" </h3> <p> search It's about. </p> </article> </section> <section> <h5> foreign movie </h5> <article> <h6> Ice Age 4 </h6> <p> Ice Age 4 It's about. </p> </article> <article> <h1> "doomed" </h1> <p> the Doom of the story is ... </p> </article> </section> <p> above content by Thunderbolt look offers </p><div>

(You can pay attention to the above code of the various HN) to copy the code to the Outliner tool to see, very surprised to find that the resulting outline and the level of the very beautiful HTML4. Why is the level of HN not shown here?

The reason for this is that the outline is generated by the node element, not the caption element. HTML5 's new tab section, aspires, aside, Nav generates the dominant node (explicit sections), and each dominant node has its own title structure (and, of course, the HTML4, HTML5 outline algorithm). This is why HTML5 allows multiple H1 to exist, but before all browsers and screen readers are perfect for HTML5, it is advisable to consider both the title structure and graceful demotion. So the above structure can be changed like this:

<div> <h1>8 monthly movie promotion </h1> <section> <h2> domestic movie </h2> <article> <h3> The four famous </h3> <p> four famous names are ... </p> </article> <article> <h3> "search" </h3> <p> search It's about. </p> </article> </section> <section> <h2> foreign movie </h2> <article> <h3> Ice Age 4 </h3> <p> Ice Age 4 It's about. </p> </article> <article> <h3> "doomed" </h3> <p> the Doom of the story is ... </p> </article> </section> <p> above content by Thunderbolt look offers </p><div>

Here is another question to note, that is, "the above content by the Thunder to see the provision of" this paragraph refers to which part of the above content? In the HTML4 structure, this passage is subordinate to the recessive node "doomed", but obviously wrong. The HTML5 outline algorithm solves this problem very well.

HN and node elements generate an outline at the same time

If the page has both hidden nodes (H1~H6) and dominant nodes (section, etc.), how will the outline be generated? Just remember one point: the dominant node can contain hidden nodes, but not vice versa.

<h1>8 Month film promotion </h1><section> <h2> domestic film </h2> <h3> "four names catch" </h3> <p> The four big names are about. </p> <h3> "Search" </h3> <p> search is about. </p></section>

(Code 1)

The outline of this code will be:

1.8-month movie referral 1. Domestic film 1 "four Famous catch" 2. "Search"

<h1>8 Month film promotion </h1><h2> domestic film </h2><article> <h3> "four names catch" </h3> <p> The four big names are about. </p></article><article> <h3> "Search" </h3> <p> search is about. </p></article>

However, the outline of this code will be:

1.8-month movie referral 1. Domestic film 2. "Four famous catches" 3. "Search"

The implicit node generated by the caption element closes and builds the next sibling node when the dominant node generated by the node element is encountered.

unnamed node (untitled sections)

HTML5 new node elements in addition to section, aspires and aside, NAV, we also use.

<nav> <ul> <li><a href= "> Home </a></li> <li><a href=" "> Special </a ></li> <li><a href= "> About </a></li> </ul></nav><h1>8 month film Promotion </H1 ><section> <h2> Domestic film </h2></section><section> <h2> foreign film </h2></ Section>

Copying to Outliner will find that the nav tag produces a untitled section because NAV does not give any caption elements. This is not a mistake and will not be considered a bad HTML5 structure. However, the section, aspires or suggested that the appropriate title. If you are not sure what to give the title, perhaps use div more appropriate, do not forget we have div ah.

root node

An important principle mentioned above is that the dominant node can contain the recessive node, and vice versa. Maybe you'll notice that Code 1 builds the outline:

1.8-month movie referral 1. Domestic film 1. "Four famous catches" 2. "Search"

The node element section ("Domestic movie"), followed by the title element H1 ("August movie Referral"), becomes a child node of it. Does the recessive node not contain an explicit node? It's time to get to know the root node.

The root node can generate its own outline, and its headings and nodes have no effect on the ancestor's outline (and will not appear in the ancestor's outline). There are currently six root nodes:

1.body

2.blockquote

3.details

4.fieldset

5.figure

6.td

Can test:

<h1> I'm the boss I ' m the big brother</h1><blockquote> <section> <h1> I'm Blockquote's boss, You won't see me in a minute. I ' m the Big Brother in Blockquote,you ' ll don't find me in the outliner</h1> </section></blockquote ><h2> I'm the dick I ' m the younger</h2>

The definition document illustrates that a node element is a child of its closest ancestor root node or node element. In code 1, the TITLE element H1 ("August movie Promotion") is the body's title, the node element section ("Domestic movie") is the body's child node.

Another important thing: the title of the document is the header element in the first and non node element of the document. Testing the following code is clear:

<section> <h1> I would like to become the title of the document unfortunately cannot I want to be the title but I couldn ' t</h1></section><h6> Although I am the smallest level but I was the first to appear I ' M h6 but I come first</h6><h1> Max also useless order I still under the old 6 I ' m H1 but I come after h6</h1>

One of the other puzzles I've encountered in the process:

<section> <h1> I would like to become the title of the document unfortunately I want to be the title but I couldn ' t</h1></section><section > <h2> I also want to be the title of the document unfortunately not me either: (</h2></section><footer> <h3> I'm footer. But why did I become the document title Ah I ' m footer but why I become the title?? </h3></footer>

The reason is simple, header and footer are not node elements.

Hgroup

Hgroup is very good to understand also good, its role is to help you add subtitles without affecting the document outline, the outline will appear only the highest level of headings, regardless of the order in which they appear.

<hgroup> <h3> I'm a subtitle, I'm important but I don't appear in the outline I ' M your loved second Title,i ' m useful and I won ' t appear in the outliner</ H3> <h2> I was a big headline, I was deliberately running down to the I ' m the highest level of HN in the group,no matter where I am,i will is part of ouliner</h2& Gt;</hgroup> Summary

By the end of this article, it seems that no browser has the perfect support for the HTML5 outline algorithm. But this does not affect our study of the HTML5 outline algorithm, just as we are now trying to use HTML5+CSS3. Understand the HTML5 outline algorithm, not only for the use of new tags have a further understanding, and for the most fundamental page structure has a more optimized understanding, even if only the title elements generated by the outline, can also have a perfect hierarchy, which is a symbol of semantics.

Special thanks to Daan, he reminded me to pay attention to this problem.

Original address: http://cued.xunlei.com/log047