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

Question

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

网上有足够的关于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>

Run Code Online (Sandbox Code Playgroud)

7号线section围绕整个网站？还是只有一个div？

第8行.每个都section以一个header？

第23行.这是div对的吗？或者这必须是一个section？

第24行div.使用a分割左/右列.

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

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

第43行.内容与主要文章无关,所以我认为这是一个section而不是一个aside.

第44行.没有 header

第53行.section没有header

第63行.包含所有(非相关)新闻项目

第64行.header用h2

第65行.嗯,div还是section？或者删除它div并仅使用article-tag

第105行.页脚:-)

Answer 1

Nat*_*.B. 475

实际上,在页眉/页脚方面你是完全正确的.以下是有关如何/应该使用每个主要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之前,总是问自己:"是否可以独立于网站的其他部分阅读它？"

对我来说,这个答案得到如此多的投票是一个谜语:它没有谈论`<article>`元素,它没有对比提到的元素,也没有对它们进行分组.答案没有提供"最佳实践",也没有回答OP的任何明确问题! (61认同)
@RobertSiemer对我来说,这也是一个谜,你的评论得到24个赞成票和问题只有6个downvotes ... (2认同)

Answer 2

Rob*_*mer 215

不幸的是,到目前为止给出的答案(包括投票最多的)要么是"只是"常识,要么是错误的,要么是最让人困惑的.没有关键关键字¹弹出!

我写了3个答案:

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

要理解这里讨论的html元素的作用,你必须知道其中一些部分是文档.每个html文档都可以根据HTML5大纲算法进行分段,以便创建一个大纲-⁠或内容表(TOC).大纲通常不可见(这些日子),但是作者应该使用html,使得结果大纲反映他们的意图.

您可以创建段正是这些元素和没有别的:

创建(显式)子部分
- <section> 部分
- <article> 部分
- <nav> 部分
- <aside> 部分
创建兄弟部分或子部分
- 带有<h*>^²的未指定类型的部分(不是全部执行此操作,请参见下文)
升级关闭当前显式(子)部分

部分可以命名为:

<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>也可以用<article>
- 它是一些"完整"的东西,而不是一系列类似的东西
<section>s <article>就像书中的章节一样
<article>S IN一个<section>像在体积诗(一系列内)

如何做<header>,<footer>以及<main>适合吗？

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

^{¹在脑海中谈到:大纲,算法,隐切片}
^{²我使用<h*>的简写<h1>,<h2>,<h3>,<h4>,<h5>和<h6>}
^{³既不是<main>允许<aside>或者<nav>,但没有惊喜.- 实际上:<main>只能隐藏在(嵌套的)降序<section>部分或出现在顶层,即<body>}

答案就像一首诗本身.我最喜欢的部分是:"文章中的章节就像书中的章节,章节中的文章就像卷中的诗篇" - 我见过的最好,最直观的"文章"和"部分"解释! (26认同)
这是没有样板的广泛知识，总结为几个要点。谢谢你的分享！有时在 SO 上，最佳答案既不是公认的也不是评分最高的。 (3认同)
我知道这是陈词滥调,但是,"这应该是公认的答案!".脚注和一切!谢谢! (2认同)
由于这似乎是我们关于这个问题的权威帖子，我想指出一件尚未解决的重要事情：[MDN 告诉我们](https://developer.mozilla.org/en-US/docs/Web /Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots) “在网络浏览器或辅助技术中没有**建议的大纲算法**的实现；它**......不应该用于向用户传达文档结构**。建议作者使用标题等级 (h1-h6) 来传达文档结构。” 当涉及到语义切片时，我是唯一一个认为这是一个巨大警告的人吗？ (2认同)

Answer 3

cil*_*ler 111

div元素可以用新元素替换:header,nav,section,article,aside和footer.

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

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

Run Code Online (Sandbox Code Playgroud)

您可以在A List Apart上找到有关此文章的更多信息.

这个样板结构不值得在这个页面上的空间.1)所提到的HTML元素都不与文档中的任何位置相关联.2)它错误地暗示<header>和<footer>是文档级元素.3)它错误地暗示<section>仅用作<article> -child.@DanDascalescu (22认同)
@Flimm，是的，他们可以。我的观点是：答案并没有错——只是答案不多。 (4认同)
不能同意@RobertSiemer.这仍然是关于HTML5元素的最常见的误解之一,并且正在成为我们心爱的标记语言的语义障碍. (2认同)

Answer 4

Jus*_*tin 63

我建议阅读关于构建HTML5的W3 wiki页面:

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

<article>包含一个独立的内容,
如果将其作为RSS项目进行联合,则会有意义,例如新闻项目.

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

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

它们包括我在这里清理过的图像:

HTML5

在代码中,这看起来像这样:
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
Run Code Online (Sandbox Code Playgroud)
让我们更详细地探讨一些HTML5元素.

<section>

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

<article>

<article>与...有关<section>,但明显不同.然而<section>,用于对不同的内容或功能部分进行分组,<article>用于包含相关的单独独立内容,例如个人博客帖子,视频,图像或新闻项目.可以这样考虑 - 如果你有许多内容项目,每个内容都适合自己阅读,并且在RSS提要中作为单独的项目进行联合是有意义的,那么<article>它们适合于标记它们.在我们的示例中,<section id="main">包含博客条目.每个博客条目都适合作为RSS提要中的项目进行联合,并且在单独阅读时,在上下文中有意义,因此<article> 对他们来说是完美的:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Run Code Online (Sandbox Code Playgroud)
简单吧？请注意,您也可以在文章中嵌套部分,这样做是有意义的.例如,如果这些博客文章中的每一篇都具有不同部分的一致结构,那么您也可以在文章中放置部分.它可能看起来像这样:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)
<nav>

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

