HTML5 Elements and HTML Structuring/Sectioning

问题

I have been using HTML for ages, but had never looked too deep into the new HTML5 elements and HTML structuring/sectioning. I have done some reading on MDN and w3s, but am still quite confused. Below is an image of the layout, the document structure of the body section, and some question that I have.

<body>
  <header id='header'>
    <h1 id='header-left'>
      <img id='logo' />
    </h1>
    <div id='header-right'>
      <nav id='nav-links-cont'>
        <a class='nav-links' href='' alt=''>FILTER</a>
        <a class='nav-links' href='' alt=''>SELL</a>
        <a class='nav-links' href='' alt=''>FEEDBACK</a>
      </nav>
    </div>
  </header>
  <main id='content'>
    <div id='content-left'>
      <aside id='search-and-filter-pane'></aside>
      <article id='product-info-pane'></article>
      <aside id='transaction-pane'></aside>
    </div>
    <section id='content-right'>
      <article class='grid-item'>
        <h4 class='row item-transaction'></h4>
        <div class='row item-image'></div>
        <h1 class='row item-product'></h1>
        <h2 class='row item-brand'></h2>
        <h3 class='row item-model'></h3>
      </article>
      <article class='grid-item'>
        <div class='row item-transaction'></div>
        <div class='row item-image'></div>
        <div class='row item-product'></div>
        <div class='row item-brand'></div>
        <div class='row item-model'></div>
      </article>
    </section>
  </main>
</body>

Should content-left and content-right instead be section elements or even h3 and h4 elements rather than div elements? Or should content-left and content-right be aside and section elements respectively?
Is it okay to use h1 thru h4 elements in an unordered fashion like in the content-right article:first-child element?
I know you're supposed to avoid using more than one h1 tag, but read somewhere on MDN that it is acceptable in different sections? So is it okay to reuse h1 thru h4 in article elements?
Is my use of aside elements in content-left correct? Should the content-left aside elements be section elements instead?

回答1:

I'll try to answer your questions based on my understanding of what is said here:

HTML5.3 - W3C Working Draft, 18 October 2018
HTML Living Standard - Last Updated 14 March 2019

Should content-left and content-right instead be section elements or even h3 and h4 elements rather than div elements? Or should content-left and content-right be aside and section elements respectively?

Both content-left and content-right can be a section. According to the references above, a section element represents a generic section of a document, .. and a thematic grouping of a content. And it goes on to give examples. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

However, neither can be an h3 nor an h4 because both contain an article element which is not considered a phrasing content.

Now, they can also be an aside if their content are tangentially related to the content of the parent, which in this case is the main#content... An aside can be considered separate from the parent, albeit related to it.

Is it okay to use h1 thru h4 elements in an unordered fashion like in the content-right article:first-child element?

Surprisingly, it is okay according to the HTML Living Standard - Headings and Sections, which says:

Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section. (Emphasis added)

I know you're supposed to avoid using more than one h1 tag, but read somewhere on MDN that it is acceptable in different sections? So is it okay to reuse h1 thru h4 in article elements?

This is similar to your previous question. The link I cited actually re-uses h1 within section elements in the same body element.

In some cases, this is actually easier to maintain especially if a section tends to be moved a lot during editing.

Is my use of aside elements in content-left correct? Should the content-left aside elements be section elements instead?

Technically, it is correct. An aside is allowed where flow content is expected.

But deciding between making them an aside or section will depend on what their content actually serves to do in relation to the section they belong. An aside is more specific in its purpose.

回答2:

To be honest: there are a couple of things I would do differently...

Regarding your questions:

Should content-left and content-right instead be section elements or even h3 and h4 elements rather than div elements? Or should content-left and content-right be aside and section elements respectively?

A div-element allows for flow-content and the h*-elements allow for phrasing-content only. This is only one reason why they should not be h*-elements.

You mentioned that content-left contains crucial information about the selected product. It does not make sense to me to cover crucial related information in an aside-element.

Is it okay to use h1 thru h4 elements in an unordered fashion like in the content-right article:first-child element?

No. You can do that, but I would not call it “okay”.

I know you're supposed to avoid using more than one h1 tag, but read somewhere on MDN that it is acceptable in different sections?

What? It might make perfect sense to use several h1-elements in a single page.

So is it okay to reuse h1 thru h4 in article elements?

It is semantically not okay to reuse h*-elements on the wrong level of nesting. I.e. use h1-elements (one or several) on the highest level, h2-elements on the level below h1, and so on...

Is my use of aside elements in content-left correct? Should the content-left aside elements be section elements instead?

Transaction-pane seems to be crucial for the page. I can't see any reason to put it in an aside-element.

Generally speaking: h*-, section, aside, nav and article elements section the document. (Almost) each of them create a line in a virtual “table of content”. The way you suggest using h*-elements does not seem to indicate intended usage. Before we dive into section- and article-elements: Do you care about a table of content for your html-tree? How do you want that table of content to look like?

来源：https://stackoverflow.com/questions/55193570/html5-elements-and-html-structuring-sectioning

标签

html

html5

document

sections