[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.