Login/Register
HTML5 best practices; section/header/aside/article elements [closed]
Asked Answered
htmlheaderarticle
H

16

609

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 :-)

Heartily answered 24/1, 2011 at 10:48 Comment(1)
456bereastreet.com/archive/201103/… – Federalism
S
523

Actually, you are quite right when it comes to header/footer. Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):

section – Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain informations about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

Source: https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Additionally, here's a description on article, not found in the source above:

article – Used for element that specifies independent, self-contained content. An article should make sense on its own. Before replacing all your div’s with article elements, always ask yourself: “Is it possible to read it independently from the rest of the web site?”

Scow answered 29/6, 2011 at 21:57 Comment(1)
It is a riddle to me how this answer got so many votes: it doesn’t talk about <article> elements, it doesn’t contrast the mentioned elements, neither does it group them. The answer gives no “best practices”, nor does it answer any of the explicit questions of the OP! – Dudleyduds
D
309

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

I wrote 3 answers:

  1. This explanation (start here).
  2. Concrete answers to OP’s questions.
  3. 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*>2 (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> sections3
    • helps to distinguish “the real thing” from document’s non-header, non-footer, non-main content, if that makes sense in your case...

1 to mind comes: outline, algorithm, implicit sectioning
2 I use <h*> as shorthand for <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
3 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>

Dudleyduds answered 27/10, 2014 at 0:17 Comment(3)
Since this seems to be our definitive post regarding this issue, I wanted to point out one important thing that has not been addressed yet: MDN tells us "There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it … should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure." Am I alone in thinking this is a huge caveat when it comes to semantic sectioning? – Eyepiece
@Eyepiece I agree that the elements discussed should not be used alone to convey anything to anyone except human readers of the source code.—I want to answer the question: How were these elements intended to be used? ... Use those seven elements as alternatives to div elements where appropriate. Sometimes a <div class=article> could be replaced, sometimes an <article class=poem> could be the replacement. – Dudleyduds
@RobertSiemer In your second example, if the first h3 (“if you want siblings at top level...”) was an h1 instead, would the second h3 still create a top-level section, or would it now be nested under the h1? – Suburbanize
M
113

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

The markup for that document could look like the following:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

You may find more information in this article on A List Apart.

Milliken answered 29/7, 2013 at 23:3 Comment(5)
This boilerplate structure is not worth the space on this page. 1) None of the mentioned HTML elements are tied to any position in a document. 2) It falsely implies that <header> and <footer> are document level elements. 3) It falsely implies that <section> is intended as <article>-child only. @DanDascalescu – Dudleyduds
Couldn't agree more @RobertSiemer. This is still one of the most common misconceptions about HTML5 elements and is becoming a semantic handicap for our beloved markup language. – Cofer
@RobertSiemer Re: 2), Can't <header> and <footer> be document-level elements, as well as within <section|article|nav|aside> sections? – Reganregard
@Flimm, yes they can. My point was: The answer is not wrong – it just doesn’t answer much. – Dudleyduds
One should also wrap the article and aside element in a main element. Dont forget to add headings to the article and the section. Check with the W3C Validator. – Chivy
S
72

I'd suggest reading the W3 wiki page about structuring HTML5:

<header> Used to contain the header content of a site. <footer> Contains the footer content of a site. <nav> Contains the navigation menu, or other navigation functionality for the page.

<article> Contains a standalone piece of content that would make
sense if syndicated as an RSS item, for example a news item.

<section> Used to either group different articles into different
purposes or subjects, or to define the different sections of a single article.

<aside> Defines a block of content that is related to the main content around it, but not central to the flow of it.

They include an image that I've cleaned up here:

html5

In code, this looks like so:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

Let's explore some of the HTML5 elements in more detail.

<section>

The <section> element is for containing distinct different areas of functionality or subjects area, or breaking an article or story up into different sections. So in this case: "sidebar1" contains various useful links that will persist on every page of the site, such as "subscribe to RSS" and "Buy music from store". "main" contains the main content of this page, which is blog posts. On other pages of the site, this content will change. It is a fairly generic element, but still has way more semantic meaning than the plain old <div>.

<article>

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up. In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> and <footer>

as we already mentioned above, the purpose of the <header> and <footer> elements is to wrap header and footer content, respectively. In our particular example the <header> element contains a logo image, and the <footer> element contains a copyright notice, but you could add more elaborate content if you wished. Also note that you can have more than one header and footer on each page - as well as the top level header and footer we have just discussed, you could also have a <header> and <footer> element nested inside each <article>, in which case they would just apply to that particular article. Adding to our above example:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the <nav>, but it's not compulsory.

<aside>

