HTML5 Block and Outline algorithms

Source: Internet
Author: User
Tags html header new set mozilla developer network

Original link:

    • Using HTML sections and Outlines-mozilla Developer Network
    • Each episode HTML5+CSS3 page layout Tutorial-2 outline algorithm

The HTML5 Standard introduces several new elements with standard semantics to describe the structure of a Web document. This article describes these elements and discusses how to define a satisfying document outline with these elements.


Document structure of the HTML4 era

The structure of the document (or the structure that can be said between the body tags) is the basis for displaying and presenting Web pages. HTML4 uses the concept of chunks (sections) and sub-chunks (sub-sections) to describe the structure of the document. Use the div element to define a chunk, and use the caption element (H1-H6) to define the title of the chunk. The relationship between them determines the structure and outline of the Web document.

The following code:

<div  class  =  "section"  id  = "forest-elephants"  > the  lesser known forest Elep Hants. ... This section continues ... <div  class  = "subsection"  id  = " Forest-habitat " > not  Live in  trees but  among them. ... This subsection continues ... </div  ></div ; 

You can refine the following outline:

 1. Forest elephants   1.1 Habitat

Defining a node in an outline is not necessarily a DIV element, but as long as a header element (H1-H6) is sufficient to imply a node, these tags:

<h1 ;  Forest Elephants</h1 ;  << Span class= "Hljs-title" >p ; in this section, we discuss the lesser known forest elephants. ... This section continues ... <h2 ;  Habitat</h2 ;  << Span class= "Hljs-title" >p ; Forest elephants do not live in trees but among them. ... This subsection continues ... <h2 ;  Diet</h2 ;  <h1 ;  Mongolian gerbils</h1 ;  

The following outline has been extracted:

 2. Forest elephants   1.1 Habitat   1.2 Diet 3. Mongolian gerbils

(Note: This code does not use any div tags, the outline is based on the title element--the example of H1 and h2--to refine)


HTML5 Solve the problem

In HTML4, the definition of the document structure and the algorithm of the outline are very primitive, which brings a lot of problems:

Question 1 uses div elements to define chunks with semantics, and no specific class can automatically generate an outline ("This div is part of the outline that defines chunks or sub-chunks?"). "or" Is it just a div, to make it easier to use CSS for styling? In other words, HTML4 is not clear on "What is a chunk, how the range of chunks is defined". It is important that the page automatically generates an outline, because most screen readers (assistive reading techniques for visually impaired people) are structured according to the document outline to the information they will show to the user. In HTML5, the outline algorithm no longer has to use DIV elements, instead of the div is a new element--section.

"Question 2" multi-document fusion is a challenge: the introduction of a subdocument collected from elsewhere is likely to change the rank of the heading element, and HTML4 is refining the outline based on the rank of the heading elements. HTML5 introduces a new set of elements for defining chunks (article, section, NAV, and aside), which have such features: regardless of the level of its internal caption element (H1-H6), it is always a child of its nearest ancestor block.

Translator Example:

<body><h3>H3 title</h3><section >    <H1>H1 title</H1>    <p>Section chunks introduced from other documents</P></section ><div>    <h2>H2 title</H2>    <p>div chunks introduced from other documents</P></div></body>

The above code refines the following outline:

1.h3标题    1.1.h1标题2.h2标题

As you can see, the H1 title unexpectedly becomes a sub-node of the H3 title, which is the credit for the section element. Because whether the headline element inside it is the Boss (H1) or the old Six (H6), it becomes the child node of the closest ancestor node (body). Look at the Div, although in theory should also be the body of the child nodes, but because the level of H2 is higher than H3 (H3 is the body of the title), so in the outline and body into a sibling node.

"Issue 3" in HTML4, each node is part of the outline. But Web documents are sometimes not linear. Web documents can sometimes contain special chunks to host information, but this information is not part of the main document, such as ads and annotations. HTML5 introduces the aside element, which does not become part of the outline as a node of the outline.

"Question 4" Similarly, in HTML4, because each node is part of an outline, there is no suitable chunk to host the information such as logos, menus, catalogs, copyright information, and legal terms, because the information is not related to the content of the Web page, but rather to the Web site. To solve this problem, HTML5 also introduced three new elements: the ① element used to host links (such as navigation menus and directories) ② the header element used to host information about the Web site ③ the footer element used to host information about the Web site. Note that the header differs from the footer and the section in that they do not appear in the outline but are responsible for semantic descriptions of a chunk (a bit like a div, but with semantics).

All in all, HTML5 brings more accurate block and header functionality, which makes the document more controllable and easier to use by the browser to better enhance the user experience.


