サイト構築考---HTMLのエッセンシャル

概要

技術は人手の負担を軽くするために進化を続けます。ホームページ（HTML文書）製作もしかり。ホームページ作成ソフトやオフィス・スイートでホームページを作れる時代に、今更ながらHTMLの基礎をとりあげます。

HTML タグは100を超える種類があります。…確か。いや、いくつあろうがいいんです。すべてのタグを駆使してホームページを作ることなどまずないでしょうから。第一、平文を書くだけなら、タグなど15個程度、図表を含む文章でも20個強覚えていれば充分なはずなのです。振り返ってみましょう。Word、Excel…ソフトウェアに限らず、家電品や自動車でも良いですが、私たちは「仕組みを完璧に知らなければ何もできない」…わけでもないことを経験的に知っています。

本稿では「シンプルな HTML」を追求します。これは「全て覚えない」という、負担軽減のもう一つのアプローチです。実はこの考え方から「HTMLの本質」が見えるかもしれません。

関心の分離－HTMLタグでデザインしない

大きな問題の解決を容易にするには、小さな部分問題に分解することが一つの近道です。 ある機能や目的を、互いに重複がないように複数のシステムに分割することを「関心の分離」と呼びます。HTML という大きな問題も「文書構造を示すタグ」を分離し「文書デザインに関連するタグ」を考慮しないことで、シンプルな理解につながります。

大げさではなく、規格の変遷によってHTML タグは淘汰されてきたと言って良いでしょう。淘汰の背景は HTML タグの「役割」に関わる側面があります。原則的に、HTMLの「役割」とは文書構造を示すことであり、文書のデザインを決めることではありません。

文書のデザインは「スタイルシート」が受け持ちます。使用フォントの指定やアンダーラインの表示方法も見栄えに関わるので、HTMLではなくスタイルシートを用います。HTMLでは文書の構成要素だけを記述すると決めてしまえば、以下のようなメリットがあります。

もっとも、新しくスタイル・シートを覚えなければならないというデメリットはありますが…。

HTML文書の分割－横から先に

HTMLタグが文書構造を記述するということは、HTML文書がコンピュータ処理に都合良く体系化されていることを意味しています。「本文」は、いくつかの「『段落』や『図・表』などの部品」を組合わせたものと解釈します。HTML文書は「本文」のほかに「システム向けの設定データ」で構成されています。これらの「部品」は、それぞれの役割に基づいた名前を持っています。そして、コンピュータが識別しやすいように、部品名を用いて部品の始まりと終わりを示します。

以上を踏まえて、今一度 HTML 文書を以下の手順で分割してみましょう。

  1. 範囲を決めて、その範囲に役割を与える…「システム向けの設定データ」と「本文」
    （さらに「HTML文書の宣言（文書全体の範囲）」）
  2. それぞれの範囲を横に分割して役割を与える…段落（平文）や見出し、箇条書き、図、表、表の行など
  3. 分割された範囲を縦に区切って役割を与える…一部分の強調や表の列など
  4. その他

分割されたそれぞれの部品に付けた名前を「タグ」といい、HTML文書を処理するための命令として機能します。

図1 HTML文書を分割する

手順に示したように、文書の分割は「横から先に」と理解します。見出し、段落、リスト、フォームのように横に分割されたそれぞれの部品を「ブロック」という単位で扱います。ブラウザは通常、ブロックの前後を改行して表示します。ブロック内の、主に文章の一部は「インライン」という単位で扱い、前後を改行せずに表示します。「横から先に」の例として、図2 に表の記述の考え方を示します。

図2 「横から先」の例…３行2列の表（先頭行には見出し列）の考え方

図2の解釈に基づいて、図3 に HTML タグによる表の記述を示します。

図3 図2に基づきHTMLで記述

覚えるべきタグ

HTMLタグを学習する手始めとして、覚えるべきタグを示します。概要にも書きましたが、平文を書くだけなら、表1に示す15個のタグを覚えていれば問題はないはずです。

表1 HTML文書、平文を書くための15の必須タグ
用途 開始タグ 意味 備考
設定 html HTML文書の始まりと終わり
head 文書に関する設定・情報
body 文書本体
<head>～</head>の
範囲内で使用する 		ヘッダを記述する title 文書のタイトル SEO
meta 文書情報
（システムでの制御）		 SEO、終了タグなし
link 外部ファイルの参照 主にスタイルシートの読込みに使用、終了タグなし
<body>～</body>の
範囲内で使用する
 ブロック要素
…平文を記述する 		p パラグラフ 本文 </p>は省略できる
h1～h6 見出し SEO
div 汎用のブロック <p> の代用とする例も
インライン要素
…文字の修飾 		a リンク SEOも兼ねる
br 改行 終了タグなし
（段落を意味のまとまりと考えると多用しないことが望ましい）
strong 強調（太字表示） SEO、<b>に対応
em 強調（斜体表示） SEO、<i>に対応
sub, sup それぞれ上付き、下付き 「m2、x3」のような記述が必要なら
span 汎用のインライン 　