you may have noticed that we used an <aside> element to markup the 2nd sidebar: the one containing latest gigs and contact details. This is perfectly appropriate, as <aside> is for marking up pieces of information that are related to the main flow, but don't fit in to it directly. And the main content in this case is all about the band! Other good choices for an <aside> would be information about the author of the blog post(s), a band biography, or a band discography with links to buy their albums.

Where does that leave <div>?

So, with all these great new elements to use on our pages, the days of the humble <div> are numbered, surely? NO. In fact, the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. A common example is using a <div> to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content.

Sanchez answered 15/7, 2014 at 18:7 Comment(6)
For the nested sections however, wouldn't it make more sense to use <section class="summary"> rather than <section id="summary">? If you had multiple articles on one page, then the latter method would result in duplicate ID's on the same page—an HTML faux-pas. Right? – Fujimoto
Yes, I'd probably use classes instead in that instance. – Sanchez
Shouldn't all of the tags you mentioned be wrapped up in a "main" which is then wrapped up in the "body"? – Ricard
The main tag would be good to add. Where to put it would be decided based on what is unique content on the page. In this example, I think I would just put it around the center section. Read more: w3.org/TR/2012/WD-html-main-element-20121217 "The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms." – Sanchez
its still so ambiguous as is the MDN documentation – Mani
This is the best part of this answer. Most confusing part.@Sanchez beautifully explained this concept. <article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. – Counterpressure
D
27

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

Dudleyduds answered 2/11, 2014 at 3:58 Comment(4)
Splitting one answer into 3 incomplete isn't helpful. – Melbamelborn
@ChristianStrempfer It actually is helpful, as many people don’t come here to read the specific answers to specific questions of the OP (this answer), but to read more about the topic at hand (my main answer). – I believe with one huge tldr answer I would not even get the votes I have on my main answer alone. – What do you suggest? – Dudleyduds
I suggest merging them into one answer. Collection votes isn't a good argument for splitting them. Especially the third answer cannot stand alone, as you're refering your main answer. – Melbamelborn
@ChristianStrempfer That would be way too long for my taste. – I’m working on improving the tables, though... – Dudleyduds
D
24

According to the explanation in my “main” answer the document in question should be marked up according to an outline.

In the following two tables I show:

  • the original HTML and its outline
  • a possible intended outline and the HTML doing that

original html (shortened)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

original html relevant for outline
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































resulting outline
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


The outline of the original is
definitively not what was intended.

































































The following table shows my proposal for an improved version. I use the following markup:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

possible intended outline
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































modified html
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

resulting outline
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


The modified HTML reflects the
intended outline way better than
the original.
































































Dudleyduds answered 29/10, 2014 at 22:57 Comment(8)
Thanks for excellent detailed answer, it is very enlightening. I want to learn more about the topic, so I hope you can explain some of the choices, which seem strange for me. I will be posting them as individual comments. – Anting
1. header around aside > div[id=logo] seems to be irrelevant to me. Presentionally it is a header, but semantically not. The language div is maybe some sort of navigation and logo is maybe kind of header to the whole site but surely not to the page. – Anting
2. <ARTICLE id=main> seems really only presentational. It does not contain anything related inside. (The same is true about <ARTICLE id=main-right> but it is much more defendable there (as "news and hot").) I suggest using div or main at worst. – Anting
3. <ARTICLE id=news-items> seems to me as typical case where I would use aside. It has nothing to do with the main article, it is just some newsfeed. And I agree that it contains news as individual "small" articles. – Anting
@Anting I see you got the point. :-) Regarding 1. and 2.: I let myself guide by the OP’s original HTML, thinking that grouping and naming of ids have semantic value, while they might indeed be only presentational! Regarding 3.: your interpretation of the news-items would definitively warrant an aside- over an article-element. – Dudleyduds
Consider editing your proposal, your "theoretical" answer is very well written but I think that most beginners will just look at the code example and they might be really confused, because it is not in line with the theoretical part. – Anting
Why don't followup sections descent under <h2>The latest news</h2> in the upper table? I think <h*> creates sibling (sub)sections. BTW: what's the difference between sections and subsections? – Photochronograph
Splitting one answer into 3 incomplete isn't helpful. – Melbamelborn
B
16

The main mistake: You have "divitis" in the whole document.
Why this?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Instead of:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

To stylize this header, use CSS hierarchy: body > section > header > h1, body > section > header > h2

More, ...line 63: why header wraps h2?? If you do not include any more element inside header, just use a single h2.
Keep in mind, your structure is not to stylize document, but construct a document self-explained.

Apply this to the rest of document; Good luck ;)

