Understanding the HTML5 outline algorithm

Pre-Combat Preparation: Understanding the HTML5 outline algorithm

There is an important concept in HTML5, called the HTML5 outline algorithm (HTML5 Outliner), which is used to provide users with a directory of information structures for a page. Reasonable use of the HTML5 element tag can generate a very clear document outline.

HTML5 Outline algorithm

We can see the current page through various tools, here is recommended to use a test tool: HTML5 Outliner, the URL is as follows: https://gsnedders.html5.org/outliner/

1. Understand the difference between a section and a Div

The ①div element is the most popular label used before HTML5, but he has no semantics of its own, and it is simply used to layout pages and CSS styles as well as JS styles.

② in HTML5 section tags are not used to replace Div. He is a document label with semantics, which specifies at least one title to be included in a session in the outline specification. That is, the section tag contains at least one h1~h6.

③ should use Div if it is a page layout and not a dedicated area such as header or footer.

2. Body\nav\section are required to have a title before the specification, header and Div are not required title.

3. The section and NAV element outlines require a title H1~h6, suggesting that the section must be normative, and that NAV is reasonable if it has no title. Adding a title to him will make the outline look better, so we can add it up and hide it without breaking the layout. (by Display:none; hide it)

Understanding the HTML5 outline algorithm