HTML5 's Outline algorithm

Let's take a look at how the outline algorithm refines chunks and headings.

All elements in the BODY element are nodes. In addition to the main node defined by the BODY element, the definition node can be divided into "explicit nodes" and "implicitly defined Nodes" (hereinafter referred to as "dominant node" and "Recessive node").

1. Explicit Definition node

The dominant nodes are defined using <body>, <section>, <article>, <aside>, and <nav> tags.

In HTML5, each node has its own title grading criteria. So even a nested chunk can be titled with H1. See "2. Definition title" section

Cases:

<section >  <H1>Forest Elephants</H1>   <section >    <H1>Introduction</H1>    <p>In this section, we discuss the lesser known forest elephants.</P>  </section >  <section >    <H1>Habitat</H1>    <p>Forest elephants don't live in trees but among them.</P>  </section >  <aside>    <p>Advertising block</P>  </aside></section ><footer>  <p>(c) The Example company</P></footer>

The section in this code defines a top-level chunk with three sub-chunks (two sections and one aside) defined in the top-level chunk. This code can refine the following outline:

1. Forest elephants   1.1 Introduction   1.2 Habitat   1.3 Untitled Section

Do you remember that? Aside defined nodes can also appear in the outline, but the previous example does not define a title for aside, so the word Untitled section appears in the outline)

2. Defining headings

HTML layout elements are used to define the structure of the document, and the HTML header elements are used to give meaning to these structures and the outlines that these structures refine.

The rule is simple: the first heading element of the current chunk is the title of the node in the outline of the chunk.

The title element is graded according to the number of its element name, with the highest H1 level and the lowest H6 level. The title element level is only meaningful in the same chunk, and the outline is the chunk structure of the document, not the rank of the heading element. For example, refer to the following code:

<section >  <H1>Forest Elephants</H1>      <p>In this section, we discuss the lesser known forest elephants. ... This section continues ...<section >    <h2>Habitat</H2>      <p>Forest elephants don't live in trees but among them. ... This subsection continues ...</section ></section ><section >  <h3>Mongolian gerbils</h3>  <p>In this section, we discuss the famous Mongolian gerbils. ... This section continues ...</section >

The code refines the following outline:

1. Forest elephants   1.1 Habitat2. Mongolian gerbils

The reason why the H3 element and the H1 element is sibling, because the H3 belongs to the chunk and H1 belongs to the block sibling, which means that the decision outline is the block structure, rather than the title element of the hierarchy)

Note that the rank of the caption element is unimportant (in the example above, H1 is the title of the first top-level chunk, H2 is the title of the sub-chunk, and H3 is the title of the second top-level chunk). Headings of any rank can be used in dominant chunks, but this is not recommended.

3. Implicitly defined Nodes

In HTML5, it is not possible to define an outline with these block definition elements, considering that HTML4,HTML5, which has ruled the web for a long time, has developed a node method that is defined using a header element instead of using the block definition element and is called the implicit definition node.

In a dominant defined node, the first header element is the title of the dominant node, starting with the second heading element (including the second heading element), and the next heading element defines the new node, which is the implicitly defined node (because the elements of the explicit definition node are not used).

It is possible for a recessive node to exist as a sibling or child node, depending on the heading level in which it is defined.
If you define a heading level that is lower than the previous heading level, it exists as a child node. Look at the code:

<section>  <h1>Forest elephants</h1>    <p>In this section, we discuss the lesser known forest elephants.    ...this section continues...  <h3 class="implicit subsection">Habitat</h3>  <p>Forest elephants do not live in trees but among them.    ...this subsection continues...</section>

Refine the following outline:

1. Forest elephants   1.1 Habitat (通过h3元素隐性定义)

If you define a heading level that is the same as the previous heading level, it closes the previous node and implicitly defines a node of the same level:

<section>  <h1>Forest elephants</h1>    <p>In this section, we discuss the lesser known forest elephants.    ...this section continues...  <h1 class="implicit section">Mongolian gerbils</h1>  <p>Mongolian gerbils are cute little mammals.    ...this section continues...</section>

Refine the following outline:

1. Forest elephants2. Mongolian gerbils (通过h1元素隐性定义,同时关闭之前的区块)

If you define a heading level that is higher than the previous heading level, it closes the previous node and implicitly defines a node of the same level:

<body>  <H1>Mammals</H1>  <h2>Whales</H2>  <p>In this section, we discuss the swimming whales. ... This section continues ...<section >    <h3>Forest Elephants</h3>      <p>In this section, we discuss the lesser known forest elephants. ... This section continues ...<h3>Mongolian gerbils</h3>      <p>Hordes of Gerbils has spread their range far beyond Mongolia. ... This subsection continues ...<h2>Reptiles</H2>      <p>Reptiles is animals with cold blood. ... This section continues ...</section ></body>

