HTML5最佳实践; section / header / aside / article元素

问题描述 投票：521回答：16

网上有足够的关于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行。围绕整个网站的section？或者只有一个div？

第8行。每个section都以header开头？

23.这div对吗？或者这必须是section？

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

第25行.article标签的正确位置？

第26行。是否需要将h1标签放入header标签？

第43行。内容与主要文章无关，因此我认为这是section而不是aside。

第44行。没有header的H2

第53行。没有section的header

第63行。包含所有（非相关）新闻项目

第64行.header与h2

第65行。嗯，div或section？或者删除此div并仅使用article-tag

第105行。页脚:-)

html html5 header article
16个回答
470
投票

实际上，在页眉/页脚方面你是完全正确的。以下是有关如何/应该使用每个主要HTML5标签的一些基本信息（我建议阅读底部链接的完整源代码）：

section - 用于将与主题相关的内容分组在一起。听起来像div元素，但事实并非如此。 div没有语义含义。在用节元素替换所有div之前，总是问自己：“所有内容是否相关？”

aside - 用于切向相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧是不足以使用旁边元素的原因。问问自己是否可以删除旁边的内容而不降低主要内容的含义。 Pullquotes是切向相关内容的示例。

header - header元素和header（或masthead）的一般接受用法之间存在重要区别。页面中通常只有一个标题或“标题”。在HTML5中，您可以拥有任意数量的内容。该规范将其定义为“一组介绍性或导航辅助工具”。您可以在网站的任何部分使用标头。实际上，您可能应该在大多数部分中使用标题。该规范将section元素描述为“内容的主题分组，通常带有标题”。

nav - 用于主要导航信息。组合在一起的一组链接不足以使用nav元素。另一方面，站点范围的导航属于nav元素。

页脚 - 听起来像是对位置的描述，但不是。页脚元素包含有关其包含元素的信息：谁写了它，版权，相关内容的链接等。而我们通常只有一个页脚用于整个文档，HTML5允许我们在部分内也有页脚。

资料来源：http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

另外，这里有关于article的描述，在上面的源代码中找不到：

article - 用于指定独立，自包含内容的元素。一篇文章本身应该有意义。在用文章元素替换所有div之前，总是问自己：“是否可以独立于网站的其他部分阅读它？”

3
投票

这是我工作的例子

2
投票
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

<body itemscope itemtype="http://schema.org/Blog"> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <main> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">My Day at the Beach</h1> </header> <div itemprop="articleBody"> <p>Today I went to the beach and had a lot of fun.</p> ...more content... </div> <footer> <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p> </footer> </article> ...more blog posts... </main> <footer> <p>Copyright © <span itemprop="copyrightYear">2010</span> <span itemprop="copyrightHolder">The Example Company</span> </p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>

1
投票

我不认为你应该在新闻项目摘要上使用标签（第67,80,93行）。你可以使用部分或只是有封闭的div。

一篇文章需要能够独立存在并且仍然有意义或完整。由于它不完整或只是一个提取物，它不能是一篇文章，它更像是一个部分。

当您点击“阅读更多”时，后续页面即可

1
投票

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

请参阅下面的https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element以获取包含示例的w3规范的链接（与我之前看到的不同）。

但是后来......由于@Fez，https://stackoverflow.com/a/17935666/2488942是一篇很好的文章。

我最初的回答是：

w3规范的结构方式：

4.3.4章节

4.3.4.1身体元素

4.3.4.2节元素

4.3.4.3 nav元素

4.3.4.4文章元素

....

在我看来，Here比section更高。正如article this answer中提到的那些与主题相关的内容。无论如何，文章中的内容在我看来是主题相关的，因此，至少对我而言，这也表明section群体与section相比处于更高水平。

我认为这意味着像这样使用：

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
1
投票

“第23行。这个div是对的吗？或者这必须是一个部分？“

两者都没有 - 为此目的有一个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 标记，每页只允许一次，应该用作主要内容的包装（与侧边栏或站点范围的标题相比）。

main

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

0
投票

我想更准确地澄清这个问题，如果我错了就纠正我让我们举个Facebook Wall的例子

1.Wall属于“section”标签，表示它与页面分开。

2.所有帖子都在“文章”标签下。

然后我们有单个帖子，它位于“section”标签下。

3.我们标题为“X用户发布此内容”，我们可以使用“标题”标签。

4.然后在内部帖子中我们有三个第一部分是图像/文本，如 - 分享 - 评论按钮和评论框。

5.对于评论框，我们可以使用文章标签。

0
投票

根据http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element，这是完全合理的（对于红色和橙色部分，也许你可以分别使用Nathan's answer和/或div和header）：

footer

208
投票

不幸的是，到目前为止给出的答案（包括投票最多的）要么是“只是”常识，要么是错误的，要么是最让人困惑的。没有关键的关键字1弹出！

我写了3个答案：

  1. 这个解释（从这里开始）。
  2. Concrete answers to OP’s questions.
  3. Improved detailed HTML.

