長年Webサイトを作る仕事をしていると、それに用いる技術の遍歴を感じます。HTMLやCSSの技術も、ひと昔前から考えるとだいぶ変わりました。ここでは簡単なコーディング例からここ数年のHTMLとCSSの移り変わりを紹介します。
divに頼ったコーディング
ブラウザがCSSを実装するようになり、XHTML1.0が台頭した2000年代以降でよく用いられたコーディング方法です。divタグを多用し、デザインレイアウトを形成する事に重石を置いたコーディングです。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <div class="container"> <div class="header"> <h1>大見出し</h1> </div> <div class="main"> <p>ここに本文が入ります。</p> </div> <div class="navi"> <h2>中見出し</h2> </div> <div class="footer"> <address>コピーライト</address> </div> </div><!-- /container --> </body> </html>
h1タグをclass=”header”内に置き、ロゴマークなどの画像を貼り付け、alt属性に企業名を記述してることがよくありました。そのため、HTMLのレイアウトを無視したソース構造になりがちな事も多々ありました。
HTML5の新要素を用いたコーディング
HTML5がWeb標準に用いいられるようになった事で、新要素として登場したタグ、header、main、nav、footer、article、section、asideなどがこれまでレイアウト要素に寛容だったHTMLにそれなりのルールを与えました。これによりdivの多用ではなく決められた内容に決められたタグをマークアップするようにコーディングも変わり始めました。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <div class="container"> <header> <h1>大見出し</h1> </header> <main> <p>ここに本文が入ります。</p> </main> <nav> <h1>中見出し</h1> </nav> <footer> <small>コピーライト</small> </footer> </div><!-- /container --> </body> </html>
新要素、nav、article、section、asideの四つには階層構造を構築できるセクショニング・コンテンツの要素があります。そのため内在する見出しはh1で初めても一階層上の情報から見たときはh2の扱いとされます。このセクショニング・コンテンツによってこれまで見出しのh1〜h6までとした制限が実質なくなりました。※h2から下を使っても問題はない。
gridを用いたコーディング
これまでcssには、Webサイトのレイアウトをコントロールする強力なプロパティがなかったのですが、gridの実装により今までとは比べものにならない自由なレイアウトが実現しました。これまでdivにclass=”container”と名付け全体をまとめていましたが、gridで各部分や全体をコントロールできるので、余分なdivタグを削除できます。また、headerをソースの上部に置く事もこだわらなくてよく、mainタグ内に本文とまとめて置く事ができます。これでSEOの考えにも合わせたソースの順番が可能です。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <main> <h1>大見出し</h1> <p>ここに本文が入ります。</p> </main> <header> <!-- ヘッダー内には検索窓などを配置 --> </header> <nav> <h1>中見出し</h1> </nav> <footer> <small>コピーライト</small> </footer> </body> </html>