legality of div tag immediately under html tag

问题

I was running lynx to test some HTML I had to do, because having accessibility in mind. I guessed that, if looked pretty in Lynx, the whole range of screen readers, crappy phones and other stuff would do OK, even most ancient hardware.

In some cases I was using a shortcut in case I wanted to wipe out all static HTML at a once for the regular case of when JS is supported and enabled, consisting in nesting all the static HTML tags in an identified div tag to be wiped out.

Later I realized that caused a behavior change in my lynx compilation:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name=viewport content="width=device-width">
    <title>Title</title>
  </head>
  <body>
    <div id="whatever">
      <header>
        <h1>First heading</h1>
      </header>
      <main>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </main>
      <footer>
        <hr />
        <p>
          Footer.
        </p>
      </footer>
    </div>
  </body>
</html>

Browsing that (in http://driedleav.es/so_20170729/with_div_inside.html too) moves the first header to full left:

Browsing this other, in http://driedleav.es/so_20170729/without_div_inside.html too, centers the first header:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name=viewport content="width=device-width">
    <title>Title</title>
  </head>
  <body>
    <header>
      <h1>First heading</h1>
    </header>
    <main>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </main>
    <footer>
      <hr />
      <p>
        Footer.
      </p>
    </footer>
  </body>
</html>

Am unable to catch any difference in behavior when displaying it in the WebKit software of my local host.

Should I give up the div tag used immediately under the body tag for the sake of standard, compatibility, and accesibility; at the cost of larger to develop, and larger to download, JS code?

Is my Lynx compilation buggy?

Are my WebKit compilations buggy?

回答1:

By inserting a div, lynx considers the creation of an implicit section which makes the h1 the title of the section, and no longer the title of the webpage.

You should note that replacing the <div id="whatever"> with <main id="whatever"> gives the expected result.

回答2:

Should I give up the div tag used immediately under the body tag for the sake of standard, compatibility, and accesibility; at the cost of larger to develop, and larger to download, JS code?

For the sake of standard, probably not. For the sake of compatibility, most definitely yes if wanting to support particular versions of lynx.

Check these, are the same sources but with consecutive multi level headings as the only difference.

http://driedleav.es/so_20170729/with_div_inside_.html behaving like this:

http://driedleav.es/so_20170729/without_div_inside_.html behaving like this:

From browsing further test docs, am seeing the behavior keeps being adding indentation levels, which seems saner than seeming not to be doing anything at all.