Code
2023-07-03 07:00:04

HTML5最佳实践;部分/头/ /条元素

网络上有足够多关于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行。围绕整个网站的部分?还是只有div?

8号线。每个部分都以标题开始?

第23行。这个div对吗?或者这一定是一个部分?

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

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

第26行。你的h1-tag需要放在head -tag里面吗?

行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。

行44。无头H2

线53。没有标头的节

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

第64行。带有h2的标头

第65行。嗯，div还是section?或者删除这个div，只使用article标签

第105行。页脚:-)

当前回答

”第23行。这个div对吗?或者这一定是一个部分?”

都不是——有一个主标记用于此目的，它每页只允许使用一次，并且应该用作主要内容的包装器(与侧边栏或站点范围的标题相比)。

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

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

2014-08-27 13:02:31

其他回答

我认为你不应该在新闻摘要中使用标签(第67、80、93行)。 可以使用section，也可以使用div。

一篇文章需要能够站在自己&仍然有意义或完整。由于它不完整或只是一个摘录，它不可能是一篇文章，它更像是一个章节。

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

2011-07-19 11:38:23

Section should be used only to wrap a section inside a document (like chapters and similar) With header tag: NO. Header tag represents a wrapper for page header and is not to be confused with H1, H2, etc. Which div? :D Yes From W3C Schools: The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source. No, header tag has a different use. H1, H2, etc. represent document titles H1 being the most important

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

2011-01-24 11:09:45

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

2016-12-20 23:49:36

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

第7行。围绕整个网站的部分?还是只有div?

既不。样式:使用<body>，它已经在那里了。对于section /semantics:正如我的示例HTML中所详细描述的那样，它的效果与实用性相反。对已经包装的内容使用额外的包装器并没有改善，只会产生噪音。

8号线。每个部分都以标题开始?

不，在哪里放置通常被总结为“标题”的内容是作者的选择。如果该标题内容无需额外标记即可清晰识别，则可以完全保留没有<header>的内容。这也是作者的选择。

第23行。这个div对吗?或者这一定是一个部分?

<div>可能是错误的。这取决于你的意图:是否只是为了设计样式，它可能是正确的。如果是出于语义目的，那就错了:它应该是<article>，而不是像我的另一个答案所示的那样。<article>也是正确的，如果它同时用于样式化和分段。

<section>在这里看起来错误，因为在这个之前或之后没有类似的部分，就像一本书中的章节一样。(这是<section>的目的)。

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

不。为什么?

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

是的，有道理。

第26行。你的h1-tag需要放在head -tag里面吗?

不。单独的<h*>元素可能永远不需要放在<header>中(但如果你想的话，它可以)，因为它已经很清楚地表明它是即将到来的内容的标题。例如，如果<header>还包含一个标语行(用<p>标记)，这是有意义的。

行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。

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

尽管如此，除了<aside>是一个不错的选择之外，<article>可能仍然比<section>更好，因为“热门项目”和“新项目”不应该像一本书中的两个章节一样阅读。你完全可以选择其中一个，而不是另一个就像对一个东西的另一种排序，而不是一个整体的两个部分。

行44。无头H2

是伟大的。

线53。没有标头的节

好吧，这里没有<header>，但是<h2>-heading清楚地显示了这部分中的哪个部分是头文件。

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

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

第64行。带有h2的标头

讨论了。

第65行。嗯，div还是section?或者删除这个div，只使用article标签

完全正确!删除<div>.;

第105行。页脚:-)

很合理。

2014-11-02 03:58:02 
<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>

参考:nav元素

2018-05-28 01:40:35

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1