わかりにくいHTML入門

 これは,このサイトを作るに当たって得た,HTMLに関する知見の覚え書きを或問体で再構成したものです。個人が場当たり的に調べたものを,更に場当たり的に編集しているので,表現,内容,構成等に不適切な部分がある可能性があります。充分お気をつけください。そもそも人の言うことをそう簡単に信じてはいけません。

 基本的に,調べたことのメモですので,新しいことは何も言っていません。大体はW3Cのサイトで述べられていることばかりです。創造も提言もなく,ただ解釈だけという考証学的ないしスコラ哲学的な内容です。

 わかりにくいと称するからには,なるべく根元的な部分から始めたいと思います。手っ取り早くHTML文書を書きたい,という向きには迂遠に感じるかもしれませんが,知っておいて損はないと思います(時間を無駄にした,という一点を除く)。ただし,ものを一つ知るということは,苦しみが一つ増えるということをゆめお忘れなく。

目次

Q1 「或問体」って何ですか?

A1 いきなりメタな質問ですね。「或問曰(あるひとといていわく)...,對曰(こたえていわく)...。」という形式の文章のことをいいます。このスタイルは古くは諸子百家(あるいはもっと前。論語だって見方によってはこのタイプ)の頃より,主に説得的文章で使われてきました。日本でも思想や仏教などの文章に多く見られます。西に目を移せば,古くはプラトンの対話篇の諸作がこれに相当します。

 自説に別の立場をぶつけつつ,それを反駁するので,成功すれば客観的な印象を与え,説得力が増します。しかし,ついつい自己中心的な論理展開になりがちで,読者に「なんでここにこういう質問が出てくるの?」という疑念を抱かせないようにするには,かなりの構成力を必要とします。

 要は問答体とかQ&A形式とか,そういう言葉を使えばいいのに,敢えてこういう言葉を使っている訳で,本当に嫌な奴ですね。

トップに戻る

Q2 HTMLってそもそもなんですか?

A2 HyperText Markup Languageの略です。


 何の説明にもなっていませんね。ハイパーテキストというのは,要はいつも我々がWebブラウザで見ている,画像が埋め込まれたりリンクが設定されていたりする文書のことです。全く文字だけのテキスト文書よりも高機能な,「上位のテキスト」ということでしょう。CERNというヨーロッパの国際共同の物理研究機関のTim Berners-Leeが考案しました。

 Markupというのは,なかなか日本語に直しづらい言葉で,いや,直しづらいとはおこがましい,単に,言葉の持ち合わせが少ないだけなのですが,こんな感じで理解していただけるでしょうか。

 来週は中間テスト。社会(理科でも良し。国語や数学はあまりふさわしくないかな)の教科書を開き,とりあえず重要そうな所にマーカーで線を引く。なぁんてことをした記憶はありませんか? 私はものぐさなのでしませんでしたけれど。

 この,「マーカーで線を引いて重要なところをマークする」という行為が,Markupという言葉に一番近い日本語ではないかと思います(追記:markupで「組み指定」と言う意味があるそうです。不勉強でした)。HTMLの場合は,重要な部分だけではなく,「ここはリンクですよ」とか「ここに画像が入りますよ」なんていうのもありますが。markという言葉を使わないでいうと,文書に印を付ける,という言い方になるでしょうか。

 Languageはコンピュータ言語と似たような意味で解釈して問題ないでしょう。結局,全体で「ハイパーテキストを作るために印を付ける言語」,ということになります。

 今気づいたのですが,ということは,我々がブラウザで見ているのはハイパーテキストであってHTML文書ではない。その元になる,ソースの文書を,テキストで見るとHTML文書,ということになるのか? 何か私にもわからなくなってきた。

 ちなみに,最初,私は,Makeup Languageと誤って覚えていました。論外です。

トップに戻る

Q3 HTMLはどのように作られているのですか?

A3 作り方,ということであれば,追々説明します。ここでは,HTMLの大まかな構造について。HTMLというのは,SGML(Standard Generalized Markup Language)という規格に基づいて作られています。HTMLの構成要素は大きく分けると2つ,少し細かく見ると3つあって,

  1. 文書型宣言
  2. html要素
    1. head要素
    2. body要素

 html要素はhead要素とbody要素を含んでいます。文書型宣言以外の全てのデータがhead要素かbody要素に含まれている,つまりhtml要素は文書型宣言以外の全てを含んでいます。

 文書型だの要素だの訳が分かったようで゛分からない言葉が並びました。含む,って何なの,という気もします。おおよそ,訳が分からないというのは,言葉がわからないか,言葉の使われ方がわからないか,言葉の意味する概念が欠落しているかのいずれかですが,ここでは第2番目に該当すると信じて,ゆっくり噛み砕いていきましょう。長くなりそうなので,項を分けます。

