Menu
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?
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 :-)
218
The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
Note: A header element represents the header of the content. However, it cannot be used inside the <footer>, <address>, or parent <header> element.
You can use a header in any section on your site. In fact, you probably should use a header within most of your sections.
Sectioning elements can be nested inside one another as many times as is needed based on the content. The header and footer in a sectioning element can also contain sectioning elements.
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?”
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