Besot answered 8/2, 2012 at 23:10 Comment(3)
@superUntitled <hgroup> is not part of HTML5 anymore – Postgraduate
Should role="banner" be on the h1 itself, not the whole header? That way it points to a single piece of text a screen reader would announce, not a glob of HTML. – Italic
Using h1 and h2 for logo and language doesn't make sense to me. The tiny little language button on the right should be the second most important content/info on this page? And if you place your logo inside a h1 than a search bot will find out that the main content of every page is the same (pretty boring in my mind). Also see @MeanEYE answer for the use of h1 and h2. Apart from that IDs are non-semantic use RDFa if you need semantics. Your way makes CSS selectors just slow: developers.google.com/speed/docs/best-practices/… – Weatherbound
C
10

Why not have the item_1, item_2, etc. IDs on the article tags themselves? Like this:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

It seems unnecessary to add the wrapper divs. ID values have no semantic meaning in HTML, so I think it would be perfectly valid to do this - you're not saying that the first article is always item_1, just item_1 within the context of the current page. IDs are not required to have any meaning that is independent of context.

Also, as to your question on line 26, I don't think the <header> tag is required there, and I think you could omit it since it's on its own in the "main-left" div. If it were in the main list of articles you might want to include the <header> tag just for the sake of consistency.

Chaotic answered 20/3, 2011 at 16:40 Comment(1)
I was just following the original example and showing how to accomplish the same thing without unnecessary wrapper divs. The IDs could be there for any number of reasons...for one thing, there could be anchor links pointing to them. – Chaotic
I
6
  1. Section should be used only to wrap a section inside a document (like chapters and similar)
  2. With header tag: NO. Header tag represents a wrapper for page header and is not to be confused with H1, H2, etc.
  3. Which div? :D
  4. Yes
  5. From W3C Schools:

    The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

  6. No, header tag has a different use. H1, H2, etc. represent document titles H1 being the most important

I didn't answer other ones because it's kind of hard to guess what you were referring to. If there are more questions, please let me know.

Infirm answered 24/1, 2011 at 11:9 Comment(5)
Thanks for your answers! On point 3; I'm sorry, the line-numbers were not right. It must be line_23 instead of point 3; see also the line changes in my post. – Heartily
Yes, I do the same thing on my sites. Generally DIVs are to be used to create site structure. Introducing header, footer and similar tags in HTML5 is just to make things a little bit easier to read. They behave the same way as DIV. – Infirm
Check your sources. The w3c schools site does not specify that article necessarily be from an external source. w3schools.com/html5/tag_article.asp – Velites
Hm, I didn't even think that article is to be used from external source. This is quit an old reply, I can hardly remember what was it about. :) – Infirm
I agree with #1. I think those SECTION elements make more sense as ASIDEs. – Prestigious
S
5

Here's my example in which I work

enter image description here

Stefaniastefanie answered 24/8, 2014 at 12:20 Comment(0)
C
5
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

Reference: The nav element

Cursorial answered 28/5, 2018 at 1:40 Comment(0)
S
2

I dont think you should use the tag on the news item summary (lines 67, 80, 93). You could use section or just have the enclosing div.

An article needs to be able to stand on its own & still make sense or be complete. As its incomplete or just an extract it cannot be an article, its more a section.

When you click 'read more' the subsequent page can

Sherrilsherrill answered 19/7, 2011 at 11:38 Comment(0)
A
2

EDIT: Unfortunately I have to correct myself.

Refer below https://mcmap.net/q/64162/-html5-best-practices-section-header-aside-article-elements-closed for a link to the w3 specs which include an example (unlike the ones I looked at earlier on).

But then.... Here is a nice article about it thanks to @Fez.

My original response was:

The way the w3 specs are structured:

4.3.4 Sections

4.3.4.1 The body element

4.3.4.2 The section element

4.3.4.3 The nav element

4.3.4.4 The article element

....

suggests to me that section is higher level than article. As mentioned in this answer section groups thematically related content. Content within an article is in my opinion thematically related anyway, hence this, to me at least, then also suggests that section groups at a higher level compared to article.

I think it's meant to be used like this:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

or for a news website:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
Aroma answered 10/9, 2013 at 23:18 Comment(0)
D
2

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

Neither – there is a main tag for that purpose, which is only allowed once per page and should be used as a wrapper for the main content (in contrast to a sidebar or a site-wide header).

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

Dripstone answered 27/8, 2014 at 13:2 Comment(0)
M
1

Let's take an example of the Facebook Wall

  1. The Wall comes under "section" tag, which denotes it is separate from a page.

  2. All posts come under the "article" tag.

  3. Then we have a single post, which comes under the "section" tag.

  4. We have heading "X user post this". For this, we can use the "heading" tag.

  5. Then inside the post we have three sections. One is Images/text,like-share-comment button and comment box.

  6. For a comment box we can use the article tag.

Middlings answered 14/8, 2015 at 17:32 Comment(0)
W
1

According to Nathan's answer, this makes perfect sense (for red and orange parts, maybe you could use div's and/or header and footer respectively):

enter image description here

Wenz answered 20/12, 2016 at 23:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.