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行。页脚:-)

当前回答

这是我工作的例子

2014-08-24 12:20:53

其他回答

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

第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

我认为你不应该在新闻摘要中使用标签(第67、80、93行)。可以使用section，也可以使用div。

一篇文章需要能够站在自己&仍然有意义或完整。由于它不完整或只是一个摘录，它不可能是一篇文章，它更像是一个章节。

当你点击“阅读更多”的后续页面可以

2011-07-19 11:38:23

事实上，当谈到页眉/页脚时，你是非常正确的。以下是关于如何使用主要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

不幸的是，到目前为止给出的答案(包括投票最多的)要么是“只是”常识，要么是完全错误的，要么是令人困惑的。一个关键的关键词都没有出现!

我写了3个答案:

这个解释(从这里开始)。具体回答OP的问题。改进了详细的HTML。

要理解这里讨论的html元素的作用，您必须知道其中一些元素是文档的一部分。每个html文档都可以根据HTML5大纲算法进行分段，以便创建大纲-或-目录(TOC)。大纲通常是不可见的(现在)，但作者应该以这样一种方式使用html，从而使大纲反映他们的意图。

你可以只用这些元素创建section:

创建(显式)子节 < >部分部分 < >条部分 <导航>部分除了< >部分创建兄弟节或子节带有<h*>2的未指定类型的section(并非所有都这样做，请参见下面) 关闭当前显式(子)节

section可以命名为:

<h*>创建的section自己命名 <section|article|nav|aside> section将由第一个<h*>命名(如果有的话) 这些<h*>是唯一不自己创建节的

关于分段还有一件事:以下上下文(即元素)创建了“轮廓边界”。它们包含的任何部分对它们来说都是私有的:

文档本身带有<body> 表<td>的单元格 < blockquote > <details>， <dialog>， <fieldset>， <figure> 没有其他的

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)

这就提出了两个问题:

<article>和<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)

<页眉>，<页脚>和<主>适合吗?

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 .想到的是:提纲、算法、隐式分段我用<h*>来表示<h1>， <h2>， <h3>， <h4>， <h5>和<h6> 在<aside>或<nav>中也不允许<main>，但这并不奇怪。-在效果上:<主>只能隐藏在(嵌套)下降<section>部分或出现在顶层，即<body>

2014-10-27 00:17:06

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

2016-12-20 23:49:36

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

推荐文章

最新文章

标签