main,aside,header,articleタグの使い方について

最近、マトモなWebページを作る必要が出てきて、それにともなって知識程度のHTMLをもう少しマトモに使えるようにしようと思い、勉強中なのですが、main、aside、articleタグについて少々疑問に思うことがあります。

mainタグやasideタグ、articleタグについてググるとそれぞれ、記事内のメインコンテンツを括る、サイドバーを括る、記事本文を括るということがわかりました。
その一方で、以下のようなデザインのためのdivと記事のアノテーション的役割を果たすmain、aside、articleタグを用いている例をよく見かけます。（私的な範囲で幾つかのWebページを見てどういう風に使っているのか実際に確認した程度ですが…）

HTML
1<!DOCTYPE html>
2<!-- ヘッダとかもろもろ -->
3<body>
4  <!-- デザインのために多重にdivをネスト(今回は省略) -->
5  <div>
6    <div class="header">
7      <header>
8        <!-- ヘッダ部 -->
9      </header>
10    </div>
11    <div class="wrapper">
12      <div class="main-contents">
13        <main>
14          <article>
15            <!-- 記事 -->
16          </article>
17        </main>
18      </div>
19      <div class="sidebar">
20        <aside>
21          <!-- サイドバー -->
22        </aside>
23      </div>
24    </div>
25    <div class="footer">
26      <footer>
27        <!-- フッタ部 -->
28      </footer>
29    </div>
30  </div>
31</body>

このソースの場合そもそもheaderやmainタグを括るデザインのためのdivは不要なのではないでしょうか？
css側でheaderやmain、asideに対して直接padding等を設定すれば十分じゃないのでしょうか？
この点についてどうしてdivで括っているのかご教示いただけないでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

HTML5に対応していないブラウザがあったころの名残ですね。

【2015年コーディングはHTML5で。IE8以下の対策も忘れずに】
http://scene-live.com/page.php?page=4

以下のような記述をすると、IE8以下では思い通りのレイアウトになりません。

ブラウザがタグを認識してくれないからです。

過去の古いブラウザに対応させる必要がない場合、下記のように書いたら良いと思います。（クラスのつけ方は適当です）

HTML
1<!DOCTYPE html>
2<!-- ヘッダとかもろもろ -->
3<body>
4	<header class="site-header">
5		<!-- ヘッダ部 -->
6	</header>
7	<div class="wrapper">
8		<main class="main-contents">
9			<article>
10				<!-- 記事 -->
11			</article>
12		</main>
13		<aside class="sidebar">
14			<!-- サイドバー -->
15		</aside>
16	</div>
17	<footer class="site-footer">
18		<!-- フッタ部 -->
19	</footer>
20</body>

投稿2017/08/15 14:59

kei344

総合スコア69407

elda

2017/08/15 15:20

あー、そういうことですか確かに過去のブラウザに対応する必要があるなら必須ですねご回答いただきありがとうございました

行動規範の内容に同意します

kei344さんがdivを使う理由をご説明されているので、要素に対して直接スタイルを指定せずにクラス名をつける理由を説明します。

header aside 要素などは1つのドキュメント(ページ)に複数使用することが可能です。そのため、要素に対して直接スタイルを指定した場合、1つの header 要素に対してスタイルを指定したつもりであっても、ページ内すべての header 要素に対して同じスタイルが適応されてしまいます。

独自に決められるクラス名を付けたほうが、スタイルの適応範囲をコントロールしやすいためです。

投稿2017/08/15 15:23

syuus

総合スコア403

elda

2017/08/15 15:33

asideはともかく、headerが複数ある場合が想像しづらいのですが、どういう状況なのでしょうか？ header、footerを2つ配置するよりそれぞれの要素の内側をdivで分割というのがマトモな気がします。

syuus

2017/08/15 15:54 編集

header要素は、いわゆるサイトのヘッダー部分という意味を持っているわけではありません。 bodyに対するheaderはサイトのヘッダー部分としての性格を持ち合わせていますが、article内のheaderはコンテンツに対するヘッダー(前置きやタイトル)のように扱われます。下記のURLに詳しい説明があります。 https://momdo.github.io/html5/sections.html#the-header-element

elda

2017/08/15 16:34

なるほど、そういうことでしたか

行動規範の内容に同意します

あなたの回答