Geek Answers Handbook

What browser will need to maintain the outline of an HTML5 document?

In short, the HTML5 specification allows multiple h1 elements to be used. However, there is quite a bit of controversy over this feature, with two main complaints about why not using it.

1. SEO:. Basically, the dubious allegations that search bots do not support it, and unfounded claims, they will "confuse" them. However, let's postpone such assumptions to other posts.

2. User agents do not support it: Unfortunately, the arguments behind this seem less clear than the SEO statements.

The MDN article for Sections and Outlines of an HTML5 Document contains the following warning:

Important. Currently, there are no known implementations of the loop algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software, such as conformance checks. Therefore, one cannot rely on a plan to transfer the structure of a document to users. Authors should use the title bar (h1-h6) to convey the structure of the document.

But it does not look like a document that uses the outline structure of a new document, it does not work. To see how the browser works, I created several samples that use several offline articles on the same page.

HTML4:

 <!DOCTYPE html> <html> <head> <title>Outline HTML4</title> </head> <body> <div> <h1>Section List</h1> <div> <h2>Alpha</h2> <p>Alpha is the first letter of the greek alphabet.</p> <h3>Subheading</h3> <p>This is just filler.</p> </div> <div> <h2>Beta</h2> <p>Beta is the second letter of the greek alphabet.</p> <h3>Subheading</h3> <p>This is just filler.</p> </div> </div> </body> </html>

HTML5:

 <!DOCTYPE html> <html> <head> <title>Outline HTML5</title> </head> <body> <main> <h1>Section List</h1> <section> <h1>Alpha</h1> <p>Alpha is the first letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> <section> <h1>Beta</h1> <p>Beta is the second letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </main> </body> </html>

The only potential visual problem that I see will be that the browser can display the same size h1 tags, however the default user agent styles for Firefox and Chrome currently reduce the size of the h1 tag inside article , aside , nav and section (seems that browsers recognize this feature). In addition, we have no problems recognizing the second h2 header - the end of the last h2 section, so I see no reason why we would have a visual problem with multiple h1 tags.

While I can't talk about how those who depend on screen readers prefer to browse the web, Apple VoiceOver correctly identifies each level of the title.

My question is: what kind of graphical browser or assistive technology would have to do in order to “support” a scheme that they no longer do?

+6
source share
4 answers

But this is not like a document that uses the structure structure of a new document does not work.

Why not work? These are just HTML elements, and the inclusion of several h1 tags within the rendering capabilities of browsers.

As you mentioned, the issue to consider is style. If you do not customize styles for different h1 s, all of them can have the same visual functions, such as size.

My question is: what kind of graphical browser or assistive technology would have to do in order to “support” a scheme that they no longer do?

User agents display HTML code. As mentioned earlier, browsers can easily display multiple h1 and , depending on the implementation , HTML5 elements.

outline , however, is something else. A schema is essentially a list of partitions in the DOM. As a rule, this scheme can be presented to users in a useful and instructive way.

Using this HTML code, I clicked http://www.dell.com and he created a clean, organized outline for the site.

What warning you highlighted is that the HTML5 outline algorithm is not widely supported and cannot convey similar useful results.

4.3.10.1 Creating a path

Currently, there are no known implementations of the loop algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software, such as conformance checks. Therefore, users cannot use the construction algorithm to describe the structure of the document. Authors advise using a heading header (h1-h6) to convey the structure of the document. (my emphasis)

This does not mean that the code does not work, just semantically it can be weak and / or useless.

Additional Information:

+1
source

Take the Czech reader tool as an example: http://webaim.org/resources/shortcuts/jaws#headings

It provides a shortcut to the next heading of the same level. But with the addition of HTML5 section and article tags. It is subject to some precautions.

If you have a code like this:

 <h1>Main title</h1> <h2>sub part 1</h2> <section> <h1>first section inside sub part 1</h1> <h2>subpart inside first section of sub part 1</h2> </section> <h2>sub part 2</h2>

If you are currently focusing h2 “sub 1” and you press key 2 , you expect to go to “sub 2” (ie the next heading at the same level), but the assistive Technology will lead you to the next h2 in the reading order of the DOM .

For the same reason, you should respect the title hierarchy in the entire document, as if there was no section (even if it conforms to HTML5).

Now you can imagine two h1 in the body , but you expect that you can read the title of the current page without relying on the title tag, which may contain some other elements, such as the website name, category / hierarchy on the website. Thus, you should use only one h1 element in the body element for the name of the current page.

+4
source

Modification of the style is very superficial. You can see that in the example below, the subheading h2 displays the heading h1 “gamma” in a larger font than the heading of the gamma “h1” itself.

 <!DOCTYPE html> <html> <head> <title>Outline HTML5</title> </head> <body> <main> <h1>Section List</h1> <section> <h1>Alpha</h1> <p>Alpha is the first letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> <section> <h1>Gamma</h1> <p>Gamma is the third letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </section> <section> <h1>Beta</h1> <p>Beta is the second letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </main> </body> </html>

In my opinion, the browser needs to calculate the sectioning level of each element from the contour algorithm, and then set it through the CSS class pseudo-class - for example, div:level(3) or :matches(h1, h2, h3, h4, h5, h6):level(4) or simply :level(2) , and also set it as the state of the element through JavaScript, for example. if (document.getElementById("myElement").level == 4) { ... }

+2
source

What would browsers have to support the outline of an HTML5 document?

According to Outlines in HTML5, a dictionary and its associated APIs for HTML and XHTML browsers must support sectional content and . .

The warning only says that so far (at the date of publication) the document editor did not know any implementations.

0
source

More articles:


All Articles