Refine the following outline:

1. Mammals   1.1 Whales (通过h2元素隐性定义)   1.2 Forest elephants (通过section元素显性定义)   1.3 Mongolian gerbils (通过h3元素隐性定义,同时关闭之前的节点)   1.4 Reptiles (通过h2元素隐性定义,同时关闭之前的节点)

This outline is not an outline that can be quickly read by a headline element at a glance. To make your outline and HTML (for people) more readable, it is recommended to use explicit tags to define or close nodes, and it is recommended that the level of the heading elements conform to natural habits when chunks are nested. However, the HTML5 manual does not mandate this. If you find that the browser does not render the outline as you expect, check to see if some nodes are closed by a node that is implicitly declared by the caption element.

Translator example-a slightly more complex outline:

Refine the following outline:

1.文档标题    1.h3标题        1.h5标题        2.h4标题            1.h5标题    2.h3标题    3.h1标题        1.h2标题            1.h3标题        2.h2标题

Analysis:


3. Root node

In HTML, one has its own outlining system, but these elements have no effect on the outline of their ancestors. The BODY element is the logical root node of the document, and there are elements that introduce external content, such as blockquote, details, fieldset, figure, and TD.

For example:

<section >  <H1>Forest Elephants</H1>   <section >    <h2>Introduction</H2>    <p>In this section, we discuss the lesser known forest elephants</P>  </section >  <section >    <h2>Habitat</H2>    <p>Forest elephants don't live in trees but among them. Let's look what scientists is saying in "<cite>The Forest Elephant in Borneo</cite>":</P>    <blockquote>       <H1>Borneo</H1>       <p>The forest element lives in Borneo ...</P>    </blockquote>  </section ></section >

The above code refines the following outline:

 1. Forest elephants   1.1 Introduction   1.2 Habitat

The BLOCKQUOTE element in the section does not appear in the main outline because it is an externally referenced root node that has a separate internal outline. (In fact, all root node elements are not displayed in the main outline)

4. Blocks that are not part of the main outline

The two new elements introduced in HTML5 allow developers to define a chunk, but the chunk does not create nodes in the outline:

    1. The aside element of HTML5 defines a chunk that belongs to the main element of the document, but not to the main document flow (such as a comment or ad area). It has an outline of its own, but it is not part of the main outline.

    2. The nav element of HTML5 defines a chunk that is used to host navigation links. There can be several NAV elements in a document, such as a link to hold a page (like an article directory), and a navigation link to hold the site. These links are not part of the main document flow and the main outline, and are generally not rendered preferentially by screen readers or other assistive devices.

5. Head element and tail element

HTML5 also introduced two new elements to mark the head and tail:

    1. The header element of HTML5 defines the head of the page-usually with a logo, a site name, or a horizontal navigation menu. Of course the header can also be used as the head of the block, to carry the title of the block, author, etc. Like article, section, aside and NAV elements can have their own header. However, you don't have to put such an element on every page or chunk.

    2. HTML5 's footer element defines the end of the page-often containing copyright information, legal notices, and sometimes links. Of course, the footer can also be used as the tail of the block, which may use to carry the content of the block, copyright information and so on. Like atricle, section, aside and NAV elements can have their own footer. However, you don't have to put such an element on every page or chunk.

Header and footer elements do not create new nodes in the outline, they are used only to mark areas in the page.


Summarize

The new semantic elements introduced by HTML5 will describe the document structure and outline standardization. This is a great convenience for those who have HTML5 browsers and need an outline to help understand the page, such as people with disabilities who need to use assistive reading technology. These new semantic elements are simple to use, have little side effects, and can be used in non-HTML5 browsers.



Additional sections: The difference between Div and section in actual use

this summary from the Set HTML5+CSS3 page layout Tutorial-2 outline algorithm

1. When to use Div

The DIV element is the most popular tag before HTML5, but he does not have any semantics in it, it is simply used to layout pages and CSS styles as well as JS calls.

    1. If the page layout, and not the header, footer and other exclusive areas, should use div;
    2. If you simply make a CSS style definition for a piece of content, you should also use a div;
    3. If you want to control a piece of content, then you should also use Div;

2. When to use section

In HTML5, the section tag is not used to replace the Div, which is a semantic document tag that represents a chapter in a document, such as a title and a paragraph, and at least one title in the outline specification.

HTML5 Block and Outline algorithms

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.