久幸繙文

シンプルで合理的なHTML文書作成法入門:基礎編

当記事の概要

  • 当記事は、HTMLは簡潔であるべきという思想を基とし、シンプルでかつ合理的なHTML文書を作成するための入門です。
  • 基礎編、実践編、発展編、補足編の四編に分けて構成しています。
  • 後方互換のための要素や普段使用しない事項は意図的に除外しています。当記事はHTMLに関する抱括的な解説ではありません。
  • 発展編でHTML4.01 Strict、補足編でXHTML1.0適合となるよう解説していくつもりでしたが、XHTMLについてはまた別途独立して書きます。
  • 全体としてテキストを中心としたサイトを主な対象としています。

当記事を作成した動機

  • 単なる久樹の覚書として。
  • 世の中にはあまりにもデタラメなHTMLの解説を行うサイトや書籍が多すぎるから。
  • 初心者の方にHTMLを教えてと言われた時にまとまりをもって解説出来るものが必要だったから。
  • 当サイトが今まで繰り返し述べてきた「HTMLのあるべき姿」とはどのようなものか、それは他のHTML文書とどのように違い、そしてそれにはいかなる利点があるのか、という点を、一貫性を持って再整理したかったから。

何故シンプルなHTMLを勧めるのか

ここで解説する「簡潔なHTML」とは、何故HTMLは難しくなければならないのか、本当に難しいことをしなければHTMLは活用出来ないのか。という疑問に対する私なりの答えです。

HTMLはWeb文書を作成、公開するための形式であり、道具であり、手段です。何かを作るとき、その手段の本質――何をすることに向いているのか何をすることに向いていないのか――を正確に把握することは、作り出すものをより効果的にするために必要なことです。そしてそれを考えるためには、まずHTMLとはどういうものなのかをよく知っておく必要があるのです。

また簡潔なHTMLには、複雑なHTMLよりも多くの利点をもたらし得ます。

  • 簡潔であるから、後で読み返しやすく、メンテナンス性に優れたものとなります。
  • 特に長文になればなるほど、ファイル数が増えれば増えるほど、メンテナンス性の重要度はますます高まります。
  • 簡潔であるから、閲読者やアプリケーションソフトに不必要な誤解・混乱を与える虞が劇的に減ります。
  • 簡潔であるから、不必要なタグの数が減り、ファイルサイズは軽減され、通信資源を有効に活用することが出来ます。
  • 一般にサイズの小さい「軽い」サイトは、閲読者に喜ばれる傾向があります。

当記事は、シンプルなHTMLとは何かとその方法について、なるべく分かり易く解説していくつもりです。

HTMLとは何か

HTMLは、インターネットを通じて異なるコンピュータ間で文書をやりとりする際に用いられる、標準的なファイル形式の一つです。

インターネット上には、自分とは全く異なる環境にあるコンピュータが非常に多く存在しています。例えば、デスクトップPCで作成したMicrosoft OfficeのWordファイルは、そのままファイルを転送してもWordのインストールされていないPCや、まして携帯電話やゲーム機の端末などで読むことは出来ません。

そこでHTMLでは、例えばデスクトップPC、ノートPC、携帯電話などの装置的な垣根、或いはWindows、Mac、UNIXのようなOSの垣根、或いはInternetExplorer、Netscape、Firefox、Operaと言ったアプリケーションソフトの垣根、或いは映像や印刷や読み上げなどの利用法の垣根などを越えて、あらゆる文書をあらゆる環境から一次的に――つまり、ファイルの変換を必要とせずに――交換出来るように設計されています(以下HTMLの仕様書から抜粋)

HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。

どのバージョンのHTMLも、コンテンツプロバイダの投資が無駄にならないよう、また短期間で文書が読み取り不能となったりすることがないよう、産業界の幅広い賛同を反映するようにされてきた。

HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。

Web社会が拡大し、参加者の能力や技術レベルの差異が広がったことで、各参加者の個別ニーズを満たす基盤技術の存在が重要になってきた。HTMLは、身体的な限界を持つ人々に対してWebページをよりアクセスしやすくできるよう設計されている。

誰にとっても、特に障碍者にとってもWebをよりアクセスしやすくするため、著者は、自分の文書が音声出力ブラウザや点字出力等、様々なプラットフォームでどのようにレンダリングされるかを考慮する必要がある。 本仕様は、著者の創造性を制限しようというのではなく、設計時に代替的レンダリングのことを考慮するよう推奨するものである。 HTMLは、アクセス性方面に関して、例えば alt属性や accesskey属性など、数多くの機構を提供している。

