HTML5最佳实践;部分/头/ /条元素

网络上有足够多关于HTML5的信息(stackoverflow上也有)，但现在我对“最佳实践”很好奇。像section/headers/article这样的标签是新的，每个人都有不同的意见，关于何时/何处应该使用这些标签。你们觉得下面的布局和代码怎么样?

  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号线。每个部分都以标题开始?

第23行。这个div对吗?或者这一定是一个部分?

第24行。用div分割左/右列。

行25。文章标签的正确位置?

第26行。你的h1-tag需要放在head -tag里面吗?

行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。

行44。无头H2

线53。没有标头的节

第63行。Div与所有(不相关的)新闻项目

第64行。带有h2的标头

第65行。嗯，div还是section?或者删除这个div，只使用article标签

第105行。页脚:-)

当前回答

根据我在“主要”回答中的解释，所讨论的文件应该根据大纲标记出来。

在以下两个表中，我展示了:

原始HTML及其大纲一个可能的大纲和HTML来做这个

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.

下表显示了我对改进版本的建议。我使用以下标记:

<删除> < NEW_OR_CHANGED_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.

2014-10-29 22:57:36

其他回答

这是我工作的例子

2014-08-24 12:20:53

根据Nathan的回答，这非常有意义(对于红色和橙色部分，也许你可以分别使用div和/或页眉和页脚):

2016-12-20 23:49:36

[我的“主要答案”中的解释]

第7行。围绕整个网站的部分?还是只有div?

既不。样式:使用<body>，它已经在那里了。对于section /semantics:正如我的示例HTML中所详细描述的那样，它的效果与实用性相反。对已经包装的内容使用额外的包装器并没有改善，只会产生噪音。

8号线。每个部分都以标题开始?

不，在哪里放置通常被总结为“标题”的内容是作者的选择。如果该标题内容无需额外标记即可清晰识别，则可以完全保留没有<header>的内容。这也是作者的选择。

第23行。这个div对吗?或者这一定是一个部分?

<div>可能是错误的。这取决于你的意图:是否只是为了设计样式，它可能是正确的。如果是出于语义目的，那就错了:它应该是<article>，而不是像我的另一个答案所示的那样。<article>也是正确的，如果它同时用于样式化和分段。

<section>在这里看起来错误，因为在这个之前或之后没有类似的部分，就像一本书中的章节一样。(这是<section>的目的)。

第24行。用div分割左/右列。

不。为什么?

行25。文章标签的正确位置?

是的，有道理。

第26行。你的h1-tag需要放在head -tag里面吗?

不。单独的<h*>元素可能永远不需要放在<header>中(但如果你想的话，它可以)，因为它已经很清楚地表明它是即将到来的内容的标题。例如，如果<header>还包含一个标语行(用<p>标记)，这是有意义的。

行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。

<aside>必须与周围的内容“切线相关”，这是一种误解。关键是:如果内容只是“切线相关”或根本不相关，则使用<aside> !

尽管如此，除了<aside>是一个不错的选择之外，<article>可能仍然比<section>更好，因为“热门项目”和“新项目”不应该像一本书中的两个章节一样阅读。你完全可以选择其中一个，而不是另一个就像对一个东西的另一种排序，而不是一个整体的两个部分。

行44。无头H2

是伟大的。

线53。没有标头的节

好吧，这里没有<header>，但是<h2>-heading清楚地显示了这部分中的哪个部分是头文件。

第63行。Div与所有(不相关的)新闻项目

<article>或<aside>可能更好。

第64行。带有h2的标头

讨论了。

第65行。嗯，div还是section?或者删除这个div，只使用article标签

完全正确!删除<div>.;

第105行。页脚:-)

很合理。

2014-11-02 03:58:02

该文档的标记可能如下所示:

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

你可以在这篇文章A List Apart中找到更多信息。

2013-07-29 23:03:02

编辑:不幸的是，我必须纠正自己。

请参考https://stackoverflow.com/a/17935666/2488942下面的w3规范链接，其中包括一个示例(与我前面看到的不同)。

但后来… 这里有一篇关于它的好文章，感谢@Fez。

我最初的回答是:

w3规范的结构方式:

4.3.4节 4.3.4.1体元素 4.3.4.2 section元素 4.3.4.3 nav元素 4.3.4.4 article元素．...

在我看来，这部分比文章的水平更高。如本回答部分所述，将主题相关的内容进行分组。在我看来，一篇文章中的内容无论如何都是与主题相关的，因此，至少对我来说，这也意味着与文章相比，章节组在更高的层次上。

我认为它应该是这样使用的:

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

或者对于新闻网站来说:

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

2013-09-10 23:18:56

HTML5最佳实践;部分/头/ /条元素

推荐文章

最新文章

标签