要理解这里讨论的html元素的作用，你必须知道其中一些部分是文档。每个html文档都可以是sectioned according to the HTML5 outline algorithm，用于创建一个大纲-⁠或内容目录（TOC）。大纲通常不可见（这些日子）​​，但是作者应该使用html，使得结果大纲反映他们的意图。

您可以创建具有这些元素的部分，而不是其他内容：

  • 创建（显式）子部分 <section>部分 <article>部分 <nav>部分 <aside>部分
  • 创建兄弟部分或子部分 使用<h*>2的未指定类型的部分（不是全部都这样做，见下文）
  • 升级关闭当前显式（子）部分

部分可以命名为：

  • <h*>自己创建了部分名称
  • <section|article|nav|aside>部分将由第一个<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>有什么区别？

  • 两者都可以： 相互嵌套 在不同的上下文或嵌套级别中采用不同的概念
  • <section>s就像书的章节 他们通常有兄弟姐妹（也许在不同的文件？） 他们在一起有一些共同点，比如书中的章节
  • 一位作者，一位<article>，至少在最低级别 标准示例：单个博客评论 博客条目本身也是一个很好的例子 博客条目<article>及其评论<article>s也可以用<article>包裹 它是一些“完整”的东西，而不是一系列类似的东西
  • <section>中的<article>s就像一本书中的章节
  • <article>中的<section>s就像一卷中的诗（在一系列中）

<header>，<footer>和<main>如何适应？

  • 他们对切片没有任何影响
  • <header>和<footer> 它们允许您标记每个部分的区域 甚至在一个部分你可以多次使用它们 区别于本节的主要部分 仅限于作者的品味 <header> 可以标记本节的标题/名称 可能包含此部分的徽标 没有必要在该部分的顶部或上部 <footer> 可以标记本节的作者/作者 可以来到该部分的顶部 甚至可以高于<header>
  • <main> 只允许一次 标志着顶级部分的主要部分（即文件，<body>） 小节本身没有主要部分的标记 <main>甚至可以“隐藏”在文档的某些小节中，而文档的<header>和<footer>则不能（那个标记会标记该小节的页眉/页脚） 但它不允许在<article>部分3 有助于区分“真实的东西”与文档的非标题，非页脚，非主要内容，如果这在你的情况下是有意义的...

1来到头脑：轮廓，算法，隐式切片 2我使用<h*>作为<h1>，<h2>，<h3>，<h4>，<h5>和<h6>的简写 3 <main>或<aside>都不允许使用<nav>，但这并不奇怪。 - 实际上：<main>只能隐藏在（嵌套的）下行<section>部分或出现在顶层，即<body>

112
投票

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

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

您可以在this article on A List Apart找到更多信息。

62
投票

我建议阅读W3 wiki page about structuring HTML5：

<header>用于包含网站的标题内容。 <footer>包含网站的页脚内容。 <nav>包含导航菜单或页面的其他导航功能。

<article>包含一个独立的内容 感觉如果作为RSS项目联合，例如新闻项目。

<section>用于将不同的文章分组为不同的文章 目的或主题，或定义单个文章的不同部分。

<aside>定义与其周围的主要内容相关的内容块，但不是流程的核心。

它们包括我在这里清理过的an image：

在代码中，这看起来像这样：

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

让我们更详细地探讨一些HTML5元素。

<section>

<section>元素用于包含不同的功能区域或主题区域，或将文章或故事分成不同的部分。因此在这种情况下：“sidebar1”包含将在网站的每个页面上保留的各种有用链接，例如“订阅RSS”和“从商店购买音乐”。 “main”包含此页面的主要内容，即博客文章。在网站的其他页面上，此内容将更改。它是一个相当通用的元素，但仍然比普通的旧<div>具有更多的语义含义。

<article>

<article>与<section>有关，但明显不同。 <section>用于分组内容或功能的不同部分，而<article>用于包含相关的单独独立内容，例如个人博客文章，视频，图像或新闻项目。可以这样想想 - 如果你有很多内容，每个内容都适合自己阅读，并且在RSS提要中作为单独项目进行联合有意义，那么<article>适合于标记它们。在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为RSS提要中的项目进行联合，并且在独立阅读时有意义，因此<article>对他们来说是完美的：

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

简单吧？请注意，您也可以在文章中嵌套部分，这样做是有意义的。例如，如果这些博客文章中的每一篇都具有不同部分的一致结构，那么您也可以在文章中放置部分。它可能看起来像这样：

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header>和<footer>

正如我们上面已经提到的，<header>和<footer>元素的目的是分别包装页眉和页脚内容。在我们的特定示例中，<header>元素包含徽标图像，<footer>元素包含版权声明，但如果您愿意，可以添加更精细的内容。另请注意，每页上可以有多个页眉和页脚 - 以及我们刚才讨论的顶级页眉和页脚，你也可以在每个<header>中嵌套一个<footer>和<article>元素，在这种情况下它们只会适用于该特定文章。添加到上面的示例：

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

<nav>元素用于标记导航链接或其他构造（例如搜索表单），它将带您到当前站点的不同页面或当前页面的不同区域。其他链接（例如赞助商链接）不计算在内。你当然可以在<nav>中包含标题和其他结构元素，但它不是强制性的。

