HTML5最佳做法; section / header / aside /文章元素

网上有足够的关于HTML5的信息(还有在stackoverflow上),但是现在我对“最佳实践”感到好奇。 部分/标题/文章等标签是新的,每个人对于何时/何地使用这些标签都有不同的意见。 那么你们如何看待下面的布局和代码呢?

网站布局

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行。每个sectionheader开始?

第23行。这个div正确的吗? 或者这是一个section

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

第25行article标签的正确位置?

第26行。是否需要把你的h1标签放在header -tag中?

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

第44行。H2没有header

第53行。没有header section

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

第64行。与h2的header

第65行。嗯, divsection ? 或者删除这个div ,只使用article -tag

第105行。页脚:-)

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

部分 – 用于将主题相关的内容分组在一起。 听起来像一个div元素,但事实并非如此。 div没有语义意义。 在用段元素replace所有的div之前,总是问自己:“所有的内容都是相关的吗?

抛开 – 用于切线相关的内容。 只是因为一些内容出现在主要内容的左侧或右侧,没有足够的理由使用搁置元素。 问问自己,是否可以删除旁边的内容,而不会降低主要内容的含义。 Pullquotes是切线相关内容的一个例子。

标题 – 标题元素和标题(或标头)的普遍接受用法之间存在着至关重要的区别。 在页面中通常只有一个标题或“标头”。 在HTML5中,您可以拥有尽可能多的内容。 规范将其定义为“一组介绍或导航辅助工具”。 您可以在网站的任何部分使用标题。 事实上,你可能应该在你的大部分章节中使用标题。 该规范将节元素描述为“内容的主题分组,通常带有标题”。

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

页脚 – 听起来像是对位置的描述,但不是。 页脚元素包含关于其包含元素的信息:谁写的,版权,相关内容的链接等等。而我们通常对整个文档有一个页脚,HTML5允许我们在页面中也有页脚。

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

另外,这里是关于article的描述,在上面的源代码中找不到:

文章 – 用于指定独立,自足内容的元素。 一篇文章应该是有意义的。 在用文章元素replace所有的div之前,总是问自己:“是否可以从网站的其他部分独立读取?

不幸的是,到目前为止(包括投票数最多)给出的答案要么是“正义”的常识,要么完全错误,要么混淆不清。 没有关键的关键字1popup!

我写了3个答案:

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

为了理解这里讨论的html元素的作用,你必须知道其中的一些部分是文档。 为了创build大纲内容目录(TOC),可以根据HTML5大纲algorithm对每个HTML文档进行分段 。 纲要通常不是可见的(现在),但是作者应该使用html来使得结果反映他们的意图。

你可以创build具有这些元素的部分,而不是别的

  • 创build(明确的)小节
    • <section>部分
    • <article>部分
    • <nav>部分
    • <aside>部分
  • 创build兄弟节或小节
    • 未指定types的部分与<h*> 2 (并非所有这些,请参见下文)
  • closures当前的显式(子)部分

部分可以被命名为:

  • <h*>创build节名称自己
  • 如果有第一个<h*>那么<section|article|nav|aside>部分将被命名
    • 这些<h*>是唯一不自己创build节的

部分还有一件事情:下面的上下文(即元素)创build“轮廓边界”。 他们所包含的任何部分都是私人的:

  • 该文件本身与<body>
  • 使用<td>表格单元格
  • <blockquote>
  • <details><dialog><fieldset><figure>
  • 没有别的

