HTML5最佳作法；部分/标题/旁边/文章元素

时间 2020-01-16

标签 html5 html 最佳作法部分标题旁边文章元素栏目 HTML5 繁體版

原文原文链接

网上有足够的有关HTML5的信息（以及关于stackoverflow的信息），可是如今我对“最佳实践”感到好奇。诸如section / header / article的标签是新标签，每一个人对于什么时候/何地应使用这些标签都有不一样的见解。那么大家如何看待如下布局和代码？ html

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

第8行。每一个section以header开头？浏览器

第23行。这个div对的吗？仍是这必须是一个section ？ app

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

第25行正确的地方的article标签？布局

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

线43的内容不相关的主要文章，因此我决定，这是一个section ，而不是aside 。网站

第44行。H2（不含header ui

第53行。没有header section this

第63行。Div包含全部（无关）新闻项

管线64 header用H2

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

第105行。页脚:-)

#1楼

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

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

您能够在A List Apart上的这篇文章中找到更多信息。

#2楼

编辑：不幸的是我必须纠正本身。

请参阅下面的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导航元素

4.3.4.4文章元素

....

对我来讲，该section比article水平高。正如提到这个答案 section组主题相关的内容。我认为文章中的内容不管如何在主题上都是相关的，所以，至少对我而言，这也代表与article相比，本section分组水平更高。

我认为它应该像这样使用：

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

#3楼

我建议阅读有关构造HTML5的W3 Wiki页面：

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

<article>包含一个独立的内容，可使
是否联合为RSS项目（例如新闻项目）。

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

<aside>定义一个内容块，该内容块与其周围的主要内容相关，但并不是其主要内容。

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

在代码中，以下所示：
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>
让咱们更详细地探讨一些HTML5元素。

<section>

<section>元素用于包含功能或主题区域的不一样区域，或将文章或故事分解为不一样的区域。所以，在这种状况下：“ sidebar1”包含各类有用的连接，这些连接将持续存在于网站的每一个页面上，例如“订阅RSS”和“从商店购买音乐”。 “主要”包含此页面的主要内容，即博客文章。在网站的其余页面上，此内容将更改。这是一个至关通用的元素，但与普通的<div>相比，它仍然具备更多的语义含义。

<article>

<article>与<section> ，但有明显不一样。 <section>用于对内容或功能的不一样部分进行分组，而<article>用于包含相关的独立内容，例如单个博客文章，视频，图像或新闻项目。能够这样考虑-若是您有不少内容项，每一个内容都适合本身阅读，而且能够在RSS feed中做为单独的项目进行联合，那么<article>就适合标记他们起来。在咱们的示例中， <section id="main">包含博客条目。每一个博客条目都适合于做为RSS提要中的项目进行联合，而且在脱离上下文独立阅读时是有意义的，所以<article>对他们来讲是完美的：
<section id="main"> <article></article> <article></article> <article></article> </section>
简单吧？请注意，虽然您也能够在文章内嵌套节，但这样作颇有意义。例如，若是这些博客文章中的每一篇都有不一样部分的一致结构，那么您也能够在您的文章中放置部分。它可能看起来像这样：
<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>
<header>和<footer>

正如咱们上面已经提到的， <header>和<footer>元素的目的是分别包装页眉和页脚内容。在咱们的特定示例中， <header>元素包含徽标图像，而<footer>元素包含版权声明，可是您能够根据须要添加更多详细的内容。还要注意，每一个页面上能够有多个页眉和页脚-以及咱们刚刚讨论的顶层页眉和页脚，还能够在每一个<article>内嵌套一个<header>和<footer>元素，在这种状况下，它们仅适用于该特定文章。添加到上面的示例中：
<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在浏览器窗口中居中全部内容，或将特定的背景图像应用于整个内容。

#4楼

这是我工做的例子

#5楼

„第23行。这个div是对的吗？仍是这必须是一个部分？”

二者都没有-为此目的有一个main标签，每一个页面只容许使用一次，而且应将其用做主要内容的包装（与侧边栏或站点范围的标题相反）。

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

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

HTML5最佳作法； 部分/标题/旁边/文章元素

#1楼

#2楼

#3楼

#4楼

#5楼

HTML5最佳作法；部分/标题/旁边/文章元素