表中「SEO」と表記した部分は、検索エンジン最適化の対象となるタグであることを意味します。ホームページ作成ソフトでは、通常、太字は<b>、斜体は<i>のタグを使用しますが、太字、斜体はデザインであることを考えると、文書構造としてはそれぞれ<strong>、<em>が適切であるといえます。SEOの観点からも「<strong>、<em>」は検索エンジンが重視するのに対して、「<b>, <i>」はそうではないと言われています。

ここまでは平文を書くだけのタグですので、このままでは図表どころか箇条書きさえ記述することはできません。そこで次に、図表などを記述するためのタグを表2に示します。私見ですが、表2に示したタグは、表1のそれらよりも覚えるべき優先度は低いという位置づけです。

表2 その他の文書構造
用途 開始タグ 意味 備考
文書全域で使用可 <!-- 文字列 --> コメント 　
<body>～</body>の
範囲内で使用する

　

 ブロック要素
…図などを挿入する 		image 画像の参照の範囲 終了タグなし
object 動画、音楽などの参照の範囲 embedもほぼ同じ意味、終了タグなし
ブロック要素
…表の作成 		table 表の範囲
tr 表の行
th 表のタイトル列 <tr>～</tr>間に記述する（通常、<th>は最初の行に適用）
td 表の（通常の）列 <tr>～</tr>間に記述する
ブロック要素
…箇条書き 		ul 箇条書き（順番なし）の範囲
ol 箇条書き（順番つき）の範囲
li 箇条書きの要素 <ul>～</ul>間または<ol>～</ol>間に記述する
ブロック要素
…箇条書き
（用語と説明の列挙） 		dl 定義リスト 定義する用語とその用語の説明を一対にしたリスト
dt 定義リストで定義する用語
dd 定義 直前の dt タグに示した用語の定義
ブロック要素 pre 整形済みテキスト スペース・改行なども、そのまま等幅フォントで表示
ブロック要素 blockquote 引用（長文） 引用文であることを構造的に明示する必要がある場合に使用
通常文のインデントとしても使用
インライン要素 q 引用（短文） 引用文であることを構造的に明示する必要がある場合に使用
ブロック要素 address アドレス その文書に関する連絡先・問合せ先の記述

表1 および 表2 で「終了タグなし」と表記したタグについては、<タグ> という書き方をするより、最近のブラウザ（正確には XML）との互換を考慮して <タグ />のように半角スペース、スラッシュを追加した書き方を推奨する場合があります。

箇条書きの優先度をこれだけ低く設定しているのは、図4 に示すように「平文で工夫しようと思えば書けないことはない」構造であるためです。

図4 「ずるい」箇条書き

metaタグについて

<meta> は、ソフトウェアで文書を処理するための基礎情報を記述するために用います。以下に示すような属性と属性値をもち、一つの文書ファイルに対して複数記述することができます。

linkタグについて

<link>は、HTML文書間の関係を示すために用い、主に外部スタイルシートを参照する際に、以下のようにファイル名を記述します。

<link rel="stylesheet" href="sample.css" type="text/css">

divタグ、spanタグについて

<div>, <span>ともに、それ自身は特に意味を持っていません。しかしながら、<div>～</div>で囲んだ範囲を特別なブロックとして、 align属性で位置を指定したり、スタイルシートを適用したりするのに用います。同様に <span>～</span>で囲んだ範囲は特別なインラインとして、スタイルシートを適用するのに用います。 

エディタでHTML文書を書いてみる

ここまで、駆け足でHTMLタグの「仕分け」を行ってきました。たかだか15のタグで済むならば、それらを暗記し、HTML作成ソフトを使わずともそこそこの平文は書けそうです。…とはいえ、<meta>や<link>の設定など、まだまだ難しさが残るのも事実。そこで表3のように、メモ帳などのエディタを用いてHTMLを書くためのテンプレートを作っておくとよいでしょう。このとき、青文字車体の部分は以下のように適宜設定します。

表3 空文書の「テンプレート」 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="Keywords" content="キーワード1, キーワード2,…">
	<meta name="Description" content="紹介文（短文）">

	<link rel="stylesheet" href="xxx.css" type="text/css">

	<title>文書タイトルを表記</title>
</head>

<body>
	<h1>見出し</h1>
	<p>
		第1段落
	</p>
</body>

</html>

まとめ

本稿では「シンプルなHTML」を追究し、エディタを用いてHTMLを記述する際に最低限覚えるべきタグを示しました。本稿に示したタグは、「HTMLは文書構造のみに徹する」という原則に従ってとりあげたものです。これによって、HTMLを簡単に書くだけでなく、プログラムでHTMLを処理する際にプログラムとの親和性を高めることにもつながります。

今後は、本稿に挙げた文書構造に対して文書の体裁を司るスタイルシートのエッセンシャルを示し、本稿を基にHTMLをプログラムによって処理する実践例をご紹介したいと考えています。

更新履歴

2010/05/13: 作成

Back / Top