更にまた、著者は、自分の文書が、異なる設定の計算機を利用する遠く離れた読み手にも届けられ得るということを心に留める必要がある。文書が正しく解釈されるよう、著者は文書に、何語の文書かということや、テキスト方向、文書の符号化方法、その他国際化に関わる情報を含めておかねばならない。

重ねて強調しておきますが、HTMLという規格は本来、ブラウザやOSや身体障碍や言語といったあらゆる環境を一切限定しないのです。時折「このサイトは必ずInternet Explorerで閲覧してください」などと言った断り書きを見かけることありますが、HTMLの本来の性能から考えれば随分もったいない話だと言えるのです。

HTMLの基本的な形式

HTMLは、単なる文字だけのテキストデータから、マーク付け(Markup)と呼ばれる作業によって、文書を構成する情報(文書構造)を、コンピュータに明示させることを目的としています。

まずはおおよその概要をつかんでもらうために、次の例を見てください(HTMLではなく、あくまでもマーク付けという概念から見た例です)


<題名>山月記</題名>
<段落>隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、
自ら恃むところすこぶる厚く、賎吏に甘んずるを潔しとしなかった。</段落>

上の例は、中島 敦の小説「山月記」の冒頭部分です。このマーク付け文書を受け取ったコンピュータは、もし<題名>〜</題名>で挟まれた部分が題名を表すと知っていれば、「これは題名だな」、同じように<段落>〜</段落>で挟まれた部分を「これは一つの段落だな」と理解する事が出来ます。マーク付けとはこのように、文章の意図や構造をコンピュータに解釈できるよう目印(マーク)を付けていく作業をさします。

通常のテキストデータの場合、コンピュータはそのテキストの内容を理解しなければ、文章の構造を把握することは出来ません(コンピュータが小説を読んで、「ここは場面が変わったから違う段落だ」などと理解するのは難しい話です)。

しかし、HTMLによるマーク付けを行うことで、コンピュータがその文章を本質的に理解出来なくとも、文章の構造を正確に把握することが出来るのです。要は、HTMLは私たちの言葉(自然言語)とコンピュータとの間を橋渡しする補助的な情報だと思ってください。

何故そんな回りくどいことをする必要があるのでしょうか。それはHTMLが、コンピュータに文書構造を正確に理解してもらうことで、それを読む環境の違いを柔軟に埋め合わせてもらおうという考えを持っているからです。そしてこの考え方が、他のワープロ文書やFLASHなどと決定的に異なる点です。

逆に言えば、HTMLである以上、環境が違えば表示のされ方も異なっていて当然だという気持ちを持たなければならないといえます。

ところで、私たちは普段から、実はこれと似たようなことを文章を書く上で利用しています。例えば、会話文はカギ括弧("「"と"」")で括りますよね。これもある意味一つの立派なマーク付け例であり、このことを覚えておくと、マーク付けの概念を把握する一つの手助けになろうかと思います。

先ほどの例文をHTMLとして置き換えると、以下のようになります。


<title>山月記</title>
<p>隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、
自ら恃むところすこぶる厚く、賎吏に甘んずるを潔しとしなかった。</p>

いやいや、何のことはありません。単に「題名」を「title」、「段落」を「p」(=paragraph)に置き換えただけの話です。HTMLは国際的な規格ですから、国際的に通じる言語として英語を使っているに過ぎません。そして、HTMLという規格を知っているコンピュータであれば、例えば「この文章の題名を出せ」という命令を与えれば、<title>〜</title>で括られた部分を抽出して「この文章の題名は『山月記』です」と言った具合に出力することも出来るのです。

つまるところ、HTMLはこのマーク付けのやり方と、それぞれのマークの名前と意味さえ覚えておけば、簡単に作成することが出来ます。ちなみに、上は一番簡単なHTML文書の例です。実際、上の例文はこれだけで、HTMLとして最低限の条件はクリアしたことになります。もちろん完璧というわけではありませんが、この大元を理解することが一番肝要なのです。

用語の説明

ここではHTMLの具体的な実践例の前に、HTMLにてマーク付けを行う上で最低限知っておいて欲しい用語について説明します。

タグ
マーク付け作業において使用される目印のこと。普通「開始タグ」と「終了タグ」を組み合わせて使い、両タグに括られた部分の要素を明示します。
開始タグ
「<○○>」と書きます。○○には要素名が入り、「ここから○○という要素があるよ」ということを明示します。
終了タグ
「</○○>」と書きます。○○には要素名が入り、「ここまで○○という要素があるよ」ということを明示します。
要素
タグによって明示された情報のこと。要素の名前(要素名)がそのままマークの名前になります。基本的に、HTMLにおいて要素名は全て小文字で書きます。

