Do section elements consider their order?

user_13266228 0
Viewed 55

I am writing the HTML for the Terms of Service page. I decided to use the ol element and the section element in consideration of the following two items.

  1. Each item must be guaranteed in order
  2. Each part can be cut out as a section

ol {
  list-style: none;
}
<ol>
  <li>
    <section>
      <h1>1.</h1>
    </section>
  </li>
  <li>
    <section>
      <h1>2.</h1>
    </section>
  </li>
  <li>
    <section>
      <h1>3.</h1>
    </section>
  </li>
</ol>

However, it was reviewed by an acquaintance to change it to only the section element. He said that if you write only the section element, the order is guaranteed.

<section>
  <h1>1.</h1>
</section>
<section>
  <h1>2.</h1>
</section>
<section>
  <h1>3.</h1>
</section>

However, I (and the reviewer) did not find any basis for it in the HTML Standard.

Question

  1. Does the section element alone guarantee that their order matters?

  2. Combining list and section elements is valid, but does this give a semantically inappropriate interpretation as "Terms of Service" page's markup?

language-lawyer accessibility html
2 Answers

Short Answer

He is right, no need for a list here.

Long Answer

Provided you do not change the order with CSS, items will be displayed (and read in a screen reader) in the order they are within the DOM.

So as long as you aren't using any positioning on the section elements that would interfere with this (i.e. position: absolute) and you don't change the order with tabindex="1", tabindex="2" etc. you will be fine.

What you were doing is valid HTML for future reference: the li element uses the flow content content model, as such it can contain any of the items listed on this page

One thing to consider is your use of <h1> within those sections. Although this is technically valid HTML, this will be changing back to the "one <h1> per page" rule soon, it is also highly recommended to do this for screen reader users as they still are not used to the multiple <h1> rule. Change these to <h2> or whatever is appropriate.

If you do this there is no benefit to adding an ordered list (for accessibility at least).

user_27028940

According to the spec nothing suggests that you cannot use the section tag inside an ol.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

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.

Reading this your usage of section inside an ol seems to be fine.Besides using the w3.org's HTML5 validator does not give any errors. I would take this with a grain of salt. And according to MDN's usage notes

Usage notes

  • Each should be identified, typically by including a heading (- element) as a child of the element.
  • If it makes sense to separately syndicate the content of a element, use an element instead.
  • Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

To your first question, yes the section element alone will guarantee that their order matters. According to this

The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.

Some examples of usage are given following. The section element can be applied to each individual section of a tab switcher or content slider (if an unordered list is not needed). The section element can also divide a lengthy "terms and conditions" (or similar) page into numbered sections. Furthermore, section elements can divide the different sections of a one-page website or portfolio. A common use offline could be to denote the chapter of a book.

This does indicate that the section item can be used to denote order/flow of a document. Which I think would guarantee that the order matters.

reference - HTML5, <section> inside unordered list

Don’t worry too much about the semantic considerations — they’re

necessarily fuzzy.

user_132069200
Related