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>
线7.部分整个网站？还是只有一个div？
第8行。每个部分从头开始？
这个div是正确的吗？或者必须是一个部分？
第24行。用div分割左/右列。
第26行。是否需要将您的h1标签放在header-tag中？
第43行。内容与主要文章无关，所以我决定这是一个部分，而不是一边。
没有头的H2
第53行
第63行。所有(非相关)新闻项
行64.标题与h2
嗯，div还是部分？或者删除此div并且只使用article-tag
第105行。
解决方法
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: 07000
