HTML入門 レベル2

ここでは、主に要素とリンクについて解説

文書の構造指定と要素

 HTMLは、文書の構造をタグ(マークアップ)で指定していくものである。HTMLとは文書の構造指定であって、見栄え=物理的書式を目指したものではない。今日では、見栄えの指定は、CSS(スタイルシート)の分担とされている。逆に言うと、スタイルシート抜きのHTML文書は、見た目には極く質素なものになる(発明当時のHTMLはそんなものだった)。

命題4: HTML+CSS=リッチなHTML文書

 また、HTMLやブラウザの機能を拡張するため、JavaScript等がよく利用されている。Scriptは事実上プログラミング言語なので、結構様々な機能が実現できる。

命題5: HTML+CSS+JavaScript=もっとリッチなHTML文書

 文書の構造とは(前述の通り)、文書タイトル、見出し(章節項...)、本文、段落といったものである。それらは全て、形式的には「段落」に似ている。ここでいう「段落」(もどき)はHTMLの仕様では「要素(エレメント)」と呼ばれている。正確にはブロック要素と呼ばれている(インライン要素については後述)。HTMLは要素の集合である。

命題6: HTML文書=要素+要素+要素+要素+・・・・・

 実際には、ブロック要素同士が入れ子になる事もあるし、インライン要素はブロック要素の中に登場する事になっている。ブロック要素の種別の順序については結構ルーズであるが、要素間の入れ子関係については色々と注意を要する。

 定まった入れ子関係といえば、html要素 =head要素+body要素である。html要素はHTML文書のルート要素である。head要素とbody要素からみれば、html要素が親要素になる。head要素は主に文書のメタ情報、body要素は文書本体を担う。表示ウィンドウ枠の上辺に表示される文書タイトルは、head要素内のtitle要素であるが、それを除けば、ブラウザで表示される文書は全てbody要素内に書かれたものである。body要素内の諸要素からみて、body要素が親要素になる。

命題7: 
htmlheadtitle
meta
style
bodyh1
h2
p
etc. …

 なおHTML文書の冒頭には「文書型宣言」といったものが付くが、ここでは説明を省いた。

ブロック要素とインライン要素と属性と空要素

 前項の通り、HTML文書は要素=エレメントの集合である。第1の要素は段落的要素=ブロック要素、第2の要素は段落内要素=インライン要素である。インライン要素は、常にブロック要素(親要素)を必要とする。両者は常に一方的な入れ子関係になる。命題7ではブロック要素しか表していない。ブロック要素の境では必ず改行されるので、ブロック要素は「段落」に似たものになる。

 要素は、[タグ・内容・終了タグ]という構造を持つ。内容は、表示したい文字列である。タグが <a> なら、終了タグは </a> というように、終了タグは /(スラッシュ)が付く。

 タグは属性を持つ場合がある。例えば画像用のタグは <img src=""> であるが、" "の間に表示したい画像ファイル名を入れる。この場合、srcという属性の値が画像ファイル名(URL:後述)になる。

 ブロック要素もインライン要素も普通は[タグ・内容・終了タグ]の構成であるが、例外として内容を持たないものがあり、これを空要素という。空要素は終了タグも持たない。ただし空要素の多くは(普通の要素と同様)属性を持っている。だから、「空要素」と言いながら、決して空疎なタグではない。head要素の子要素の多くは空要素だが、body要素の子要素では、上述の画像用タグ(img)の他、罫線(hr)や強制改行(br)といったものが挙げられる。

リンク−文書は他の文書との関係を知っている

 HTML文書は、このままだと、以上で完結してしまう。単独で存在する文書は、OSのファイルシステムの機能で管理するしかない。実際には、HTML文書は他のHTML文書とリンク関係で結ばれるのが特徴となっている。文書と文書のリンク関係を、文書の中に埋込んでおける。そうした文書は、他の文書との関係を知っている事になる。こうして文書と文書が縦横に繋がっていくシステムを、ハイパーテキストと呼ぶ。HTML(HyperText Markup Language)の語源である。通常は、文書群の目次をindex.html のファイル名で用意しておく。目次から各文書にジャンプできるし、それぞれの文書にindex.html へのリンクを入れておけば、戻ることができる。

 他のサイトの文書にリンクを張っておけば、サイトとサイトの間が繋がれる事になる。こうして、Webサーバで公開されたHTML文書群は、全世界をカバーしたハイパーテキストシステムになった。

リンク先の指定とURL

 リンク先の指定法は3通りある。

  1. URL指定
  2. 相対パスとファイル名の指定
  3. 同一文書内の、別の箇所の指定

 URL(Uniform Resource Locater)は、オンラインでつながった全ての場所(ロケーション)のファイルを個別に指定できるアドレスである。インターネットはサーバの集合であるが、個々のサーバはユニークな(固有の)ドメインを持っている。ファイルはサーバに置かれている。

 例えば、ao.jpn.org はドメイン(正しくはサブドメイン)であり、サーバである(実際には仮想化されている)。ao.jpn.org は世界に一つしかない、ユニークなものである。ファイルは、ここに置かれる。実際に指定する場合は、頭に http://が付く[]。例えば、ao.jpn.org にファイル longevent.html が置いてあるが、そのURL指定は、http://ao.jpn.org/longevent.html という具合である。

 相対パスは、ディレクトリないしフォルダといった、コンピュータ内のファイルの保管の仕方と同じ具合である。フォルダの区切りは /(スラッシュ)である(これはUNIXの記法に由来する)。相対パスのリンク先指定では、http:// は不要である。もちろん、同一フォルダ内へのリンクに、フォルダ指定は無く、ダイレクトにファイル名指定になる。なお、親フォルダへの相対パスは、../ で表わせる。

 同一文書内の、別の箇所の指定とは、文書内に<a name="文字列">□□</a>で、name属性にユニークな文字列(半角英数字)を埋込んでおき、それをリンク先に指定する方法である。<a name="abc">ならば、<a href="#abc">□□</a> という具合に頭に#を付ける。この文書内指定は、外部からのリンク先としても使用できる。


:正確には、httpは接続プロトコルないしスキームで、サーバ名が //ao.jpn.orgといった具合(間は:で区切る)。元来は、ドメインの後に接続ポート番号:80をつけるのだが、省略可能。
index  …03.7.28〜03.8.2