久幸繙文

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

実際に例文をマーク付けしてみる

取り敢ず、前回の基礎編で、マーク付けを行う為に最低限必要な知識は書きました。ここでは、実際の例文をマーク付けしながら、基礎知識を実用に向けてより深く掘り下げていきたいと思います。

今回使用する文章のプロット(下書き)は以下のものです。要所要所に補助的な情報を加えておくと、あとでマーク付けする際の手助けになります。慣れてくると文章を書きながらマーク付けすることの方が多くなりますが、まあ、あくまでもとっかかりと言うことでご諒承下さい。


題名:HTMLについての小言

大見出し:HTMLについて

章見出し:HTMLを書くときの心得
HTML文書を書く際、重要なのは、作ったHTML文書が(強調〜)どのような形で利用されるか(〜強調)を考えないことだ。
Web上で公開されたHTML文書は、特に制限を課さない限り、世界中の人々が自由に読むことが出来る。
人によって、文章の利用法はそれぞれ異なってくる。もしかしたら、自分の思いもよらぬ方法で活用されているかも知れない。
HTMLの規格を制定したW3C(URL:http://www.w3.org/)は、次のように謳っている。

  (引用)HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。

全てのHTML文書作成者は、このことをよく心に留めておくべきである。

章見出し:HTMLを書く際の注意点
  ・HTML文書内には必ずtitle要素が存在しなければならない
  ・HTMLでデザインを指定出来ない。デザインを指定するのはスタイルシートの役割である
  ・日本語の文章の場合、文字コードに注意しておかないと、文字化けする虞がある

では、具体的なマーク付けに入ってまいりましょう。

文章の題名を表すtitle要素

まずは、文章の題名をtitle要素でマーク付けします。


<title>HTMLについての小言</title>

HTML文書内には、title要素が必ず一つだけ存在していなければなりません。HTML文書をネットワーク上で公開する以上、「名無し」のファイルなんて公開するのは止めてください。またtitle要素は、ブックマーク(お気に入り)登録時のファイル名やリンクのアンカーなどにも利用されますから、その文書についての内容を的確に表した語句を指定すべきです。

章の見出しを表すh1〜h6要素

文章の各章や各節毎に見出し(heading)を表すことが出来ます。適切に配置すると文章にリズムが出てきますし、アプリケーションソフトによってはファイル内の見出しを抽出して簡易な目次を生成すると言った機能を持つものもあります。

一番上位のh1要素から、それぞれ章見出し、小見出し…と言った具合に徐々に数字が下がっていきます。数字は見出しのレベルであり、間違っても順番を意味するわけではないので注意してください。


<title>HTMLについての小言</title>

<h1>HTMLについて</h1>

<h2>HTMLを書くときの心得</h2>
(略)

<h2>HTMLを書く際の注意点</h2>
(略)

最上位の見出しは文章全体の見出しですので、h1要素は一つのHTML文書内に唯一であるべきです。役割としては「title要素」に似ていますが、あくまでもh1要素は文章全体の見出しですから、必ずしも文章の正式名称である必要はありません。[1]

[註.01] 時折、h1-h6要素のことを「文字の大きさを変える要素」などと解説しているサイトを見かけますが、全くのデタラメです

節を表すp要素

本文は、一つの文章節(paragraph)毎にp要素でマーク付けします。この「節」という考え方がいまいち飲み込めない人は、取り敢ず「段落」とか「行頭から行末まで」のことだと思っていただければ差し支えないと思います。

HTMLは基本的に右端から折り返されて表示されますので、要素内に必ずしも改行を入れる必要はありませんし、指定文字数毎にp要素でマーク付けしなければならないというものでもありません。自然に、一文章節毎にp要素でマーク付けしていってください。


<title>HTMLについての小言</title>

<h1>HTMLについて</h1>

<h2>HTMLを書くときの心得</h2>
<p>HTML文書を書く際、重要なのは、作ったHTML文書が(強調〜)どのような形で利用されるか(〜強調)を考えないことだ。</p>
<p>Web上で公開されたHTML文書は、特に制限を課さない限り、世界中の人々が自由に読むことが出来る。</p>
<p>人によって、文章の利用法はそれぞれ異なってくる。もしかしたら、自分の思いもよらぬ方法で活用されているかも知れない。</p>
<p>HTMLの規格を制定したW3C(URL:http://www.w3.org/)は、次のように謳っている。</p>

  <p>(引用)HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。</p>

<p>全てのHTML文書作成者は、このことをよく心に留めておくべきである。</p>

<h2>HTMLを書く際の注意点</h2>
(略)

このように、テキストを中心としたHTML文書であれば、title要素、h1-h6要素、p要素の三種さえマーク付けしてしまえば、ほとんど出来上がったようなものだと言えます。

箇条書きを表すul/ol要素とli要素

箇条書きはまず、箇条書きの一項目(list item)毎にli要素でマーク付けします。そして、その項目全体を箇条書きが順不同(unordered list)であるときはul要素で、順列書き(ordered list)であるときはol要素で抱括します。

例文の場合特に順番に意味はないので、ul要素でマーク付けします。


<title>HTMLについての小言</title>

<h1>HTMLについて</h1>

<h2>HTMLを書くときの心得</h2>
(略)

<h2>HTMLを書く際の注意点</h2>
<ul>
<li>HTML文書内には必ずtitle要素が存在しなければならない</li>
<li>HTMLでデザインを指定出来ない。デザインを指定するのはスタイルシートの役割である</li>
<li>日本語の文章の場合、文字コードに注意しておかないと、文字化けする虞がある</li>
</ul>

一方以下のような文章であれば、上から順に作業を説明しているため、ol要素でマーク付けする方が妥当と言えるでしょう。


<title>卵かけご飯を作リ方</title>

<h1>卵かけご飯を作ってみよう</h1>

<h2>手順</h2>
<ol>
<li>卵を茶碗に入れて十分に溶く</li>
<li>上からご飯を静かに入れる</li>
<li>卵とご飯を混ぜながら醤油などをたらして豪快に食べる</li>
</ol>

箇条書きは文章を簡潔にするために良く用いられる手法で、特にディスプレイ上の文章は流し読みされる傾向が強いと言われていますから、p要素と並んでこのul/ol要素とli要素を覚えておくと、読みやすい文章を書く手助けになります[2]

引用を表すblockquote要素とq要素

Webに限らず、引用した文章は必ず他の文章と区別をつけて、引用元を適切に明示しなければなりません。HTMLにおいてはblockquote要素もしくはq要素で引用であることを明示します。


<title>HTMLについての小言</title>

<h1>HTMLについて</h1>

<h2>HTMLを書くときの心得</h2>
<p>HTML文書を書く際、重要なのは、作ったHTML文書が(強調〜)どのような形で利用されるか(〜強調)を考えないことだ。</p>
<p>Web上で公開されたHTML文書は、特に制限を課さない限り、世界中の人々が自由に読むことが出来る。</p>
<p>人によって、文章の利用法はそれぞれ異なってくる。もしかしたら、自分の思いもよらぬ方法で活用されているかも知れない。</p>
<p>HTMLの規格を制定したW3C(URL:http://www.w3.org/)は、次のように謳っている。</p>

<blockquote>
<p>HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。</p>
</blockquote>

<p>全てのHTML文書作成者は、このことをよく心に留めておくべきである。</p>

<h2>HTMLを書く際の注意点</h2>
(略)

しかしながら、考えていただければ分ると思いますが、仮にblockquote要素で引用であることを表しても、それだけでは引用元が一体どこの何の文章であるのかさっぱり分りません。このように、要素のマーク付けだけでは表せない情報は、属性という形式で要素に附加する必要があります。blockquart要素の場合はtitle属性cite属性を使い、title属性には引用先の題名、cite属性には引用先のURLを指定します。

属性は<要素名 属性名="属性値" 属性名="属性値" ...>〜〜</要素名>という書き方をします。


<blockquote title="HTML4.01の仕様書「2.2.1 HTMLの略歴」より"
            cite="http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/intro/intro.html.ja.sjis#h-2.2.1">
<p>HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。</p>
</blockquote>

要素名や属性名同士の間は、基本的に半角スペースで区切って並べます。ですが、HTML文書内の半角スペースや改行やタブは、その連続を問わず全て一個の半角スペースとして処理される[3] [4]ため、たくさん属性を指定する時は適度に改行してインデントをつけておくと、あとで読み返す時に楽になります。また、要素でマーク付けされた部分をインデントしておくといった手法も、メンテナンス性を向上させる点で広く用いられています。

一方、文中にとどまるような短い引用の時はq要素でマーク付けします。この場合もblockquote要素と同じようにtitle属性、cite属性で引用元を明示することが出来ます。

ただ、普通引用元と言うのは前後の文脈で自然に紹介されるものですから、q要素のような短い引用文にまで何が何でも絶対書き入れなければならない、という程のものでもないと私は考えています。要は、自然に文章を読んだ時に引用元が適切に伝われば、それで十分なのです。


<p>夏目漱石の代表作「吾輩は猫である」の冒頭は<q>吾輩は猫である。名前はまだない</q>です。</p>

[註.03] この半角スペース、タブ、改行のことを、HTMLではまとめて空白文字と呼びます。なお全角スペースは空白文字に含まないため、属性同士の区切りに全角スペースを使ってはいけません。

[註.04] 厳密に言えば空白文字にはもう少し細かい規則があるのですが、普段はあまり意識しておく必要はありません。

語句からのハイパーリンクを表すa要素

HTMLをHTMLたらしめる機能の一つにハイパーリンクと呼ばれるものがあります。一般に「リンク」と呼ばれるもので、簡単に言えばある対象とあるURLとを機械的に関連づけるものです。と、まあ、概要だけ説明しても分りづらいので、先に例を見てもらいましょう。前者がリンクしていない例、後者がリンクされた例です。


<p>HTMLの規格を制定したW3C(http://www.w3.org/)は、次のように謳っている。</p>

出力例:HTMLの規格を制定したW3C(http://www.w3.org/)は、次のように謳っている。


<p>HTMLの規格を制定した<a href="http://www.w3.org/">W3C</a>は、次のように謳っている。</p>

出力例:HTMLの規格を制定したW3Cは、次のように謳っている。

……どうでしょう。何となく概要はつかめてもらえたでしょうか。

この例では、http://www.w3.org/というアドレスにある文書と「W3C」と言う文字列を関連づけています。このように関連づけられていれば、例えばInternet Explorerなどで読み込んだときに、クリック一つでアドレス先の文書を参照することが出来ます。

a要素は、ハイパーリンクのうちの一つである文中のある語句とあるURLとの関連付け(link anchor)を明示する要素です。a要素でリンクしたい文字列をマーク付けし、href属性でリンク先のアドレスを指定します。

なお、アドレス(正確にはURIなのですが、今のところ覚える必要はありません)には、絶対パス相対パスという二つの記法があります。

絶対パス
「日本国兵庫県神戸市兵庫区○○町××丁目☆☆番」という具合に、どこからみても唯一であるアドレスの記法のこと。「http://www.takamagahara.info」「http://www.google.ne.jp」など。
相対パス
「隣町の××丁目☆☆番」と言う風に、自分の位置を起点として相対的に相手の位置を表現するアドレスの記法のこと。「../index.htm」「xxx/yyy.jpg」など

マーク付けの話から外れるため本解説ではこれ以上詳しく解説いたしませんが、アドレスの記法はリンクを行ううえで必ず必要になりますので、なるべく早く理解しておくようにしましょう。取り敢ず、久樹がおすすめする解説ページを紹介しておきます。

ちなみに、自サイト内では相対パスを、自サイト以外のファイルにリンクする場合は絶対パスを使用するのが一般的です。

[註.05] 後半部分はかなり専門的ですので現段階では理解する必要はありません。

強調を表すem要素

文中の語句を特に強調(emphasis)したい場合、em要素でマーク付けします。HTML以外では二重カギ括弧(私は昨日『あるもの』をみた、など)で表現するのが一般的ですね。


<p>HTML文書を書く際、重要なのは、作ったHTML文書が<em>どのような形で利用されるか</em>を考えないことだ。</p>

適切な強調は文章のスムーズな理解を助けますが、あまりごちゃごちゃ強調してしまうと、今度は本当に強調したい部分がぼやけてしまいがちです。なので、慣れないうちはなるべく強調を控えておいた方が良いと私は思います。em要素は、本当に強調したいときにだけ使うべきです。

完成

さて、これで一応一通りのマーク付けが完了しました。


<title>HTMLについての小言</title>

<h1>HTMLについて</h1>

<h2>HTMLを書くときの心得</h2>
<p>HTML文書を書く際、重要なのは、作ったHTML文書が<em>どのような形で利用されるか</em>を考えないことだ。</p>
<p>Web上で公開されたHTML文書は、特に制限を課さない限り、世界中の人々が自由に読むことが出来る。</p>
<p>人によって、文章の利用法はそれぞれ異なってくる。もしかしたら、自分の思いもよらぬ方法で活用されているかも知れない。</p>
<p>HTMLの規格を制定した<a href="http://www.w3.org/">W3C</a>は、次のように謳っている。</p>

<blockquote title="HTML4.01の仕様書「2.2.1 HTMLの略歴」より"
            cite="http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/intro/intro.html.ja.sjis#h-2.2.1">
<p>HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。</p>
</blockquote>

<p>全てのHTML文書作成者は、このことをよく心に留めておくべきである。</p>

<h2>HTMLを書く際の注意点</h2>
<ul>
<li>HTML文書内には必ずtitle要素が存在しなければならない</li>
<li>HTMLでデザインを指定出来ない。デザインを指定するのはスタイルシートの役割である</li>
<li>日本語の文書の場合、文字コードに注意しておかないと、文字化けする虞がある</li>
</ul>

これでようやく最小限のマーク付けは完了しました。最小限と言っても、このままWeb上に公開することだって可能ですし、もうHTMLについて7割はマスターしたようなものだと言えます。

もちろん最小限だけというのでは、やはり何かと不便な面が出てきます。次回はHTMLにまつわる知っておいて欲しいその他の知識についてまとめて解説いたします。

久樹 輝幸