<aside>

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

那离开了哪里<div>？

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

最好添加“main”标签。将其放置在哪里将根据页面上的独特内容来决定。在这个例子中，我想我会把它放在中心“部分”周围。了解更多：https://www.w3.org/TR/2012/WD-html-main-element-20121217/“文档的主要内容部分包括该文档特有的内容，不包括跨文档重复的内容一组文档，例如站点导航链接、版权信息、站点徽标和横幅以及搜索表单。” (2认同)

Answer 5

Rob*_*mer 22

[ 我的"主要答案"中的解释 ]

线路7 节整个网站的身边？或者只是一个div？

都不是.造型:使用<body>,它已经在那里.对于切片/语义:如我的HTML示例所详述,其效果与实用性相反.已包装内容的额外包装没有改善,但噪音.

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

不,作者选择将内容通常归纳为"标题"的位置.如果标题内容清晰可辨,没有额外的标记,它可能完全没有<header>.这也是作者的选择.

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

这<div>可能是错的.这取决于意图:它是否仅仅是造型才是正确的.如果它是语义的目的是错误的:它应该是一个<article>,而不是因为我在其他的答案中所示.<article>如果是造型和切片相结合也是对的.

<section>这里看起来不对,因为在这之前或之后没有类似的部分,就像书中的章节一样.(这是目的<section>).

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

没有为什么？

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

是的,有道理.

第26行.是否需要将h1 -tag放在标题栏中？

没有.一个单独的<h*>元素可能永远不需要进入<header>(但如果你想,它可以),因为它已经很清楚它是将要发生的事情的标题.- 例如,如果<header>它还包含标语(标有<p>),那将是有意义的.

线43的内容不相关的主要文章,所以我决定,这是一个部分,而不是放在一边.

误解是<aside>必须与周围的内容"切向相关 ".关键是:<aside>如果内容只是" 切向相关"或根本没有,请使用;

尽管如此,除了<aside>作为一个不错的选择之外,<article>可能仍然比<section>"热门项目"和"新项目" 更好,因为书中的两个章节不会被阅读.你可以完美地选择其中一个,而不是另一个类似于某种东西的替代排序,而不是整体的两个部分.

第44行.没有标题的H2

是很棒的.

第53行.没有标题的部分

嗯,没有<header>,但是<h2>-heading很清楚,本节中的哪一部分是标题.

63.行股利与所有(非关联)的新闻项目

<article>或者<aside>可能会更好.

第64行.标题为h2

已经讨论过了.

第65行.嗯,div还是部分？或者删除此div并仅使用文章 -tag

究竟!删除<div>.

第105行.页脚 :-)

很合理.

@ChristianStrempfer它实际上是有帮助的,因为许多人不来这里阅读OP的具体问题的具体答案(这个答案),而是阅读更多关于手头的主题(我的主要答案). - 我相信有一个巨大的答案,我甚至不会仅凭主要答案获得选票. - 你有什么建议？ (5认同)

Answer 6

Rob*_*mer 19

根据我的"主要"答案中的解释,有关文件应根据大纲进行标记.

在以下两个表中我展示:

原始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.

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

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<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.

Answer 7

Cov*_*ovi 17

主要错误:你在整个文件中有"divitis".
为什么这个？

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

Run Code Online (Sandbox Code Playgroud)

代替:

<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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

使用h1和h2作为徽标和语言对我来说没有意义.右侧的小小语言按钮应该是此页面上第二重要的内容/信息？如果你把你的徽标放在一个h1而不是一个搜索机器人会发现每个页面的主要内容是相同的(在我的脑海里很无聊).另请参阅@MeanEYE答案以了解h1和h2的使用.除了需要语义之外,如果ID是非语义的,则使用RDFa.你的方式使CSS选择器变慢:https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors (11认同)
@superUntitled` <hgroup>`[不再是HTML5的一部分](http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/) (4认同)

Answer 8

Mat*_*wne 10

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

我只是按照原始的例子,展示如何在没有不必要的包装器div的情况下完成同样的事情.ID可能存在于任何原因......一方面,可能存在指向它们的锚链接. (2认同)

Answer 9

Mea*_*EYE 5

部分应仅用于包装文档内的部分(如章节和类似部分)
带标题标签:NO.标题标记表示页眉的包装,不要与H1,H2等混淆.
哪个div？:d
是
来自W3C学校:

标签定义外部内容.外部内容可以是来自外部提供商的新闻文章,来自网络日志(博客)的文本,来自论坛的文本,或来自外部来源的任何其他内容.
不,标头标签有不同的用途.H1,H2等代表文档标题H1是最重要的

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

检查你的来源.w3c学校网站没有指定`article`必须来自*external*source.http://www.w3schools.com/html5/tag_article.asp (3认同)

Answer 10

Iva*_*van 5

这是我工作的例子

在此输入图像描述

Answer 11

*_*лов 5

<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>

Run Code Online (Sandbox Code Playgroud)

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

归档时间：	15 年前
查看次数：	406227 次
最近记录：	6 年，10 月前