example HTML
<body> <h1>page title</h1> <nav> <h1>navigation</h1> </nav> <aside> <h1>tangentially related to the topic at hand</h1> </aside> <article></article> <article> <h1>this one has a name again</h1> </article> <h2>untyped section, sibling of the last article</h2> </body>
1. page title 1.1. navigation 1.2. tangentially related to the topic at hand 1.3. (unnamed article) 1.4. this one has a name again 1.5. untyped section, sibling of the last article

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>就像书本章节
    • 他们通常有兄弟姐妹(也许在不同的文件?)
    • 他们在一起有一些共同的东西,就像书中的章节一样
  • 一个作者,一个<article> ,至less在最底层
    • 标准示例:单个博客评论
    • 博客条目本身也是一个很好的例子
    • 博客条目<article>及其评论<article>也可以用<article>包装
    • 这是一些“完整”的东西,而不是一系列相似的一部分
  • <section> <article>中的<section>就像书中的章节
  • <article> <section>中的<article>就像一个音乐中的诗(在一个系列中)

<header><footer><main>适应?

  • 他们对分区没有影响
  • <header><footer>
    • 他们允许您标记每个部分的区域
    • 即使在一个部分,你可以有几次
    • 以区别于本节的主要部分
    • 仅受作者口味的限制
    • <header>
      • 可以标记本节的标题/名称
      • 可能包含此部分的徽标
      • 不需要在该部分的顶部或上部
    • <footer>
      • 可能标记本节的信用/作者
      • 可以来到该部分的顶部
      • 甚至可以在<header>之上
  • <main>
    • 只允许一次
    • 标志着最高级别部分的主要部分(即文档<body>即是)
    • 小节本身没有标记的主要部分
    • 在文档的某些小节中, <main>甚至可以“隐藏”,而文档的<header><footer>不能(该标记会标记该小节的页眉/页脚)
      • 但是在<article>3节中是不允许的
    • 有助于从文件的非标题,非页脚,非主要内容中区分出“真实的东西”,如果这对您的情况有意义的话…

1来介意:轮廓,algorithm,隐式切片
2我使用<h*>作为<h1><h2><h3><h4><h5><h6>
3<aside><nav> <main>不允许<main> ,但这并不奇怪。 – 实际上: <main>只能隐藏(嵌套)降序<section>部分或出现在顶层,即<body>

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

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

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

您可以在A List Apart的这篇文章中find更多信息。

我build议阅读关于结构化HTML5的W3维基页面 :

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

包含独立的一段内容
感觉是否合并为RSS项目,例如新闻项目。

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

<aside>定义与其周围的主要内容相关的内容块,但不是其中的主要内容。

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

HTML5

在代码中,这看起来像这样:

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

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

<section>

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

<article>

<article><section> ,但明显不同。 鉴于<section>是用于对不同部分的内容或function进行分组, <article>用于包含相关的单独独立内容片段,例如单个博客post,video,图片或新闻项目。 这样想 – 如果你有一些内容项目,每一项内容都适合自己阅读,并且在RSS feed中作为单独项目是有意义的,那么<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>元素包含一个logo图像,而<footer>元素包含一个版权声明,但是如果你愿意,你可以添加更详细的内容。 另外请注意,每个页面上可以有多个页眉和页脚,以及我们刚刚讨论的顶层页眉和页脚,也可以在每个<article>嵌套一个<header><footer>元素,在这种情况下,他们只适用于特定的文章。 join我们上面的例子:

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

<nav>

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

<aside>

您可能已经注意到我们使用了<aside>元素来标记第二条边栏:包含最新演出和联系方式的边栏。 这是非常合适的,因为<aside>用于标记与主要stream程相关的信息,但不直接适用。 而这个案例的主要内容就是关于乐队! 关于<aside>其他好的select将是关于博客文章的作者,乐队传记,或带有购买他们专辑的链接的乐队唱片的信息。

那个离开<div>在哪里?

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

主要的错误是:你在整个文档中都有“divitis”。
为什么这个?

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

代替:

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

要设置这个头文件的样式,使用CSS层次结构:body> section> header> h1,body> section> header> h2

更多,…第63行:为什么标题换行h2? 如果你不在头文件中包含更多的元素,只需要使用一个h2。
请记住,您的结构不是要将文档风格化,而是要自我解释构build一个文档。

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

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

第7行围绕整个网站? 还是只有一个div

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

第8行。每个部分以标题开始?

