HTMLとは? の簡單なまとめです。
本文書はその實踐篇。
取敢へず、こんな文章があるとします。下手な小説ですね。まあ、五分ででつち上げたものなので、氣にしないで下さい。
血の復讐
野嵜健秀
序
月明りに照らされた草原に、人形のような赤い着物の少女が一人立っている。
いや違う。赤い着物などではなかった。白装束の下の清浄な体には無数の傷が付けられていた。全身から流れ出る鮮血に染まっていたのだ。
少女の顔は蒼白で、もはや死は確実であった。しかし気丈にも──というよりはもはや気力のみによって──彼女は立ち続けている。
少女はゆっくりと宙に手を差し伸べた。空に輝く星々を見上げる瞳には、もはや何も映ってはいない。
「さらば、愛しき星たちよ……」
その口から、呪詛の文句が静かに流れ出た。
「われは逝く──だが、われは復讐を望まんとす。このわが身を代償に。わが母なる一族に禍あれ！」
高らかに叫ぶと、少女は草の上に倒れた。月の光が少女を照らす。
次第に辺りからざわめきが起りはじめた。互に囁きを交わしながら、人々が少女の死体の周りに集ってくる。
取敢へず、このベタのテキストにマーク附けを施して、HTML文書化してみる事にしませう。
ポイント:文章を用意する事。
血の復讐
これは最上位の見出しです。h1要素としてマーク附けしませう。
<h1>血の復讐</h1>
野嵜健秀
「作者の名前」ですが、「項目が一つだけのリスト」と看做してしまつて良いでせう。
<ul>
<li>野嵜健秀</li>
</ul>
序
見出しです。既に「血の復讐」をレヴェル1の見出し(h1)を使つたので、ここはレヴェル2の見出し(h2)とします。
<h2>序</h2>
以下は本文です。
月明りに照らされた草原に、人形のような赤い着物の少女が一人立っている。
いや違う。赤い着物などではなかった。白装束の下の清浄な体には無数の傷が付けられていた。全身から流れ出る鮮血に染まっていたのだ。
少女の顔は蒼白で、もはや死は確実であった。しかし気丈にも──というよりはもはや気力のみによって──彼女は立ち続けている。
少女はゆっくりと宙に手を差し伸べた。空に輝く星々を見上げる瞳には、もはや何も映ってはいない。
「さらば、愛しき星たちよ……」
その口から、呪詛の文句が静かに流れ出た。
「われは逝く──だが、われは復讐を望まんとす。このわが身を代償に。わが母なる一族に禍あれ！」
高らかに叫ぶと、少女は草の上に倒れた。月の光が少女を照らす。
次第に辺りからざわめきが起りはじめた。互に囁きを交わしながら、人々が少女の死体の周りに集ってくる。
段落ごとに、p要素を作ります。
<p> 月明りに照らされた草原に、人形のような赤い着物の少女が一人立っている。</p>
<p> いや違う。赤い着物などではなかった。白装束の下の清浄な体には無数の傷が付けられていた。全身から流れ出る鮮血に染まっていたのだ。</p>
<p> 少女の顔は蒼白で、もはや死は確実であった。しかし気丈にも──というよりはもはや気力のみによって──彼女は立ち続けている。</p>
<p> 少女はゆっくりと宙に手を差し伸べた。空に輝く星々を見上げる瞳には、もはや何も映ってはいない。</p>
<p>「さらば、愛しき星たちよ……」</p>
<p>その口から、呪詛の文句が静かに流れ出た。</p>
<p>「われは逝く──だが、われは復讐を望まんとす。このわが身を代償に。わが母なる一族に禍あれ！」</p>
<p> 高らかに叫ぶと、少女は草の上に倒れた。月の光が少女を照らす。</p>
<p> 次第に辺りからざわめきが起りはじめた。互に囁きを交わしながら、人々が少女の死体の周りに集ってくる。</p>
原稿用紙に書く時、日本人は屡々名前を下揃へにしたり(縱書き時)、右寄せにしたり(横書き時)します。それから類推して、多くの人が「ホームページ」を作る際、まづレイアウトを考へるものです。しかし、原稿用紙や書籍と云つた紙メディアとウェブとは異るメディアです。「インターネットでも紙メディアの常識はそのまま通用する筈だ」等とは考へないで下さい。「ブラウザ上での右寄せ」即「作者を意味するもの」とは受取られません。
と云ふのは、ウェブで公開されてゐるHTML文書を讀みに來るのは人間ではないからです。或サーヴァに置かれたHTML文書を讀みに來るのは全てUser Agentと呼ばれるプログラムです。User Agentは、必ずしもブラウザではありません。檢索エンジンのインデックスを作る爲に巡囘してゐるロボットであつたり、何かの目的でウェブのデータを探してゐるプログラムであつたりします。
それらの全てのUser Agentに正當に解釋されるやう、制作者はHTML文書を書いておく必要があります。從來、HTML文書はブラウザで閲覽される筈のものだと思はれてゐました。しかし、ブラウザ以外のプログラムによつてもHTML文書が解釋される事は屡々ある、と制作者は考へておかなければなりません。
W3Cは、さう云つた多くの種類のUser Agentに解釋される事を豫期してHTMLの仕樣を作つてゐます。HTML 4.01等でW3Cが「推奬」としてゐる要素は、文書の構造に於る機能を示す要素であり、同時にネットワーク上で意味のあるものです。基本的に、W3Cの仕樣に從ふのが、ネットワークでHTML文書を公開する人間の守るべきマナーです。
小説等では「小見出し未滿」の場面轉換が良くあります。書籍では、さう云ふちよつとした文章の區切れを、屡々★とか※とか云つたマークで示します。それでは、HTML文書では、どのやうな形でさう云ふ區切れを示したら良いのでせうか。
★や※をセパレータに使ふ事も考へられますが、hr要素を用ゐるのも手です。「一行空き」をhr要素(水平線)で示すのは、必ずしも正確ではありませんが、無難なやり方です。
一方、意味上の纏まり毎に文章をグループ化するのも屡々有益です。「意味段落」を一つのdiv要素(汎用のブロック要素)に纏め、それぞれの「意味段落」の意味をid屬性やclass屬性で明示する、と云ふやり方も、屡々行はれます。
もつとも、そこまで考へないで、單純に「章の區切りはファイルの區切り」としてしまつた方が簡單かも知れません。
ポイント:文章を構造上の機能に基いて分割していく事。
以上で、本文の基本的なマーク附けはお終ひです。ファイル名を指定して保存しませう。(實際には、入力作業を始める時點でファイルを新規保存し、作業中、ことある毎に上書保存するやうにするのだが、ここでは考へ方を示す)
最後に、文書自體の題名を明示します。文書の内容を端的に要約し、title要素として記述します。
<title>血の復讐・序</title>
title要素は、ブラウザのBookmark(ブックマーク)/Favorate(お氣に入り)に利用されたり、リンク集のアンカーとして利用されたりします。title要素は、その文書の内容を表はす重要な要素ですから、絶對に省略してはなりません。
ポイント:最初にでも最後にでも構はないから、必ず文書の題名を附ける事。その題名をtitle要素として明示する事。
上記の説明で作成したHTML文書は、本文のマーク附けが終り、ほかにtitle要素が記述されてゐるだけです。これでこのHTML文書は「必要最小限のマーク附けがなされてゐる」と見做されます。
或は、以上のマーク附けが完了した時點で、正當なHTML文書と見做される文書が出來上がつてゐます。(html)
<title>血の復讐・序</title>
<h1>血の復讐</h1>
<ul>
<li>野嵜健秀</li>
</ul>
<h2>序</h2>
<p> 月明りに照らされた草原に、人形のような赤い着物の少女が一人立っている。</p>
<p> いや違う。赤い着物などではなかった。白装束の下の清浄な体には無数の傷が付けられていた。全身から流れ出る鮮血に染まっていたのだ。</p>
<p> 少女の顔は蒼白で、もはや死は確実であった。しかし気丈にも──というよりはもはや気力のみによって──彼女は立ち続けている。</p>
<p> 少女はゆっくりと宙に手を差し伸べた。空に輝く星々を見上げる瞳には、もはや何も映ってはいない。</p>
<p>「さらば、愛しき星たちよ……」</p>
<p>その口から、呪詛の文句が静かに流れ出た。</p>
<p>「われは逝く──だが、われは復讐を望まんとす。このわが身を代償に。わが母なる一族に禍あれ！」</p>
<p> 高らかに叫ぶと、少女は草の上に倒れた。月の光が少女を照らす。</p>
<p> 次第に辺りからざわめきが起りはじめた。互に囁きを交わしながら、人々が少女の死体の周りに集ってくる。</p>
また、以上の解説で出來たHTML文書を、讀者はInternet ExplorerやNetscape Navigator等のブラウザで閲覽してみて下さい。ブラウザはそれなりの形で表示して呉れる筈です。これだけの記述でHTML文書が完成してゐる事を讀者は理解して下さい。
HTML 4.01で、HTML文書に絶對に必要とされる要素は、title要素だけです。本文のないtitle要素のみがぽつんと記述されただけの文書も、正しいHTML文書です。
ポイント:HTMLにおいて最小限明示すべき要素は何かを理解する事。
かう云ふ形でテキストをマーク附けして行くと、自然に構造化された文書が出來上ります。
現實には、マーク附けを施しながら文書を記述する事も可能です。實際の所、私はさう云ふやり方で屡々HTML文書を記述します。構造を意識しながら文書を記述するのに、「マーク附けしながら」と云ふやり方は結構有效です。
「構造化エディタ」等なくとも、HTMLのマーク附けをやりながら文書を記述する事で、構造化された文書を書ける譯です。非論理的な文章を書きがちな方に、「マーク附けしながら」はお奬めします。
ポイント:整理された良い文章が「正しいHTML文書」の大前提と云ふ事。
必要最小限のマーク附けがなされただけのHTML文書は、プログラムの設定によつて(或は手動でプログラムの設定を變へる事によつて)正しくプログラムに解釋される可能性はありますが、常に正しく解釋されると云ふ保證がありません。今作つたHTML文書は、プログラムによつて適切に解釋されない可能性があります。
正しくHTML文書を整形・處理して貰ふ爲には、そのHTML文書について、User Agentに適切な情報を提示しなければなりません。必要最小限のマーク附けは本當に必要最小限でしかないのであつて、「それで十分」と云ふ譯ではありません。閲覽者やUser Agentへの「氣配り」として、必要最小限のマーク附けがなされた文書に適切な記述を追加しておきませう。
HTML文書に適切な情報を記述し、インターネットで問題なく公開する爲には、インターネットのプロトコルやHTMLの仕樣、言語環境に關する知識、及び慣習に關する知識を制作者が持つてゐる事が重要です。制作者は、豫めインターネット關聯の知識を身に着けておく必要があります。
ポイント:人間にとつてわかり易い文章も、それだけではプログラムにとつてわかり易い譯ではない事。
例へば、コンピュータは、歐米が發祥の地ですから、日本語(ここではかなとか漢字とか)を必ずしもデフォルトの状態で取扱ふ事が出來ません。日本人が日本語の文書を公開する場合、User Agentに「日本語を使つてゐる」と通知しておく必要があります。
また、日本語の文書を記述する爲の文字コードには、幾つかの種類があります。ブラウザが全ての文字コードを適切に自動判別出來る譯ではありません。ですから、多くの場合、文字コードを明示する必要があります。
色々なウェブサイトを見てまはつた制作者は、先程作つたHTML文書のサンプルがブラウザ標準のスタイルで表示されるのに、恐らく滿足出來ないでせう。
ブラウザに、デフォルトとは異る見た目でHTML文書を整形させる爲には、スタイルを記述し、HTML文書から呼出す必要があります。
先程作つたHTML文書のサンプルに、ヘッダを書き加へて、このサイトの標準のスタイルを適用したHTML文書のサンプルを作つてみました。ソースを比較してみて下さい。bodyの内容は全く變りません。
もつとも、「HTML文書の見た目」は、そのHTML文書を整形するブラウザの整形機能に完全に依存します。HTML文書自體に或はHTMLの仕樣に、HTML文書の整形を絶對的に指示する爲の規定は存在しません。
ポイント:人間には傳はる文章のニュアンスなり何なりをプログラムに「理解」させるには、親切にいろいろ指示してやらないといけない事。
「User Agentへの通知」に使はれる記述は、本文と區別して記述し、head要素の中身としてマーク附けします。逆に、飽くまで本文である事を明示する爲に、本文はbody要素としてマーク附けします。
ただしHTMLでは、或要素が「本文の要素か、さうでない要素か」が自明である場合、開始タグと終了タグを省略する事が許されます。よつて、head要素とbody要素の明示をしない(開始タグ・終了タグを記述しない)事が屡々許されます。
なほ、title要素は、文章をマーク附けすると自然に出來上る要素ではありません。しかし、文書全體の要約として、本文とは別に考へられて記述される事が常に期待されてゐる要素です。title要素を記述する事は、HTML文書を作成する際の「唯一の義務」と言へます。本文以外の要素である爲、title要素はhead要素の中に含まれます。
h1〜h6、p、と云つた本文の要素は、body要素の中に含まれます。
head要素にもbody要素にも含まれない要素と云ふものは存在しません。全ての要素は、最終的にhead要素かbody要素の中身としてマーク附けされる筈です。
本文(body要素)のマーク附けは筆者の意圖を閲覽者に傳へる爲のもの、ヘッダ(head要素)の記述は文書の技術情報をUser Agentに教へる爲のもの──と云ふ風に理解しておけば良いでせう。或は、ヘッダの記述はHTML文書をレンダリング(整形・解釋)するプログラムの爲にある、とおぼえておいて間違ひはないでせう。
本文の記述は「テキストのマーク附け＝構造化文書の記述」を普通に行へば良い──本文のマーク附けに、難しい事などないのがおわかりになつたかと思ひます。或は、これだけで構造化文書は作れてしまひます。HTMLでは、body要素の中身を極めて簡單に記述出來ます。
難しいのは、head要素に記述する「プログラミング的な宣言」「プログラムへの通知」の部分です。説明が煩雜になるので、それはこの文書では詳しく説明してゐません。