デザイナーのためのWeb学習帳（2）
HTMLの表現力が辿った
ここまでの道のりを知っておこう
江原顕雄2008/9/18
Webでコンテンツを表現する決まりである共通言語のHTML。世界共通語であるHTMLがここまできた道のりを知っておこう。
HTMLはコンテンツを表現するための決まりですが
- - PR -
前編で、HTMLが「画像やテキストなどのコンテンツをWebページに再現するための共通言語」であることがご理解いただけた方向けに、後編ではHTMLを取り巻く周辺技術についてさらに説明をしたいと思います。
Webの世界が一般的なものになって10年以上がたちます。ずっと一線で活躍していたHTMLにもいろいろと足らない部分が出てきました。足らない部分をどのような技術や思想で補ってきたかを見てみましょう。
HTMLにも“バージョン”がある？
まず、HTMLのバージョンについて簡単に見てみましょう。え、HTMLのバージョンなんてあるの？ と思った方もいるかもしれませんが、あります。ワープロソフトや表計算ソフト、OSなどのバージョンが変更したらすぐにお知らせがありますが、Web（を支えるサーバ）の世界でも確実にバージョンが変わっています。
前回と同じように、今回もHTMLページのソースを表示して見てみましょう。大抵は以下のような文章が書かれていると思います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
これは「ドキュメントタイプの宣言」といわれているものです。これは「この文章はHTMLで書かれていますよ」という宣言をしています。
HTMLのソースを直接記述した人の中には、「うーん、なんだかよく分からないけど、ほかのHTMLソースには必ず書かれているフレーズだから、とりあえず書いておこう」というノリでコピー＆ペ―ストしている人もいると思います。勉強する前の私もそうでした（笑）。
もちろん、知らなくてもWebページは作れてしまいますが、知っていた方が楽しいので、もうちょっとドキュメントタイプ宣言について詳しく見てみましょう。
HTMLはバージョンによって使えるタグが違います。そのため、最初に「どんなHTMLバージョンを使っているか？」を宣言しなければなりません。＠ITのページにもしっかりと書かれています。
 |
| 画面1 ＠ITのソースを表示させるとこうなる |
<!DOCTYPE HTML>で、この文章は「HMTLの文章です」ということを述べています。
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"の部分は「公開識別子」といいます。これは、HTMLを策定している標準化団体「W3C」（World Wide Web Consortium）が決めた「HTML 4.01」というルールで書かれていること示します。
http://www.w3.org/TR/html4/loose.dtdの部分は「システム識別子」という個所であり、先ほど宣言したルールの実物はここにありますよ！というURLを書いています。ここの部分をクリックすると……、
 |
| 画面2 HTML4のルールが書かれているw3.org |
このように実際のルールが書かれたテキスト文章がアップされています。
HTMLの仕様に厳格に従うなら<!DOCTYPE>は必要ですが、ないと困るものではありません。現にYahoo!のトップページのソースを見ると、まったく書かれていません。<!DOCTYPE>を記述した場合は、きちんとバージョンに従ったHTMLを記述しなければなりません。よく分からない場合は<!DOCTYPE>なしで、<html>〜</html>のみの記述でも問題はないでしょう。
 |
| 画面3 Yahoo! Japanのソースを表示させてみた |
歴代のバージョンを教えて
ブラウザだけを見ていたらまったく気が付きませんが、HTMLはバージョンを指定して記述ができます。HTMLのバージョンは1.0、2.0、2.x、3.0、3.2、4.0、4.01とたくさんありますが、現在は最新の4.01が一番よく利用されているようです。
HTMLはバージョンがアップするにつれて、利用できる「タグ」や「要素」が増えて、機能を拡張していきました。初期のHTMLは、文章の構造を指定するだけで、文字のサイズや色、表組みなどがまったくできないものでした。進歩のおかげでいろいろと表現できるようになってきました。
ちょうど、HTMLの次世代バージョンである「HTML5」に向けていろいろ準備が進んでいます。2008年1月にHTML5の草案が発表され、2010年に正式に公開される予定で作業が進められているようです。
HTML5は、機能面ではさらに、Webのデータを再利用するためのAPI（参照：5分でネットがわかるシリーズ（10）Web APIという巨人の力を使っちゃえ！）への対応が強化され、Webアプリケーションがさらに柔軟に表現できるようになるそうです。詳しくは以下のページに詳しく書かれています。技術的な問題だけでなく、政治的な思惑も入り交じっているようです。
| 【参照】 ・ HTML5が持つ本当の意味 ・ HTML 5 における HTML 4 からの変更点 |
| 1/4 |  |
| INDEX | ||
| デザイナのためのWeb勉強帳（2） HTMLの表現力が辿ったここまでの道のりを知っておこう |
||
 |
Page1 HTMLはWebでコンテンツを表現するための決まりですが HTMLにも“バージョン”がある？ 歴代のバージョンを教えて |
|
| Page2 XHTMLって書かれてるヘッダもあるよ |
||
| Page3 “Web標準”というWebの共通語 |
||
| Page4 Web標準化されれば、もう他の言語は覚える必要ありません |
||
 |
「デザインハック」コーナーへ |
TechTargetジャパン
- 次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
 |
|
|
|
|
キャリアアップ
スポンサーからのお知らせ
イベントカレンダー
お勧め求人情報
転職／派遣情報を探す
*＊先週の人気講座ランキング＊*
〜 Android編 〜
ホワイトペーパー（TechTargetジャパン）
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。