HTML5 Elements and HTML Structuring/Sectioning

Question

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?

Check out this question. [html5-best-practices-section-header-aside-article-elements](https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements) This particular [answer](https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements#answer-24765186) in that question has a similar diagram (of the page structure] you posted, which should point you in the right direction, for starters. — appu, Mar 16 '19 at 05:21
@appu i had already found and read some of the answers on that question, but not that answer so thanks!! — oldboy, Mar 16 '19 at 05:25
@appu that answer is based on the MDN documentation, which is ambiguous about certain things :( — oldboy, Mar 16 '19 at 06:02
The use of the H1-4 is wrong, but other than that it looks good. Although not wrong, I'd replace the divs with `
`. The `#content-right/left` could be `
` or `
`. Wrap the `` with `
` — zer00ne, Mar 16 '19 at 06:30
@zer00ne but the `div` elements are not textual paragraphs?? :/ wrong in the sense that they cannot be unordered or wrong in the sense that i cannot reuse them within an `article` element? thanks!! p.s. ive changed some things just now — oldboy, Mar 16 '19 at 06:34
@Anthony The headings are just titles of an article, section, aside, main, etc. and the order is important if you want to be as close to being semantically perfect (impossible because it's subjective). — zer00ne, Mar 16 '19 at 06:38
`h1` thru `h6` are more than just titles, arent they? dont they determine the structure of a page or section? — oldboy, Mar 16 '19 at 06:41
@Anthony: The first heading of a section is implicitly tied to that section and doesn't introduce any additional granularity. Any *subsequent* headings in the same section introduce subsections. If you have a series of articles and each one contains just one h2, then you simply have that many articles and no subsections. — BoltClock, Mar 16 '19 at 06:46
so `
` obvs created a new section, but the following `
` would create a new section on the same level? — oldboy, Mar 17 '19 at 02:32
@Anthony: No, subsequent
following a
will create a subsection. If you want another section on the same level, in this case, use
again. – So far so logic, I’ld say. — Robert Siemer, Mar 17 '19 at 16:18
@Anthony Your question is hard to interpret, because the sample code is missing sample content. In particular, please add example headings/text to all ``. What is “cont” supposed to mean for “nav-links-cont”? “FILTER” is a navigational link? Sounds more like a text-box, relevant for the current page only. The blue boxes (`grid-item`) are different products? Why is there only one “product-info-pane”, and why is it outside of the blue box? What is `class=row` supposed to do? Each of those is one row? What is `item-transaction` and what does `item-product` mean for a product? — Robert Siemer, Mar 17 '19 at 16:33
@RobertSiemer **'cont'** in `nav-links-cont` (which contains `class='nav-links'` elements) simply means **container.** i thought people would be able to easily infer this from the code. again, the `id` in the code for that particular pane of information differs from the image; the `id` is `search-and-filter-pane` which is self-explanatory. yes, the `grid-item` elements are products with limited product details. when a user clicks a `grid-item`, `product-info-pane` will be expanded and populated with additional product details. [cont.] — oldboy, Mar 17 '19 at 18:20
@RobertSiemer [cont. p2] `transaction-pane` will be populated with a checkout process when somebody clicks a "buy now" button. `item-transaction` will display the transaction type (e.g. auction, basic, pre-order, etc.). `item-product` will display the product type (e.g. t-shirt, jeans, socks, etc.), so on and so forth. — oldboy, Mar 17 '19 at 18:23
@Robert Siemer: The markup reads like a typical document outline to me. I don't see how adding content to the headings would improve it. If anything adding content other than "Heading 1" "Heading 2" and "Content" would only make it more work to read through, and adding those examples is just redundant. — BoltClock, Mar 21 '19 at 09:16

Frank Fajardo · Answer 1 · 2019-03-16T09:22:58.020

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

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.

the functionality of each element is described by their IDs. should a panel of filtering functionality be classified as an `aside`? should a panel of payment processing functionality be classified as an `aside`? the HTML Living Standard document provided a bit more information, but i still feel like there's ambiguity there. such a shame that the logicalness is being compromised for accessibility — oldboy, Mar 16 '19 at 21:54
@Anthony, your °content-left` has no class that describes what it has so it's hard say that it's two `aside` elements are really 'asides'. But looking at the sibling `article`, it looks like these two should be just `section`s (or just `div`s, if you don't want then to appear in the document outline). — Frank Fajardo, Mar 17 '19 at 16:07
Not sure what you mean by ^logicalness is being compromised for accessibility* but I think the reason why writing semantic HTML is important is Accessibility. If we don't care about it we could just write everything in `div`s.. — Frank Fajardo, Mar 17 '19 at 16:08
by 'logicalness', i meant 'being able to reach definite, precise answers, without any ambiguity'. so much is left up to subjective interpretation based on the explanations of the new HTML5 elements and how the elements are supposed to be used. the explanations usually only cover documents that contain textual bodies or elements, if that makes any sense to you? — oldboy, Mar 17 '19 at 18:28
ohhh i forgot to respond to one of your points: `content-left` is a responsive sidebar to display certain information (e.g. filter options, product info) that can be slide in and out of the viewport (i.e. shown/hidden) — oldboy, Mar 21 '19 at 17:01

Robert Siemer · Answer 2 · 2019-03-21T15:32:31.523

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?

i definitely do not need a table of contents, but for accessibility and SEO purposes, i would like to the structure of the document to be half decent. im not sure how it should look. its going to be an ecommerce marketplace, and a lot of the info on the web seems to be orientated around actual textual documents and the like — oldboy, Mar 20 '19 at 18:10
@Anthony I was talking philosophical about an invisible, but existent table of content. — Robert Siemer, Mar 21 '19 at 15:36
@Anthony To my knowledge, search engines and accessibility tools don’t care much about whether a document is sectioned via `section`, `article` or `aside`. So the question remains: Who do you want to satisfy? – If you want to use HTML-elements for their intended purpose, how on earth could you wrap an item-model(-number) in an `h*`-element as a title with no content below it? Or turn a site(?) logo into a `h1`-title for a document? — Robert Siemer, Mar 21 '19 at 15:57
it's really to satisfy those with accessibility issues, but if it doesn't effect SEO, i won't bother going through the hassle. there would be more elements in the structure. what ive posted in my initial question is just a rough outline... the format that im currently using is `
...
Model
Bravia
`
...
`. i only wrapped the logo in a header because i heard it was done elsewhere, but doing so makes sense because the alternative text of that logo would likely be used in sch a cntxt — oldboy, Mar 21 '19 at 16:58

HTML5 Elements and HTML Structuring/Sectioning

` obvs created a new section, but the following `

` would create a new section on the same level?

following a

will create a subsection. If you want another section on the same level, in this case, use

again. – So far so logic, I’ld say.

2 Answers2

Model