<aside>

您可能已经注意到我们使用<aside>元素来标记第二个侧边栏：包含最新演出和联系方式的侧边栏。这非常合适，因为<aside>用于标记与主流相关的信息，但不直接适合它。这个案子的主要内容都是关于乐队的！ <aside>的其他好选择是关于博客文章的作者，乐队传记或乐队唱片以及购买他们的专辑的链接的信息。

<div>离开哪里？

所以，在我们的网页上使用所有这些伟大的新元素，那些简陋的<div>的日子肯定会被编号？没有。事实上，<div>仍然有一个完全有效的用途。当没有其他更合适的元素可用于对内容区域进行分组时，您应该使用它，这通常是在纯粹使用元素将内容组合在一起以用于样式/视觉目的时。一个常见的例子是使用<div>来包装页面上的所有内容，然后使用CSS将所有内容集中在浏览器窗口中，或者将特定的背景图像应用于整个内容。

22
投票

[Qazxswpoi]

第7行。整个网站的部分？或者只是一个div？

都不是。造型：使用explanations in my “main answer”，它已经存在。对于切片/语义：<body>其效果与实用性相反。已包装内容的额外包装没有改善，但噪音。

第8行。每个部分都以标题开头？

不，作者选择将内容通常归纳为“标题”的位置。如果标题内容清晰可辨，没有额外的标记，它可能完全没有as detailed in my example HTML。这也是作者的选择。

第23行。这个div是对的吗？或者这必须是一个部分？

<header>可能是错的。这取决于意图：它是否仅仅是造型才是正确的。如果它是出于语义目的则是错误的：它应该是<div>而不是<article>。 as shown in my other answer也是正确的，如果它的造型和切片相结合。

<article>在这里看起来不对，因为在这之前或之后没有类似的部分，就像书中的章节一样。 （这是<section>的目的）。

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

没有为什么？

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

是的，有道理。

第26行。是否需要将h1-tag放在header-tag中？

没有。一个孤独的<section>元素可能永远不需要进入<h*>（但如果你愿意，它可以），因为它已经很清楚，它是即将到来的标题。 - 例如，如果<header>也包含标语（用<header>标记），那将是有意义的。

第43行。内容与主要文章无关，因此我认为这是一个部分而不是一个部分。

这是一个误解，<p>必须与周围的内容“切向相关”。关键是：如果内容只是“切向相关”或根本没有，请使用<aside>！

尽管如此，除了<aside>是一个不错的选择，<aside>可能仍然比<article>更好，因为“热门项目”和“新项目”不能像书中的两章那样被阅读。你可以完美地选择其中一个而不是另一个，就像一个替代的东西排序，而不是整体的两个部分。

第44行。没有标题的H2

是很棒的。

第53行。没有标题的部分

好吧，没有<section>，但<header>标题非常清楚，这部分的标题是标题。

第63行。包含所有（非相关）新闻项目

<h2>或<article>可能会更好。

第64行。标题为h2

已经讨论过了。

第65行。嗯，div还是部分？或者删除此div并仅使用article-tag

究竟！删除<aside>。

第105行。页脚:-)

很合理。

19
投票

根据<div>，有关文件应根据大纲进行标记。

在以下两个表中我展示：

  • 原始HTML及其大纲
  • 一个可能的预期大纲和HTML做到这一点

原始html（缩写） the explanation in my “main” answer 原始html与大纲相关 <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> 结果大纲 <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> 原件的轮廓是 绝对不是意图。

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

  • 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)
  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>

可能的预期大纲 <element MOVED_ATTRIBUTE=1> 修改过的HTML 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 <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> 修改后的HTML反映了 预期的大纲方式比 原本的。

17
投票

主要错误：你在整个文件中有“divitis”。 为什么这个？

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)

代替：

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

要对此标题进行样式化，请使用CSS层次结构：body> section> header> h1，body> section> header> h2

更多，...第63行：为什么标题包裹h2？如果您在标题中不包含任何其他元素，只需使用单个h2。 请记住，您的结构不是对文档进行样式化，而是构建一个自我解释的文档。

将此应用于文档的其余部分;祝好运 ;）

10
投票

为什么不在文章标签上添加item_1，item_2等ID？像这样：

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

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

另外，关于第26行的问题，我认为那里不需要<header>标签，我认为你可以省略它，因为它在“main-left”div中是独立的。如果它位于主要文章列表中，您可能只想为了一致性而包含<header>标记。

5
投票
  1. 部分应仅用于包装文档内的部分（如章节和类似部分）
  2. 带标题标签：NO。标题标记表示页眉的包装，不要与H1，H2等混淆。
  3. 哪个div？ ：d
  4. 是
  5. 来自W3C学校： 标签定义外部内容。外部内容可以是来自外部提供商的新闻文章，来自网络日志（博客）的文本，来自论坛的文本，或来自外部来源的任何其他内容。
  6. 不，标头标签有不同的用途。 H1，H2等代表文档标题H1是最重要的

我没有回答其他问题，因为你很难猜到你指的是什么。如果还有其他问题，请告诉我。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.