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最佳作法；部分/標題/旁邊/文章元素