それぞれの用語の関係を図で表すと以下のようになります。

          title要素の内容
             |
title要素の開始タグ    |     title要素の終了タグ
    ↓         ↓           ↓
  |<title>      山月記      </title>|
  |                      |
  |←   title要素(文章の題名を表す)   →|

これからHTMLのいろいろな要素を紹介していきますが、もし途中で分からなくなったらこの図をもう一度思い出してみてください。

コラム:HTMLで見た目の情報を記述する?

  • 必要なければ読み飛ばしてもらっても構いません(記事の続き

これは一般的によく間違われる誤解なので、わざわざここで一つお断りしておきますが、HTMLを使って文章に見た目に関する情報を加えることは一切推奨されていません。時折、字を大きくするための要素だとか色を変えるための要素だとか、そういう見た目を操作する要素が紹介されることがありますが、そういったものはHTMLの本質から見れば非常に具合の悪い要素です。

先ほどの「HTMLとは何か」にも書きましたが、HTMLはあらゆる環境を限定することなく情報交換出来るよう設計されています。しかし、見た目というものは本質的に、最適値が環境によって大きく左右されます。例えば、ある字の大きさがある人にとっては読みやすくても、別の人にとっては非常に読みにくかったりします。或いは、印刷する時はインク代節約のために色を極力減らして欲しいと思う人もいます。このように、見た目(スタイル、レイアウト)の強要は相手にとって不便を強いる可能性があるのです。

しかし、そうはいっても、やはり個性的なWeb文書を公開するには、見た目が大切な要素である事も事実です。そのため、見た目を操作するための要素が、Webが予想外のスピードで普及する中勝手に作られ、そして広まってしまいました。これでは、汎用的で合理的なWebを実現することは到底かないません。

そこでW3C(World Wide Web Consortium:HTMLなどのWeb技術の基本仕様を定義する団体)は、この問題をStyle Sheetという概念を導入することでとても綺麗に解決することにしました。Style Sheetとは、HTML文書とは独立してHTMLなどの各要素に対してスタイル情報を指定すためのものであり、HTML文書にとって、Style Sheetはあくまでも「こういう風に出力して欲しいな」という要望に過ぎないと解釈されます。

例えますと、

ワープロ文書などの例

作成者側
ここの語句は強調したい→だから他の文字と色を変えて太字にしよう
コンピュータ
文章のこの部分は赤い太字で出力する
閲読者側
ここの文字は赤い太字になっているぞ→多分これは強調したい部分なんだろう→でも太字は読みにくいなあ。

HTML文書とStyle Sheetを組み合わせた例

作成者側
ここの語句は強調したい→強調を表す要素でマーク付け+Style Sheetで強調部分は赤い太字にすることを要望
コンピュータ
文章のこの部分は強調して出力する。なお、作成者は強調部分を赤い太字にすることを望んでいる。
閲読者側
ここは強調したい部分なのか。だから赤い太字になっているんだな→でも太字は見にくいから強調はただの赤字として出力させよう

という感じになります。ここで大切なのは、見た目がどう変わっても作成者側の「強調したい」という意思が確実に伝わっているという点です。このような観念をスタイル情報と文章情報の分離と言い、HTMLが汎用的な環境に対応できるようになった最大の理由でもあります。

ですから、当解説ではデザインに関する話を一切致しません。HTMLに見た目の情報を加えることは再利用性を著しく損なう事につながるからです。見た目の定義に関する解説は、当サイトのCSS入門(仮)で詳しく解説する予定です。それまではスタイルなCSSの基礎講座はじめてのWebドキュメントづくりなどをご参考下さい。こちらも非常に分りやすい内容でお薦めできます(まあ、あくまでもStyleSheetは正しいHTMLの知識があることが前提になりますけどね)

繰り返しますが、Web文書でデザインを強要することは不便を強いることと同じなのだという事は、常に頭の片隅に置いておいてください。

しかし逆に言えば、正しく書かれたHTML文書であれば、先ほどの例のように、ユーザが定義した独自のスタイルシートを利用することで、スタイル情報を思い通りに上書きすることが出来ます。非常に便利な仕組みですので、HTMLとStyleSheetをある程度理解した後、是非作成に挑戦してみてください。

久樹 輝幸