不,作者select将内容通常概括为“标题”。 如果这个标题内容清晰可辨,没有额外的标记,它可能完全没有<header> 。 这也是作者的select。

第23行。这个div是正确的吗? 或者这是一个部分

<div>可能是错误的。 这取决于意图:只是它的样式可能是正确的。 如果是为了语义目的,这是错误的:它应该是一个<article>而不是我的另一个答案中所示 。 如果将样式和切片结合起来, <article>也是正确的。

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

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

没有为什么?

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

是的,有道理。

第26行。是否需要把你的h1标签放在header -tag中?

没有。一个孤立的<h*>元素可能永远不需要进入<header> (但它可以,如果你想的话),因为已经清楚它是即将到来的标题。 – 例如,如果<header>也包含一个标语(标有<p> ),这将是有意义的。

第43行。内容与主要文章无关,所以我决定这是一个部分,而不是放在一边

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

尽pipe如此,除了<aside>是一个不错的select之外, <article>可能仍然比一个<section>因为“hot items”和“new items”不能像书中的两个章节那样被阅读。 你可以完全去找其中的一个,而不是另一个sorting的东西,而不是整个的两个部分。

第44行。H2没有标题

是很棒的。

第53行。没有标题的 部分

那么,没有<header> ,但是<h2> -heading很清楚这个部分的哪一部分是头部。

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

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

第64行。与h2的 标题

已经讨论过了。

第65行。嗯, div 或者删除这个div ,只使用文章 -tag

究竟! 删除<div>

第105行。 页脚 🙂

非常合理。

根据我在“主要”回答中的解释,应该按照大纲标注有关文件。

在下面的两个表中,我显示:

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

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

与大纲相关的原始html
<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)

原来的轮廓是
肯定不是打算的。

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

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

可能的预期轮廓
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

修改后的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>

导致轮廓
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)

修改的HTML反映了
打算大纲的方式比
原本的。

为什么不在商品标签上使用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>标记。

  1. 部分应该只用来包装文档中的一个部分(如章节和类似部分)
  2. 标题标签:NO。 标头标记表示页眉的包装,不能与H1,H2等混淆
  3. 哪个div? :d
  4. 来自W3C学校:

    标签定义了外部内容。 外部内容可以是来自外部提供者的新闻文章,也可以是来自networking日志(博客)的文本,来自论坛的文本或来自外部来源的任何其他内容。

  5. 不,标题标签有不同的用途。 H1,H2等代表文档标题H1是最重要的

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

这是我工作的例子

在这里输入图像描述

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

一篇文章需要能够自立并且仍然有意义或者完整。 由于其不完整或只是一个摘录,它不能成为一篇文章,它更多的是一个部分。

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

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

请参阅下面的https://stackoverflow.com/a/17935666/2488942链接到w3规范,其中包括一个例子(不像我以前看过的)。;

但是然后…. 这是一个很好的文章,感谢@Fez。

我最初的回应是:

w3规格的结构:

4.3.4部分

4.3.4.1身体元素

4.3.4.2节元素

4.3.4.3导航元素

4.3.4.4文章元素

….

对我来说这section是比article更高的层次。 正如本答案 section所述, 将主题相关的内容分组。 在我看来,一篇文章中的内容无论如何都是主题性的,因此,至less对我来说,这也意味着与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 

“第23行,这是正确的? 或者这是一个部分?“

也没有一个main标签用于这个目的,每个页面只允许使用一次,应该用作主要内容的包装(与侧边栏或站点范围的标题相对)。

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

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

我想澄清这个问题,如果我错了,请纠正我们以Facebook Wall为例

墙上有“section”标签,表示它与页面分开。

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

然后我们有一个单独的post,在“部分”标签下。

3.我们标题为“X用户发布这个”,为此我们可以使用“标题”标签。

4.然后里面我们有三个部分是图像/文本,像共享评论button和评论框。

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

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

在这里输入图像描述