HTML5 best practices; section/header/aside/article elements [closed]

Question 1

There is enough information about HTML5 on the web (and also on stackoverflow), but now I’m curious about the “best practices”. Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these tags. So what do you guys think of the following layout and code?

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

line 7. section around the whole website? Or only a div?

line 8. Each section start with a header?

line 23. Is this div right? or must this be a section?

line 24. Split left/right column with a div.

line 25. Right place for the article tag?

line 26. Is it required to put your h1-tag in the header-tag?

line 43. The content is not related to the main article, so I decided this is a section and not a aside.

line 44. H2 without header

line 53. section without header

line 63. Div with all (non-related) news items

line 64. header with h2

line 65. Hmm, div or section? Or remove this div and only use the article-tag

line 105. Footer 🙂

Question 2

Unfortunately the answers given so far (including the most voted) are either “just” common sense, plain wrong or confusing at best. None of crucial keywords¹ pop up!

I wrote 3 answers:

This explanation (start here).
Concrete answers to OP’s questions.
Improved detailed HTML.

To understand the role of the html elements discussed here you have to know that some of them section the document. Each and every html document can be sectioned according to the HTML5 outline algorithm for the purpose of creating an outline—⁠or⁠—table of contents (TOC). The outline is not generally visible (these days), but authors should use html in such a way that the resulting outline reflects their intentions.

You can create sections with exactly these elements and nothing else:

creating (explicit) subsections
- <section> sections
- <article> sections
- <nav> sections
- <aside> sections
creating sibling sections or subsections
- sections of unspecified type with <h*>^² (not all do this, see below)
to level up close the current explicit (sub)section

Sections can be named:

<h*> created sections name themselves
<section|article|nav|aside> sections will be named by the first <h*> if there is one
- these <h*> are the only ones which don’t create sections themselves

There is one more thing to sections: the following contexts (i.e. elements) create “outline boundaries”. Whatever sections they contain is private to them:

the document itself with <body>
table cells with <td>
<blockquote>
<details>, <dialog>, <fieldset>, and <figure>
nothing else

title

example HTML <body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline 1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)

This raises two questions:

What is the difference between <article> and <section>?

both can:
- be nested in each other
- take a different notion in a different context or nesting level
<section>s are like book chapters
- they usually have siblings (maybe in a different document?)
- together they have something in common, like chapters in a book
one author, one <article>, at least on the lowest level
- standard example: a single blog comment
- a blog entry itself is also a good example
- a blog entry <article> and its comment <article>s could also be wrapped with an <article>
- it’s some “complete” thing, not a part in a series of similar
<section>s in an <article> are like chapters in a book
<article>s in a <section> are like poems in a volume (within a series)

How do <header>, <footer> and <main> fit in?

they have zero influence on sectioning
<header> and <footer>
- they allow you to mark zones of each and every section
- even within a section you can have them several times
- to differentiate from the main part in this section
- limited only by the author’s taste
- <header>
  - may mark the title/name of this section
  - may contain a logo for this section
  - has no need to be at the top or upper part of the section
- <footer>
  - may mark the credits/author of this section
  - can come at the top of the section
  - can even be above a <header>
<main>
- only allowed once
- marks the main part of the top level section (i.e. the document, <body> that is)
- subsections themselves have no markup for their main part
- <main> can even “hide” in some subsections of the document, while document’s <header> and <footer> can’t (that markup would mark header/footer of that subsection then)
  - but it is not allowed in <article> sections³
- helps to distinguish “the real thing” from document’s non-header, non-footer, non-main content, if that makes sense in your case…

^{¹ to mind comes: outline, algorithm, implicit sectioning}
^{² I use <h*> as shorthand for <h1>, <h2>, <h3>, <h4>, <h5> and <h6>}
^{³ neither is <main> allowed in <aside> or <nav>, but that is of no surprise. – In effect: <main> can only hide in (nested) descending <section> sections or appear at top level, namely <body>}

16 s
16

Leave a Reply Cancel reply

16 s 16

Leave a Reply Cancel reply

16 s
16