Semantic HTML elements

[masakudamatsu]

See this article of Interneting Is Hard for the role of headings (h1 etc.), article, section, nav, header, footer.

In addition the main element is added to wrap article elements. According to the W3C Recommendation, it should wrap the content unique to the page, not those parts repeated across pages. See an article by HTML Doctor for more.

[masakudamatsu]

I'm not 100% sure how to use section together with h2 and h3.

The outline structure is defined by the nested structure of section elements, not h2 and h3. Thus the HTML5 outliner interprets the following code:

<section>
  <h2>
</section>
<section>
  <h3>
</section>

as two equal-ranked sections, rather than one section with a sub-section as indicated by h2 and h3.

However, as MDN warns, there is currently no browser which implements this outline algorithm. Thus we should rely on h2 and h3 to indicate the section hierarchy.

Then, there is one issue: should we nest section elements to indicate the hierarchy of h2 and h3? That is,

<section>
  <h2>
  <section>
    <h3>
  </section>
</section>

or

<section>
  <h2>
  <h3>
</section>

W3C Recommendation says there are equivalent.

For the time being, we go with the former: nesting section elements. This needs to be reviewed as we implement this template.