HTMLの基本書式

●要素とタグ

HTMLの基本的な構成を示すと次の様になります。

〈a href=”http://なんとかかんとか”〉アンクのページ〈/a〉

この文書ではまず最初に「なんとかかんとか」という見出しがあります。

その後の「~~~~」以降が本文になりますが、この本文には、書籍名を順不同で並べたリストが含まれています。また、この後には内容紹介文の様な文章が続くかもしれませんし、各書籍の売り上げ状況を示す表が入る場合もあるでしょう。

一つの文書はこの様に、様々な性質を持った内容が部品の様に組み合わされて出来上がります。HTMLではこの個々の部品をそれぞれ「要素」として分類し、街灯の箇所がどの要素なのかを「タグ」という印をつけてしまします。

要素やタグの特色やん文法上のルールなどは文書型定義で詳細に決められており、タグつけされた文書を解読し、定義に沿って適切に表示するのは、「ブラウザ」と呼ばれる専門ソフトウェアの役割です。

なお、本書ではwebページを作るときに役立てやすい様、〈◯◯〉タグとその属性・値という表現を主に使います。

●開始タグと終了タグ

前述の文書にタグをつけると次の様になります。

〈h1〉なんとかかんとか〈/h1〉

〈p〉なんとかかんとかなんとかかんとか〈/p〉

〈!–この部分はコメントです–〉

〈ul〉

〈li〉なんとか辞典〈/li〉

〈li〉なんとか辞典〈/li〉

〈li〉javascriptなんとか辞典〈/li〉

〈li〉ホームページなんとか辞典〈/li〉

〈/ul〉

タグには「開始タグ」と「終了タグ」という物があり、この2つで「要素内容」を挟む様に述します。ただし、終了タグを省略できる要素や、内容を持たないために終了タグを持たない「空要素」というものもあります。

・終了タグを省略できる要素

次の要素では、終了タグを省略することもできます。

colgroup、dd、dt、li、option、p、tbody、td、tfoot、th、thead、tr

より正しい文書を作成するためには、終了タグも省略しないで記述した方がいいでしょう。

また、XJTMLでは終了タグを省略することはできません。

・空要素

内容を持たない要素です。空要素には開始タグのみで終了タグがありません。

area、base、br、col、frame、hr、img、input、link、meta、param

上述の様にXHTMLでは終了タグを省略できないため、空要素はHTMLとは異なる書式で記述します。

 ●属性と値

各要素には、その要素の性質や役割など詳細情報を示す「属性」を指定できます。開始タグの要素名お後にスペースを置き、基本的には「属性=”値”」の形で記述します。

〈要素名 属性名=”値”〉要素内容〈/要素名〉

「値」には、left、right、centerの様に規定の物と数内などの様に文書の製作者が任意で書き込む物の2種類があります。

・属性値の書き方

属性の値は引用符をつけて記述します。一般的には「” ”」が使われています。また、

「” ”」で囲われた中に「’ ’」あるいはその逆といったように、引用符を入れ子状にして使うこともできます。

値がアルファベット、数字、ハイフン、ピリオド、アンダースコア、コロン、だけで成り立っている場合に限り引用符を省略できますが、このような場合でも小ry区あしないことが推奨されています。XHTMLでは引用符を省略することはできません。

・複数の属性がある場合

複数の属性を指定する場合は、下記のようにそれぞれを半角スペースで区切って記述します。属性の順序は問いません。

〈要素名 属性名1=”値1”属性名2=”値2”…〉要素内容〈/要素名〉

・属性名の省略

HTMLでは属性名と属性値が同じ場合に属性名を省略する「最小化」表記が認められており、この書式が一般的に使われています。XHTMLでは最小化することはできません。

〈要素名 属性名=”値”〉

・大文字か小文字か

HTMLの要素名や属性には、大文字・小文字の区別がありません。どちらも記述できます。一方、XHTMLでは、要素名や属性名は小文字で記述するよう定義されています。本書はすべて小文字の表記に統一しています。

・汎用的な属性

HTML4.01では、ほとんどの要素に対して、しようできる汎用的な属性が定義されています。

id=”名前”

要素に対して名前をつけます。ただし、同一の文書中で同じ名前を重複して使うことはできません。スタイルシートのセレクタ、リンクの対象、スクリプトからの参照、オブジェクトの指定などに利用されます。

class=”クラス名”

要素に対してクラス名をつけます。id属性とは異なり、同一の文書中で複数の要素に対し、同じ名前を使うことができます。また、スペースで区切れば、一つの要素に対して複数の

クラス名を指定することもできます。スタイルシートのセレクタなどに利用されます。

title=”補足情報”

要素に対して補足的な情報を与えます。この情報の表現方法はブラウザによって異なりますが、一般的にはツールチップの形で表示されます。

style=”スタイルシート”

要素に設定するスタイル情報を直接記述します。

lang=”言語コード”

要素内容の言語を指定します。例えば日本語は「lang=”en”」のように指定し、この属性を指定しない場合の言語コードは「unknown」(不明)となります。この属性は引用符やアクセント記号のついたアルファベットなど、その言語の特色に従って内容を正しく表示させたり、音声ブラウザで正しく発音させたりできるようにする働きを持ちます。XHTMLではlang属性の代わりにxml:lang属性を指定することになっていますが、XHTML1.0ではHTML文書との互換性を考え、lang属性も同時に指定することができます。

言語コードの一例は次の通りです。

ja日本語  en英語

deドイツ語 jrフランス語

ko韓国語 zh中国語

 

dir=”テキストの表記方向”

要素内容のテキストやテーブルなどを表示する基本的な方向を設定します。左から右の場合はltr、右から左の場合はrtlとなります。

●非推奨の要素・属性

最初に説明したように、HTML4.01は構造に関する指定と見栄えに関わる指定とを分離させようという姿勢の元に作られました。そのため、スタイルシートで代わりに実現できるHTMLの要素や属性の多くは廃止されることになります。

しかし、いきなり多くの要素や属性を廃止するのは、現実的ではありません。当時まだスタイルシートに十分に対応していないブラウザがあったことや、長らくHTMLで見栄えも表現してきた事情などにも配慮して、以降のための暫定的な手段が設けられました。要素や属性、文法などについて詳細なルールを定めた文書型定義を「厳密なもの」「以降向けのもの」「フレームを利用するためのもの」の3種類用意し、廃止される予定の要素や属性は「deprecated(非推奨)」に指定したのです。以降向けの文書型定義に従えば非推奨の要素やぞおく性も利用できますが、もっとも厳格なscript DTD ではそれらは排除されて使うことができません。HTML4.01をXMLで定義しなおしたXHTML1.0でも、同じ姿勢が引き継がれています。

文書型定義によっては、非推奨の要素や属性も引き続き利用できますが、構造と見栄えを分離するという方針を考えれば、できる限り利用しないのが理想でしょう。