☰

HTML5 best practices; section/header/aside/article elements [closed] Ask Question

tag-icon • tag-icon html header article
HTML5 best practices; section/header/aside/article elements [closed] Ask Question

There is enough information about HTML5 on the web (and also on stackoverflow), but now I'm curious about the "best practices". Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these tags. So what do you guys think of the following layout and code?

ウェブサイトのレイアウト

  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>

line 7. section around the whole website? Or only a div?

line 8. Each section start with a header?

line 23. Is this div right? or must this be a section?

line 24. Split left/right column with a div.

line 25. Right place for the article tag?

line 26. Is it required to put your h1-tag in the header-tag?

line 43. The content is not related to the main article, so I decided this is a section and not a aside.

line 44. H2 without header

line 53. section without header

line 63. Div with all (non-related) news items

line 64. header with h2

line 65. Hmm, div or section? Or remove this div and only use the article-tag

line 105. Footer :-)

ベストアンサー1

Actually, you are quite right when it comes to header/footer. Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):

section – Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

ヘッダー– ヘッダー要素と、一般的に受け入れられているヘッダー (またはマストヘッド) の使用法には、決定的な違いがあります。通常、ページにはヘッダーまたは「マストヘッド」が 1 つだけあります。HTML5 では、必要な数だけヘッダーを使用できます。仕様では、ヘッダーを「導入またはナビゲーション補助のグループ」と定義しています。サイトのどのセクションでもヘッダーを使用できます。実際、ほとんどのセクションでヘッダーを使用する必要があるでしょう。仕様では、セクション要素を「通常は見出しが付いた、コンテンツのテーマ別のグループ」と説明しています。

nav – 主要なナビゲーション情報用です。リンクのグループをまとめるだけでは、nav 要素を使用する理由にはなりません。一方、サイト全体のナビゲーションは、nav 要素に属します。

フッター– 役職の説明のように聞こえますが、そうではありません。フッター要素には、その要素に関する情報 (作成者、著作権、関連コンテンツへのリンクなど) が含まれます。通常はドキュメント全体に 1 つのフッターがありますが、HTML5 ではセクション内にもフッターを設定できます。

ソース：https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

articleさらに、上記のソースには記載されていないに関する説明を次に示します。

article – 独立した自己完結型のコンテンツを指定する要素に使用します。記事はそれ自体で意味を成す必要があります。すべての div を article 要素に置き換える前に、常に「Web サイトの残りの部分から独立して読むことは可能か」と自問してください。

おすすめ記事