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

[explanations in my “main answer”]

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

Neither. For styling: use the <body>, it’s already there. For sectioning/semantics: as detailed in my example HTML its effect is contrary to usefulness. Extra wrappers to already wrapped content is no improvement, but noise.


line 8. Each section start with a header?

No, it is the author’s choice where to put content typically summarized as “header”. And if that header-content is clearly recognizable without extra marking, it may perfectly stay without <header>. This is also the author’s choice.


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

The <div> is probably wrong. It depends on the intentions: is it for styling only it could be right. If it’s for semantic purposes it is wrong: it should be an <article> instead as shown in my other answer. <article> is also right if it is for both styling and sectioning combined.

<section> looks wrong here, as there are no similar sections before or after this one, like chapters in a book. (This is the purpose of <section>).


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

No. Why?


line 25. Right place for the article tag?

Yes, makes sense.


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

No. A lone <h*> element probably never needs to go in a <header> (but it can if you want to) as it is already clear that it’s the heading of what is about to come. – It would make sense if that <header> also encompassed a tagline (marked with <p>), for example.


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

It is a misunderstanding that an <aside> has to be “tangentially related” to the content around. The point is: use an <aside> if the content is only “tangentially related” or not at all!

Nevertheless, apart from <aside> being a decent choice, <article> might still be better than a <section> as “hot items” and “new items” are not to be read like two chapters in a book. You can perfectly go for one of them and not the other like an alternative sorting of something, not like two parts of a whole.


line 44. H2 without header

Is great.


line 53. section without header

Well, there is no <header>, but the <h2>-heading leaves pretty clear which part in this section is the header.


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

<article> or <aside> might be better.


line 64. header with h2

Discussed already.


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

Exactly! Remove the <div>.


line 105. Footer :-)

Very reasonable.