簡約 HTMLについて

HTML

なにやらHTMLについて誤解している人もしくはよくわかっていない人が多いようなので書いてみた。

はじめに

この文章が対象としているのは"これからHTMLを書いてみよう"または"HTMLの概略が知りたい"という人である。各タグの使用方法等は別のサイトもしくは文書を参考にしてほしい。また簡約であるために多くの部分を端折ったのでHTMLについて詳しく知りたい場合も別のサイトもしくは文書を参考にしてほしい。

また、誤字や明らかな間違い等発見した場合私に知らせてほしい。

HTMLは何をするためのものか

HTMLは"HyperText Markup Language"の略であり、その名のとおりハイパーテキストを使った文章を記述するためのマークアップ言語である。またもともと研究者が論文等を記述するために開発した言語でもある。

ハイパーテキストとはハイパーリンクを持ったテキストである。ハイパーリンクとは文書と文書を関連付ける方法である。現在では一般にハイパーリンクはリンクとだけ呼ばれる。

マークアップとは印付けである。HTMLにおけるマークアップ対象は、文章の構造である。その部分が文章全体でどういった働きを持つのかに着目して印をつけていく。したがってHTMLは文章の見かけのデザインとは分離されている。見かけの制御は別の言語によってなされるべきであり現在ではCSS*1によって制御される。

つまりHTMLとは相互参照される文書を構造化し表現するための言語である。

文章の構造化

HTMLにおける文章の構造化は、各構成要素の文章中での役割を環境に依存しない形で抽象的に示すということである。広い意味での文章の意味的構造の表現はHTMLの範囲でなくXMLの範囲である。XMLについての話は割愛する、

さて、HTMLでは構造化した文章を表現するためにその内容を要素という単位で捉えそれぞれをタグという記号で囲む。要素とは文章の一部であり、複数の要素からなる要素も存在する。

タグは要素名を"<>"(半角鍵括弧)で囲ったものが使われ、その要素の始まりを表す開始タグとその要素の終了を表す終了タグがある。終了タグの場合は要素名の前に"/"を挿入して終了タグであることを明確にする。

要素名は規格で定義されており、勝手に作ることは許されていない。またHTMLでは要素名の大文字小文字の区別はないがHTMLの派生規格であるXHTMLでは大文字小文字の区別が存在する。
以下で必須の要素を説明する。

html要素
文書全体を意味しすべての要素はこの要素の中に存在する。
head要素
文書自身に関する情報を含む要素。タイトルや関連ページ等の情報が含まれる。
body要素
文書の本文が含まれる要素。
title要素
文書のタイトルをあらわす要素。

html要素は必ずhead要素とbody要素をこの順番で含まなければならない。

ひとつの要素の中に別の要素が含まれる場合、外側の要素を親要素、その内部に含まれる要素を子要素という。親子関係を記述していくと一つのHTML文章はhtml要素を出発点(ルート要素)としたツリー構造として表現できる。

要素同士の親子関係には決まりがあり、この決まりを内容モデルと呼び、HTMLの規格によって決まっている。例としてはhtml要素は必ずhead要素とbody要素を持たなくてはならず、head要素とbody要素は互いの子要素になることはできない。

また要素には大まかにブロック要素とインライン要素の二種類あり、それぞれ扱いが異なる。インライン要素とはある塊の一部でありそれ単体では意味をなさないものである。逆にブロック要素は塊でありそれ単体で意味を成す。つまりインライン要素は必ずブロック要素の子要素であり、ブロック要素はインライン要素の子要素にはなりえず、ブロック要素は子要素としてブロック要素とインライン要素を持つことができる。

主な要素型の紹介
h1,h2,h3,h4,h5,h6
見出しをあらわすブロック要素。h1が最も重要な見出しであり、h6が最も小さい見出し。
p
段落をあらわすブロック要素。
table
表をあらわすブロック要素。
a
リンクを表すインライン要素。
blockquote
引用を表すブロック要素。
q
引用を表すインライン要素。
div
ブロック要素としてのグループ化。
span
インライン要素としてのグループ化。
pre
整形済みテキストをあらわすブロック要素。
HTMLにおける空白の扱い

pre要素を除くすべての要素において半角スペースおよびタブおよび改行は単語境界としての意味しか持たず、その本来の役割では解釈されない。一般に単語境界は半角スペースなので一つの半角スペースとして認識されることが多い。つまりp要素内でいくら改行してもそれは反映されない。よってスペースや改行により整形された文章はpre要素内に収める。pre要素の使用はよく吟味すべきである。

文書型宣言について

必須ではないがHTML文書の先頭において文書型の宣言を行うことが推奨される。例としてHTML 4.01の文書型宣言は以下のとおりである。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

最後に忘れてはいけないこと

今まで見栄えについて一切話さなかったが、これはHTML文書の見栄え(レイアウト)は作者には完全には制御できないからである。HTMLで記述するのは文書の構造で、レイアウトデザインではない。

大げさに言うならばそもそもそのHTML文書がもしかしたらテキストしか表示できない環境で読まれるかもしれないし、音声リーダーで読まれるかもしれない。HTML文書は本来それが可能である。そこまで大げさでなくとも人によってはフォントサイズが違うかもしれないし、表示できる範囲が異なるかもしれない。

あなたの画面上での表示が気に入らないからと余計な(不適切な)要素を使ったり、空要素によってスペースを捏造したり改行したりして見掛けを整えないこと。ほかの人の環境では違うように解釈されてとても奇妙に見えることが往々にしてある。

表示を制御したいならばスタイルシートを使うこと。スタイルシートはブラウザにどのように表現すべきかについて指示するファイルであり現在はCSSで記述される。

*1:Cascading Style Sheets