HTML4とHTML5の違い（レイアウト編）

Camarade

2015/03/17

HTML4とHTML5の違い（レイアウト編）

この記事は約3分で読めます。

初級カスタマイズ

10年ほど前に独学でコーディングの勉強をしていて、
現在仕事としてコーディングをしている私ですが、10年前の知識では困ることも多々ありました。
前にちょっと勉強してたけど今のHTMLってどうなっているのだろう…と思われる方に、
「そうなのか」と思った事項を挙げていきたいと思います。

以前「HTMLの主なバージョンを見極めるポイント」という記事を書かせて頂きました。
10年前は「HTML4.01」が主流でしたが、現在は「HTML5」を用いてコーディングすることが望ましいです。
HTML4.01にはあったけどHTML5では削除されたタグ、また反対に追加されたタグもあります。

今回はHTML5で新たに追加されたレイアウト要素について説明します。

HTML5のレイアウト要素

10年前によく使われていたのは<frame>タグ。
topとmainとside,bottomなどにページ分割をしてサイトを構成していたかと思いますが、
HTML5ではこの<frame>タグはユーザビリティに悪影響を及ぼすとして廃止されました。

HTML5では新たに、<header>,<nav>,<section>,<article>,<aside>,<footer>の要素が追加されています。

コードではこのような形になります。（一例です）

これらの追加された要素は文書構造を表すものです。
このように記述すれば、webページの見た目が変わるという訳ではありません。
<header>というエリアを作ったと思って下さい。
見た目を変えるには、スタイルシートを用意して、そこに記述していきます。
HTML4の時はフォントの見た目にしても、<font size=”12px”>などと記述したりしていましたが、
基本的にHTML5ではスタイルシートを作成して、デザインに関する記述はそちらに書きます。

HTML5ではこの文書構造を明確にする事で、webブラウザにも検索エンジンにも構造を認識してもらえるようになりました。
HTML上の記述が煩雑になると機械が混乱して、何が大事な情報なのかを認識してもらえなくなります。
それはSEO対策に影響を及ぼしてしまいます。

なので、style.cssに

例えば