僕はHTMLを書き始めて約15年。割と年齢は若い方で、いわゆる「ベテラン」という感じではないのですが、
長く付き合ってきたこの言語について、最近思うことが多いので語らせてください。
元W3Cメンバーとして考えていたことなので、
マークアップエンジニア、フロントエンドエンジニアには刺さるかもしれません。
以下が今回のお話です。
語りたいこと
- HTMLの変遷
- HTMLってそもそも何
- 僕が書いた15年間
1. HTMLの変遷
1-1. 僕のマークアップの始まり
約15年前、僕は自分が産まれる前にできたファミコンのスーパーマリオブラザーズが大好きで、
なんとなく勢いで「ホームページ」を作ってみました。
母親がドリームキャストでホームページを作っていたので、「あ、なんかできそう」みたいな感覚で。
1-2. テーブルレイアウト
当時はHTMLが主に大文字で書かれていて、ほとんどがtable要素でマークアップされていました。
いわゆる「テーブルレイアウト」です。
それがトレンドだったし、何も間違っていなかったんです。
他には、font要素やcenter要素などもありました。
今ではCSSに任せる部分をHTMLで補っていました。
1-3. CSSの登場とFlashの活躍
そのちょっと後ぐらいから、CSSが意識されはじめました。
HTMLは正しいマークアップを、スタイリングはCSSで、という常識が作られ始めたのがそのぐらいの時です。
もしくはFlashのみで構成された「フルFlashサイト」なんかも多用されていました。
ただし、Flashはマークアップとして認められませんでした。
というより、検索エンジンのロボットがクロールしてFlashの中から文章を抜き出すのが難しかったのです。
現在のcanvasも同様ですね。
しかし、テーブルレイアウトやFlashの息は長く、思えば8年ぐらい前までは普通にテーブルレイアウトの
サイトが存在していました。
もちろん忌み嫌う人はいたし、それが間違いと思う人は多かったです。
そしてその名残りで、「tableは悪」と謳う人が出てき始めます。
今ではそのようなことはありません。悪は正しくないマークアップです。
1-4. テーブルレイアウトの消滅
次にテーブルレイアウトはなくなってきて、CSSにレイアウトやスタイリングを任せきる時代がやってきます。
HTMLソースはdivだらけ。今では考えられないマークアップです。
しかし、そもそもdiv、p、ul、ol、dl、h{n}ぐらいしかブロック要素がなかったのです。
divにheaderなどのクラスを付けてスタイリングしていました。
1-5. HTML5の登場
その後HTML5が登場し、有用なHTML要素が増えました。
header要素、section要素など。
section要素は用途が曖昧な時期があり、divを使ってしまう「div病」が流行りました。
そこでHTMLの価値観や考え方がざっくり分れたのです。
現状はある程度HTML5に対する考え方も統一されましたが、
やはり正しいマークアップをできる人はそこまで多くないように思います。
これからなのでしょう。
2. HTMLってそもそも何
2-1. HTMLの意義
ここからは僕が思うことです。
HTMLはそもそも何か。起源を辿れは文章を効率的に読ませるための言語です。
「ハイパーリンク」、今では普通にリンクと呼ばれていますが、
その画期的な仕組みを利用して、膨大な文章から目的のものを見つけ出し、
読ませることがHTMLのゴールでした。
それを考えると、HTMLは「絵」をきれいに見せるための言語ではないのです。
言葉は時代とともに変化していきますが、
言語の根幹は変わりません。
2-2. 正しさの対価
現実、googleは正しく文章としてマークアップされたものを良質なものとして捉えます。
そのことを忘れずHTMLを書いていれば、間違いは今のところありません。
私がHTMLを教える人にはここを一番大事なものとして伝えます。
はき違えると、セマンティックなコードを書けなくなってしまいます。
3. 僕が書いた15年間
3-1. 感じてきたこと
15年間の間に前述のようなHTMLの変遷があり、僕も多種多様な変化を遂げてきました。
変化しないと時代に乗り遅れてしまう = お金が稼げないのです。
とにかく手を動かして、インターネットの物事なので、本ではなくインターネットで調べて
自分で勉強をしてきました。
自分の中でインパクトが大きかったのはやはりHTML5で、
「文章を正しく認識」させるための要素が充実していたのには感動しました。
divにsectionなんてクラスを付けていたのが懐かしいです。
3-2. マークアップ学習のコツ
一度HTML5の要素を全て学習してみてください。
「これは使った方が良い」とか、「自分の領分ではこれは使わない」みたいな要素が
無数に見つかるはずです。
自分が作り出したい文章のための取捨選択を妥協せずやってみてください。
きっと良い文章が書けるはずです。
CSSは小手先のテクニックであって、大事なのは文書構造、情報設計です。
最後に
色々な認識の飛びかうマークアップの世界で生き残るには、
正しいものを正しく選ぶべきだと、自分の経験で学びました。
みなさまの知識の肥やしになれば良いなということで、
不定期ではありますがこんな駄文を書いていこうと思います。
ありがとうございました。
第二弾は別ブログにて投稿しました。ご一読いただければ幸いです。
http://thrbrd.hatenablog.jp/entry/2016/03/13/html-vol2
追記
同タイトルで勉強会をやることになりました。
ご興味のある方は是非いらっしゃってください！
http://d-cube.connpass.com/event/30511/