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

其他回答

让我们以Facebook留言板为例

“墙”带有“部分”标签，表示它与页面是分开的。所有的帖子都在“文章”标签下。然后我们有一个单独的帖子，它在“section”标签下。我们有标题“X用户张贴这个”。为此，我们可以使用“heading”标签。然后在帖子内部我们有三个部分。一个是图片/文本，喜欢-分享-评论按钮和评论框。对于评论框，我们可以使用article标签。

2015-08-14 17:32:18

事实上，当谈到页眉/页脚时，你是非常正确的。以下是关于如何使用主要HTML5标签的一些基本信息(我建议阅读底部链接的完整源代码):

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/

此外，这里有一个关于文章的描述，在上面的源代码中没有找到:

article -用于指定独立的、自成体系的内容的元素。一篇文章本身就应该有意义。在用文章元素替换所有div元素之前，一定要问问自己:“它是否可能独立于网站的其他部分阅读?”

2011-06-29 21:57:27

为什么不使用item_1, item_2等等。文章标签上的id ?是这样的:

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

似乎没有必要添加包装器div。ID值在HTML中没有语义意义，所以我认为这样做是完全有效的——您不是说第一篇文章总是item_1，只是当前页面上下文中的item_1。id不需要具有任何独立于上下文的含义。

另外，至于你在第26行提出的问题，我认为这里不需要<header>标签，我认为你可以省略它，因为它在“main-left”div中是单独的。如果它在文章的主列表中，为了保持一致性，你可能想包括<header>标签。

2011-03-20 16:40:31

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

都不是——有一个主标记用于此目的，它每页只允许使用一次，并且应该用作主要内容的包装器(与侧边栏或站点范围的标题相比)。

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

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

2014-08-27 13:02:31

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

请参考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最佳实践;部分/头/ /条元素

推荐文章

最新文章

标签