もしかして?
- HTML5 → HTML5の単独記事があります。
- HTML5プレーヤー →ニコニコ動画のHTML5プレーヤーについても単独記事があります。
- HTMLエディタ → ニコニコ大百科のHTML編集についてはニコニコ大百科:記事の編集方法参照。
HTMLとは、「ひとみる」な形式である。Hotmailの略ではないのであしからず。
HyperText Markup Language の略で、ウェブページを記述するための言語である。
→ニコニコ大百科:HTMLタグ一覧 (ニコニコ大百科で使用できるHTMLタグの一覧)
概要
「Markup Language」(マークアップランゲージ、マークアップ言語)とは、我々が一般的に用いる自然言語について、コンピュータでもその文脈や意味などが理解できるように専用の文字列(タグ)を補記したものである。そして「HyperText」(ハイパーテキスト…「テキストを超える」という意味)とは、ハイパーリンクによってお互いを関係付け、関係のある文書を辿っていけるようにした文書のことである。
これらを組み合わせたものがハイパーテキストマークアップランゲージ…すなわちHTMLである。
HTMLの仕様はW3C(World Wide Web Consortium)という団体が定めており、ほぼ全てのウェブページはHTML及びその派生のXHTMLで記述されている。
もちろんこの記事もHTMLを用いて記述されている。主要なブラウザなら「右クリック→ソースを表示」でこのページがどのようにHTMLで記述されているかが確認できる。
HTMLの簡単な説明
前述の通り、HTMLの「Markup Language」は、コンピュータでも文章の文脈や意味を判別できるようタグを補記する役割を持つ。
では、コンピュータに文脈や意味を判別させる、とはどういうことか?例えば、下記左のような文章があったとする。
表示サンプル | ソースコード |
---|---|
今日の出来事 今日は以下のような出来事があった。 ・宝くじで300円当たった ・昼飯にうどんを食べた ・友人と会った |
<h1>今日の出来事</h1> |
左の文章は、人間が見れば「今日の出来事」が文章のタイトルで、以下説明文と出来事が箇条書きで記述されているであろう、と文脈を推測できる。しかし、コンピュータが同様に文脈(見出し・段落・箇条書きなど)を判別することは非常に難しい。
そこで、HTMLでは上記右のようにタグを補記し、明示的に文脈を記述することによってコンピュータに判別させる。
タグ<hoge>…</hoge>で囲まれた部分がhoge要素になる。上のHTMLでは「今日の出来事」がh1要素、「今日は以下のような出来事があった」がp要素となっている(HTMLでは、h1要素が最上位の見出し、p要素が段落、ul要素が箇条書き、li要素が箇条書きの項目を意味する)。
このようにして、当初の目的である、コンピュータに文章の構成要素を伝えるということが達成できた。
インライン要素・ブロック要素
要素には大きく分けてインライン要素とブロック要素2種類がある。おおざっぱに言えば、行の中に詰め込める要素がインライン要素で、行を中に詰め込める要素がブロック要素である。
本文の書き方
原則として<p>と</p>の間に書く。この<p>は段落(パラグラフ)を意味する。
基本的にHTMLでは、ソース中の改行文字や連続したスペースは意味を持たない。また「<」「>」はタグで使用するので「<」「>」と記述する必要がある(そのまま記述できない文字は他にもある)。
なお、<br />による改行は非推奨とされている。 → <br />
よくある勘違い
HTMLはウェブページのレイアウトを記述するための言語ではなく、ウェブページの文書構造を記述するための言語である。
例として、雑誌レイアウトのような段組みを再現すべく<table>タグを利用するケースなどが見られるが、同タグはあくまで表を作成するためのものであり、段組みを再現するために用意されたのではない(結果として画面上には段組みとして表示されるが、コンピュータはそれを「表」として認識している)。
このようにタグをレイアウト用途に転用される事象回避のため、CSSと呼ばれる装飾用の要素が用意されている。このCSSを使って記述した方がより柔軟・高度なレイアウトが実現できるうえ、HTMLを純粋に文脈用として記述できるためソースコードもスッキリする利点がある。
1999年に策定されたHTML 4.0では、レイアウト用にCSSを利用することを強く推奨していたが、当初は対応ブラウザーが普及しておらず、多くのデザイナーは従来のデザイン方法をとっていたが、2000年代中頃より十分な普及が見られるようになってから、CSSを使ったデザインへと変化している。
このままXMLと親和性の高いXHTMLへと発展するかに思われたが、あまりにも厳格になりすぎて普及が遅れることとなった。
2004年に、実用からかけ離れつつあったW3Cの方針に反発したアップル、Mozilla、OperaによってWHATWGが作られ、より実用的な言語とする上で、従来のバージョンでの表記も許容し、プラグインなしでも音声、映像、3Dグラフィック、ストレージや周辺機器との接続にも対応したHTML5を策定、2014年に勧告された。
バージョン
Ver. | 時期 | 内容 |
---|---|---|
HTML 1.0 | 1993年 | ティム・バーナーズ=リーが提案した、SGMLをベースにした記述方法を元に策定された。 |
HTML 2.0 | 1995年 | このバージョンでDTD(文書型定義)の宣言が追加され、入力用フォームの定義もされた。 |
HTML 2.x | 1997年 | ここで正式に日本語などの他言語への対応が明記されるようになった。 |
HTML 3.0 | - | 策定中に中止された。 |
HTML 3.2 | 1996年 | スタイルシート(CSS)が初めて登場するも、同時に表組、フレームなど、HTML側でレイアウトを決める要素などを明文化した。 |
HTML 4.0 | 1997年 | HTMLを改めて文書の構造のみを記述する形に整理され、レイアウトなどをCSSで設定するよう改められた。 翌年にはいくつかの修正を行ったHTML 4.01が勧告され、長らくスタンダードとなった。ニコニコ大百科もHTML 4.01を使っている。 |
HTML5 | 2014年 | 2014年に勧告されたバージョン。これまで動画やアニメなどを見る上ではプラグインを必要としていたが、これを使わずともHTML内で処理、実行できる環境をWebブラウザーと連携して提供することを目的にしている。 |
HTML Living Standard | (2019年) | HTML3.0以降を管理してきたW3Cとは別のWHATWGという団体が管理する標準。HTML5は実質的には当時のHTML Living StandardにW3Cが手を加えたものとなっている。2004年から存在するが2019年にW3C側が合流する形で標準となった。バージョンの概念がなく日々更新される。 |
ついでの知識
日本においては、1992年に東京理科大学の奥乃博教授(現・京都大学教授)が初めてHTMLを記述した。
その中身は…アクセスしてからのお楽しみ
関連動画
関連商品
関連項目
- SGML
- XML
- XHTML
- CSS
- JavaScript / DOM
- HTML5 / HTML Living Standard
- ブラウザ
- 22
- 0pt