HTML5を使ってウェブサイトを作っています。
mainタグやheader,footerタグを使おうと思っているのですが、有名なサイトをみると
<div id="header">
などとなっておりそれぞれのタグを使っていません。
どちらを使用するべきなのでしょうか。
教えて下さい。
作っているWebサイトのサポート環境次第だと思います。
ご存知のとおりheader,main,footerなどはHTML5から登場した新しい要素ですので、HTML5非対応のWebブラウザー(例えばIE8以下)では対応していません。HTML5非対応のWebブラウザーでもhtml5shivなどを利用すればHTML5に擬似対応させることも可能ではありますが、結構無理矢理なことをしているのであまり好ましくないと思います。
なので、私ならHTML5非対応のWebブラウザーをサポートする場合(*1)はdiv要素、そうでなければ新しい要素を使うんじゃないかな~と思います。
(*1)サポートが終了したはずのIE8以下に対応しなければいけない時もあるんです。
「適切なタグを適切に使用すべき」と回答差し上げます。
有名サイトの行為が最善であるかはわかりません。
過去に作成されたサイトで、予算がつかないから拡張のみ行いリファクタリングをしない......
投げた先のエンジニアのレベルが低い、または過去の資産を使いまわしている......
知識に疎い、または手段に拘らないタイプである......
等々、勘ぐれば無数に理由は付けることが可能です。
また逆に、Html5の仕様に従うことが不適切なシーンであれば、
新しいタグではなく、過去のノウハウに従うことも良いと思います。
※もし有名サイトに色々と倣う場合、
エンジニアが有名な会社様のサイトに倣うのが良いと思います。
header { position: relative; margin: 25px; padding: 25px; height: 140px; background-color: #ff00ff; }
.main { float: left; width: 180px; margin: 10px; padding: 10px; border: 8px #000000 solid; background-color: #0000ff; }
footer { clear: both: width: 100%; margin: 10px; padding: 25px; color: #000000; font-size: 20px; background-color: #008000; }
p1 { color: #99ffff; font-size: 20px; }
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-style-type" content="text/css">
<title>page title</title>
</head>
<body>
<header>
<p1>page top</p1>
</header>
<div class="main">
<p1>float div</p1>
</div>
<div class="main">
<p1>float div</p1>
</div>
<footer>
Copyright Ⓟ2016Grandcross.info site, All right reserved.</footer>
</footer>
</body>
</html>
div要素は、スタイルで、色、大きさ、ノードの順位、位置、ポジションの性質、内部の色、ボーダー、を指定する。ボディー内に置く、べつのボディーと考えてください。ボディー内にいくつもの、分身的ボックスを設置することにより、ブロックごとに、ボディーのように扱えます。
スタイルでは
html5では
header { position: relative; margin: 25px; padding: 25px; height: 240px; background-color: #ff00ff; }
.main { float: left; width: 240px; border: 8px #000000 solid; background-color: #0000ff; }
footer { clear: both: width: 100%; hegit: auto; color: #000000; font-size: 20px; background-color: #008000; }
p1 { color: #99ffff; font-size: 20px; }
などと、header,footerと独立要素として、div class(div id)の省略が可能になっています。
スタイルで指定しているので、見えるページには、最小限のタグしか使いません。