トップに戻る

Q4 文書型宣言とは何ですか?

A4 文書の型を宣言する,のですから,「これはHTMLで書かれた文書だよ」と言えば良さそうですが,惜しいかな,それでは50点,いや,80点くらいかな。

 上記のA3で,全ての内容はhtmlという要素に含まれる,と書きました。この場合のhtmlという要素を最上位要素といいます。文書型定義では,まず,最上位要素が何であるかを示します。それとともに,最上位要素はどのような定義に基づいているか,を示します。HTMLにはいくつかのバージョンがあり,また,種類もいくつかありますが,これはそのうちのどれかを示します。

 などといってもピンとこないので,実際に見てみましょう。次の例は,この文書の文書型定義で,現在最新のHTML4.01という仕様のうち,一番基本となるStrictという種類を使ってHTMLを書くときのものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 場合によっては,2行に分かれて表示されているかもしれませんが,強制改行を含まないものとして理解してください。「//EN"」と「"http」の間には,半角スペースが一つあります。あるということにしておいてください。

 さて,これは,よく解説書なんかには,「HTMLを書く際の呪文みたいなものだから,とにかく言われたとおりに書きなさい」なんてあります。呪文というものは,本来意味があったものを,後世の人が形式的に惰性で唱えているうちに意味が分からなくなったものです。ここで本来の意味を取り戻してあげましょう。

 まず,最初の「!DOCTYPE」は何となく意味が分かりますね。「文書型を定義するぞ」といういうことです。次の「html」は,最上位要素です。大文字で書かれていることが多いのですが,この文書では最上位要素を小文字で書いた(理由は後述)ので,これも小文字にしておきました。「PUBLIC」というのは,「仕様が公表されている」という意味で,公表されていない仕様は「SYSTEM」と書くことになっています。現在公表されているHTMLのうち,公表されていないものはないですので(当たり前だ),通常ここはPUBLICになります。例外は,管見の中では見たことありません(公表されていないのですから)。SYSTEMはXMLなどで,専用の文書型定義がある場合に使われるようです。

 その次の,最初の""で括られた部分が,「html」が基づいている仕様です。「//」が区切り符号だ,というのはすぐに見当がつきますね。で,「-」。マイナス一つにしても莫迦にしてはいけません。これは,「公的機関(ISOなどが該当するようです)でないところが制定した」という意味です。以下,制定者,文書型の名前,使用言語の順に並び,全てを要約すると,最上位要素htmlは,

「公的機関でないW3Cが定めた,DTDという書き方で書いたHTML4.01という英語で書かれた規則」

に従っている。ということになります。「W3C」というのは,World Wide Web Consorsiumという,HTMLはじめ,CSSやXML関連の規格を定めている産学共同の機関です。

 次の""で括られたものが,そのDTDという規則のURI(後述)です。必要ならここを見れば,この規則が書いてありますよ,とブラウザやユーザに知らせているのです。では,早速見てみましょう

 ...と,準備運動もせずに飛び込むと溺れる原因となります。あ,もう飛び込んじゃった人がいるようですねぇ。まぁ,これも経験でしょう。溺れてあっぷあっぷしているうちに泳げるようになることもありますから(自分で「見てみましょう」なんて言っておきながらこの仕打ちとは,全くひどい奴だ)。

トップに戻る

 以下,続編が出来次第追加する予定です。あくまで予定です。


 ここに掲載する質問を募集はしていません。一般的または個別的な問いに答える力量はありませんので,間違えてもメールで質問など寄せないようお願いします。どうしてもわからないことがある,というのであれば,W3Cに仕様の日本語訳へのリンクがありますので,そちらを参照してください。

Valid HTML 4.01! W3C HTML Validation Serviceで正当なHTMLと判断されました

Valid CSS! W3C CSS Validatorで正当なCSSを使用していると評価されました

Another HTML lintで文法を確認しました。

真鍋汽船に戻る