文章元素

2018-06-11 01:41:01

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

第8行。每个section以header开始？

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

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

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

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

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

第44行。H2没有header

第53行。没有header section

第63行。Div与所有（非相关）新闻项目

第64行。 header为h2

65行。嗯， div或section ？或者删除这个div ，只使用article -tag

第105行。页脚:-)

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

部分 - 用于将主题相关的内容分组在一起。听起来像是一个div元素，但事实并非如此。 div没有语义意义。在用段落元素替换所有div之前，请始终问自己：“所有内容都相关吗？”

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

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

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

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

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

此外，以下是对上述article中未找到的article的描述：

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

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

我写了3个答案：

这个解释（从这里开始）。

具体回答OP的问题。

改进了详细的HTML。

为了理解这里讨论的html元素的作用，你必须知道其中的一些部分是文档。为了创建大纲内容目录（TOC），可以根据HTML5大纲算法对每个和每个html文档进行分段。纲要通常不是可见的（现在），但作者应该使用html，以便生成的纲要反映他们的意图。

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

创建（明确）子部分

<section>部分

<article>部分

<nav>部分

<aside>部分

创建兄弟节或小节

未指定类型的部分使用<h*> 2（并非所有这些都参见下文）

关闭当前的显式（子）部分

部分可以命名为：

<h*>创建节名称自己

如果有第一个<h*>那么<section|article|nav|aside>部分将被命名

这些<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>就像书本章节

他们通常有兄弟姐妹（也许在不同的文件？）

他们在一起有共同的东西，就像书中的章节一样

一个作者，一个<article> ，至少在最底层

标准示例：单个博客评论

博客条目本身也是一个很好的例子

博客条目<article>及其评论<article>也可以用<article>包装

这是一些“完整”的东西，不属于一系列类似的东西

<section> <article>中的<section>就像书中的章节

<article> <section>中的<article> s就像一卷中的诗歌（在一个系列中）

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

他们对切片没有影响

<header>和<footer>

他们允许您标记每个部分的区域

即使在一个部分中，您也可以多次使用它们

以区别于本节的主要部分

仅受作者口味的限制

<header>

可能会标记本节的标题/名称

可能包含此部分的徽标

不需要在该部分的顶部或上部

<footer>

可能会标记本节的信用/作者

可以来到该部分的顶部

甚至可以在<header>之上

<main>

只允许一次

标志着最高级别部分的主要部分（即文档<body>即）

小节本身没有标记其主要部分

<main>甚至可以在文档的某些小节中“隐藏”，而文档的<header>和<footer>则不能（该标记会标记该小节的页眉/页脚）

但是<article>章节中不允许这样做

有助于从文档的非页眉，非页脚，非主要内容中区分出“真实的东西”，如果这对你的情况有意义的话......

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

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

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

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

链接地址: http://www.djcxy.com/p/31805.html

上一篇: HTML5 best practices; section/header/aside/article elements

下一篇: What is the common header format of Python files?