HTMLを理解するための最初の一歩。
Contents
HTMLの概要
HTMLとはHyper-Text Markup Languageの略語です。
Hyper-Text（テキストを越えたテキスト）とはなんでしょうか？
簡単に言うと、ハイパーリンク（HTMLにおいては aタグによるリンクのこと）によって さまざまなリソース（テキスト、音声、動画、その他もろもろ）を行き来することができる表現をもったテキストのことです。すなわちWebページのことです。
よって、HTMLとは Hyper-Textをマークアップ（タグで囲んで構造を定義）するための言語ということで、主にウェブページの作成用途に用いられます。
HTMLはSGMLというマークアップ言語から派生して策定されました。SGMLは汎用的なマークアップ言語で、タグそのものを定義するためのメタ言語です。SGML をウェブページ用に改良したのがHTMLです。
HTMLの開発者であるティム・バーナーズ・リー氏は「小学生でも書けるようなマークアップ言語を開発する」というコンセプトをもっていたようです。つまり 将来だれでもウェブページを作成して公開してほしいという願いがあったのだと思います。（当時は SGML という複雑なマークアップ言語しかありませんでしたから）。現在 その願いは ほぼ実現されているのではないかと思います。
HTMLの兄弟分としてXMLがあります。XMLは拡張マークアップ言語のことです。XMLは、テキストを意味づけするためのマークアップ言語で、HTMLよりも活用範囲は多岐にわたります。たとえばRSSはXMLをもとに定義されたウェブコンテンツを配信するためのフォーマットです。
まとめると こういうことです：
- HTML: ハイパーテキストを含んだウェブページ専用のマークアップ言語
- XML: ウェブページのみならずあらゆる情報を定義付けしてウェブブラウザ以外のプログラムからでも情報を扱いやすいようにするためのマークアップ言語
- SGML: HTML、XMLの親玉
HTMLは何で書けばよいのか？
皆さんはHTMLを書くときは何をお使いでしょうか？
基本的には好きなエディタを使えば良いと思いますが、まちがってもWindowsのメモ帳（Note pad）は使わないでください。
理由はいくつかありますが、メモ帳以外の生産性の高いエディタを使うことで HTMLを早くおぼえるためです。
（それと、メモ帳でUTF-8としてファイル保存すると勝手にBOMがつけることで、サーバーで公開したときにエラーや文字化けの原因になります）
おすすめのエディタは：
- Atom
- Visual Studio Code – Code Editing. Redefined
- Sublime Text: The text editor you’ll fall in love with
上記のエディタはWindows/Macに対応していて、いずれも無料で使うことができます。
Sublime Textは購入しない限り、購入のためのリンクがポップアップが出続けますが、無料版と有料版の機能に違いはありません。お金に余裕のある人は購入して開発をサポートしてあげるとよいでしょう。
わたしは Mac の Sublime Text を使っています。理由は、起動が他のエディタよりも高速だからです。
HTMLの全体像
HTMLには複数のバージョンがあります。現在の最新バージョンは HTML5 です。近年は HTML5でウェブページを作成するほうが主流です。今から10年ほど前はHTML4やXHTML1（ガラケー対応のためのHTML）でウェブページを作成していましたが、スマートフォンやタブレットなど高機能なモバイルデバイスの隆盛にともなってHTMLも進化してきました。それが現在のHTML5です。
マークアップ言語としての側面
HTML5では新しいタグが導入されています。section、article、main、asideなどです。
HTML5以前は、divタグにclass属性を付けて表現していたものが、HTML5では、それ専用のタグができた感じです。
新しいタグが導入された狙いはなんでしょうか？
私は２つあると思います。
- 1つ目はウェブページ開発者フレンドリーになる ▷ ウェブページを完結に表現できるのでタイピング量が減る
- 2つ目はGoogleなどの検索エンジンが嬉しい ▷ 分析するデータ量が減るので、もっと速く処理ができる
では、ウェブページを閲覧する人にとって新しいタグの価値とはなんでしょうか？
直接的には、これといってなにもありませんが、
間接的にみると、上記の2つの効率が高まることで、価値のあるコンテンツが増えて、社会が豊かになるとかでしょうか。
すいません 具体例があまり思いつきませんでした。
また、ブロック要素/インライン要素の廃止され、代わりにカテゴリ／コンテンツモデルが導入されました。
ウェブアプリケーション開発基盤としての側面
HTML5の主なAPI（アプリケーション・プログラミング・インターフェース）仕様としては：
- Canvas: グラフなどを描画
- Local Storage: 5MBまでブラウザに保存することができる領域（無期限で保存可能）
- Web Socket: P2Pを使った通信
- File: 例えば ローカルファイルをドラッグアンドロップでアップロードするための機能
- 動画・音声: Flashなどの外部プラグインに頼らず、動画を再生可能
など、他にもたくさんあります。これらAPIは、JavaScriptというプログラミング言語から操作することができます。
3つのモデル
HTMLに関係するモデルには以下の3つがあります：
- コンテンツモデル: タグの分類モデル
- ボックスモデル: タグ要素のサイズをCSSで定義するためのモデル
- DOM: HTMLのメモリー表現で、ツリー構造をもっていて、JavaScriptからHTMLを操作するためのモデル
コンテンツモデル
HTML5になってから、ブロックレベル要素、インライン要素という考え方は廃止され、
代わりに コンテンツモデル という考え方で、タグを分類する方法が採用されました。
とはいえ、ブロックレベル要素／インライン要素という考え方が以前としt有効なのも事実です。
なぜなら、コンテンツモデルにもその概念を見て取れるからです。
ボックスモデル
DOM
DOMとは、HTMLのメモリー表現で、JavaScriptオブジェクトを介してHTMLを扱うときに使用します。
- JavaScript => DOM操作 => HTMLをブラウザに表示
簡略化すると、このような流れで、JavaScriptはDOMを通じて、HTMLを書き換えることができます。
具体的なDOM操作については JavaScriptの基礎 を参照ください。
HTML5とスマートフォン・アプリケーション
準備中
HTMLの爆速コーディング
以下のような書式でHTMLを展開するための記法のことを Zen Coding といいます:
JS Bin – Collaborative JavaScript Debugging でも実装されているので、
簡単に試すことができます。
実体参照
準備中
レスポンシブ
準備中
IE6〜8 を HTML5 に対応させる
準備中
HTML5 のボイラープレート
以下のサイトで、基本的なHTML5テンプレートをダウンロードすることができます：
静的なHTML5サイトを作り始めるときの取っ掛かりとして、読み解いてみると勉強になると思います。
No comment yet, add your voice below!