seo Question posted in
Some basic information to get you started with this can be found here.

What would browsers need to support the HTML5 document outline? – SEO

In short, the HTML5 specification allows us to use multiple h1 elements. However, there is a fair amount of controversy over this feature, with 2 major claims as to why not to use it.

1. SEO: Mainly dubious claims that search bots do not support it, and unsubstantiated claims it will “confuse” them. However, let us defer such speculation to other postings.

2. User agents do not support it: Unfortunately, the reasoning behind this seems less clear than the SEO claims.

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

Important: There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

But it’s not like a document which uses the new document outline structure doesn’t work. To see for myself how browser react, I created some samples that make use of having multiple stand-alone 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 issue I see would be that the browser might render all the h1 tags the same size, however the default user-agent styles of both Firefox and Chrome currently reduce the size of an h1 tag inside article, aside, nav, and section tags (seeming to indicate browsers do recognize this feature). Additionally, we don’t have any problems recognizing a second h2 header means the end of the last h2 section, so I don’t see any reason we would have a visual problem with multiple h1 tags.

While I can’t speak for how those who depend on screen readers prefer to browse the web, Apple’s VoiceOver does correctly identify each header level.

My question is, what exactly would a graphical browser or assistive technology have to do to “support” the outline that they don’t do already?

Tags:

4

Answers


  1. 0

    But it’s not like a document which uses the new document outline structure doesn’t work.

    Why wouldn’t it work? They’re just HTML elements, and the inclusion of multiple h1 tags is well within a browsers rendering capacity.

    Like you mentioned, an issue to consider is the styling. Unless you adjust the styles for different h1s, they may all share the same visual features, such as size.

    My question is, what exactly would a graphical browser or assistive technology have to do to “support” the outline that they don’t do already?

    The user agents render the HTML code. As mentioned before, the browsers can easily render multiple h1s and, depending on implementation, HTML5 elements.

    The outline, however, is something else. The outline is essentially a list of sections in the DOM. Normally, this outline can be presented to users in a useful and instructive way.

    Using this HTML outlining tool, I punched in http://www.dell.com, and it generated a clean, organized outline of the site.

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

    4.3.10.1 Creating an outline

    There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure. (emphasis mine)

    This does not mean the code doesn’t work, just that semantically it may be weak and/or useless.

    More info:

    Login or Signup to reply.
  2. 0

    The styling modification is very superficial. You can see that in the example below, the h2 subheading to the h1 “gamma” heading is rendered in a larger font than the “h1” gamma heading 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, browsers need to calculate the sectioning level of every element from the outline algorithm, and then expose it through a CSS pseudo-class – e.g. div:level(3) or :matches(h1, h2, h3, h4, h5, h6):level(4) or just :level(2) and also expose it as an element state through JavaScript e.g. if (document.getElementById("myElement").level == 4) { ... }

    Login or Signup to reply.
  3. 0

    What would browsers need to support the HTML5 document outline?

    According to Outlines in HTML5 – A vocabulary and associated APIs for HTML and XHTML browsers would need to support sectioning content and sectioning root elements.

    The warning only says that so far (at the date of publishing) no implementations were known to the documents editor.

    Login or Signup to reply.
  4. 0

    Take as an example Jaws screenreader:
    http://webaim.org/resources/shortcuts/jaws#headings

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

    When you have such code:

    <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 part 1” and you press on the key 2 you would expect to go to “sub part 2” (ie. the next heading of the same level) but the Assistive Technology will lead you to the next h2 in the DOM reading order.

    For that exact reason, you should respect the hierarchy of heading in the full document as though there were no section (even if it respects HTML5).

    Now, you can perfectly imagine to have two h1 in the body but you expect to have some way to read the title of the current page without relying on the title tag which can contain some other elements like the web site name, the category/hierarchy in the web site. So you should use only one h1 element in the body element for the title of the current page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search