CamaradeCamarade
2015/03/17

HTML4とHTML5の違い(レイアウト編)

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

HTML4とHTML5の違い(レイアウト編)

初級カスタマイズ

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>の要素が追加されています。

名称未設定-1

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

_r1_c1

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

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

なので、style.cssに

例えば

_r1_c3

このように記述すると、

_r1_c2

このように表示されました。

いかがでしょうか。
あと、HTML5で記述する場合は、DOCTYPE宣言もお忘れなく!

_r1_c4

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。