Stardust Crown
私はできる限り“行儀良い”HTML文書を書こうとしています。ここでいう“行儀良い”とは、まず仕様に反していないということであり、また、ウェブ上の理念に沿ったものということであり、さらに、私の理想に近いものということです。
そういうことで、疑問な点は他のサイトなどで勉強するようにはしていますが、どうやら見解が分かれているところもあります。実際、この文書を執筆するきっかけとなったものは、ある筋からの「段落のインデントは空白ではなく text-indent で表現すべきでは？」という指摘です。本来ならその筋で返答すべきだったのかもしれませんが、かなり時機を逸してしまいました。むしろ良い機会を得たと捉えて、それを含め、兼ねてから悩みどころだった問題に対する、わたしなりの答えをまとめてみようと思います。
したがってあくまで一つの見解です。つまり本ページは「サイト記述講座」ではありませんから、そのつもりでお読みください。（もちろん、批判・意見を受け付けないという意味ではありません。）
作者の思考（意図）・内容・記述、この３つの意識が重要だと思います。つまり、伝えたい何かがあり、それを表現して内容を作り、さらに装飾を併せて記述とする、という考え方です。
HTML文書での記述はそれが内容なのか装飾なのかが特に重要になりますが、その根元には作者の意図を伝達するという目的があることを忘れてはなりません。
まず記述すべき内容の位置付けを考えるのが基本です。例えば見出しなのか本文なのか、というものですね。（位置付けは自分の意図をよく考えれば自ずと決定されるはずです。）
大抵の場合はすっきりと割り切ることもできますが、やはりどこに位置するのか迷うような部分もあって、そこが問題になります。曖昧な境界しか引けない場合もたまにあるような感想があります。
そこで、その記述を別のもので取り替えることが可能かどうか（代替の影響）が大切な尺度になります。また、省略した場合にどうなるか（省略の影響）という視点も重要です。
すなわち、該当部分を別の何かで置き換えたり、あるいは削除したりしたとしても、著者の意図がきちんと通じるとしたら、その部分は装飾に分類される可能性が高いと言えるのです。逆に、該当部分を置換・削除すると不整合が発生する場合、その部分は内容である可能性が高いわけです。
特に、CSS デザインを前提にするのであれば、ユーザーの代替スタイルシートでも大丈夫か、また、スタイルシートをオフにしたブラウザでも普通に閲覧できるかどうか、これがしばしば話題になります。
さらに記述はなるべく簡潔である方が望ましいはずです。というより、冗長でない方が自分に楽なので、そうしているのかもしれません。とにかく個人的には、冗長性を排除することも大切だと思います。（ちなみに表現自体も回りくどすぎると作者の意図を損なうでしょうが、ここでは、どちらかというとマークアップ記述の簡潔さについての意見です。）
例えば、p 要素というのは、paragraph を示すものでしょう。それをなぜ paragraph 要素ではなく、p 要素にしたのかといえば、頻繁に使いそうなものなので、簡略化したキーワードを用意したということですよね。（ちょっと違うような気もしますが）そういうことで、同じような表現が可能であれば、わざわざ冗長なマークアップを行う必要はありません。簡潔に書けるならば、簡潔にすべきだと思います。
ほとんど問題にはなりませんが、ウェブ上の文書ということで敢えて理屈を付けるならば、ネットワークのトラフィックと関連付けることもできるかもしれません。塵も積もれば何とやら。個人レベルでは、メンテナンスの便利さの方が重要でしょうか。
色々と考慮すべき条件もありますので、私は「妥協しましょう」と呼びかけることにします。情報の位置付け、代替・省略の影響、冗長性の排除、それらを総合的に加味して判断すればよいのです。そして妥協とは、必ずしも解決策が唯一解ではないかもしれない、という意味です。人によって基準が違うのは実は問題のような気もしますが、まあ大勢に影響はなく、見逃してもよいでしょう。
画像やプラグインなどの非テキスト系要素を中心に、代替文字列など、元々のものと等価の情報を用意すべきという勧告があります。しかしながら、これが不可能ないし難しい場合が多々あります。なお、以下は画像を表示できる環境を想定した記述です。
観賞用画像（ＣＧ）の例で説明します。上のような画像と等価な情報をどう記述すべきでしょうか？ いくつかの方法がありますね。
alt="太陽と月の両面の顔をもつマスコットキャラクターの絵です。右半分の広い部分が、黄色の肌、白地にぎらつくような黒の大きな瞳を一つもち、オレンジ色の光輪をもつ太陽の顔になっています。左半分の細長い部分が、やはり細長い目を一つもった青の月で、三日月くらいの形状です。全体として二つの目を持った一つの顔です。闇夜のような黒を背景に、ぼんやりとした白の光を放っています。"
これはとても親切であり、理想に近いかもしれません。（もしかすると、閲覧者はそもそも作者がこの文章を伝えたかったのだと誤解する可能性があるかもしれませんが、さらに方法３と組み合わせることで対応できます。）しかしながら、制作者の負担が少しばかり重いですよね。
alt=""
カウンタなどでは有効な手段です。不要または不可能であれば、はじめから表示しないというのも一つの手段です。実は、かなり推奨されている方法でもあります。不十分な伝達しかできないなら何も伝えるべきでないということですね。
ただし、本文と結びついている場合は、省略することで文意が全くちぐはぐなものになってしまうかもしれません。また、個人的には、画像を入れるからにはそれなりの意図があったはずで、何らかの手がかりは残すべきかと思います。つまり、何も表示していないということは、作者の意図する何かを伝えていないという情報を、閲覧者に知らせていないわけですから。
alt="JPEG画像の表示が有効なブラウザの場合、マスコットキャラクター（マウンス）の絵が表示されます。"
これは幾分か不親切であり、理想からは遠ざかっているものですが、少なくとも情報が欠損してしまっていること、そしてその対処方法を示すことはできています。いわゆる道標だけを示しておくという考え方です。不幸にして情報にアクセスする手段のなかった閲覧者は、自分が何を見られなかったのか、そしてどうすればそれが見られるのか、を知ることができます。したがって、alt="マスコットキャラクター（マウンス）" より“踏み込んだ”対応になっているはずだと考えています。
等価ではないにしろ、代替としての使命は果たしているでしょう。私はこの思想に基づいた運営を行っています。
※方法１と方法３の組み合わせとは、方法３の alt の後に、方法１のような alt を繋げるものです。もとが画像であったこと（つまり代替テキストであること）を示しながら、さらにその内容を説明することができます。実は上記画像の alt がこれを採用しています。alt が長すぎるようなら、内容説明の部分は longdesc 等を使って分離してもよいかもしれません。
画像のようなものであっても、それが静的なオブジェクトなら何とかテキストで説明できないこともありません。しかし、ユーザーの入力に反応したり、時間的に変化するものであったりする、動的なものであると代替はさらに難しくなり、ほとんど不可能になってしまいます。
私のサイトのメインコンテンツは JAVA アプレットです。これはインタラクティブな動作を行う動的オブジェクトであり、ちょっと静的なテキストでは代替できません。“道標”を置くという対応しかできないでしょう。
自分のサイトについて少々……。できる限り理想に近づけるという意味では、最低限、マウスでもキーボードでも操作可能にすべきでしょうが、やはり少々面倒ですね。はじめの段階で、もっと汎用的なクラス構築（インターフェースの分離）を行っていればよかったのですが……。コストと（閲覧者が得るであろう）利益を考えると、ちょっと改善の意欲がわかないです。申し訳ないですが。
この問題も、やはり「作者が何を表現したいのか？」ということにつきます。タイトル文字を画像に加工しているのならば問題ありません。テキスト文字列での置換は容易にできます。装飾ならば alt="" が最善の対応です。しかしながら、画像自体が、オブジェクト自体が表現対象である場合があります。
そのとき、その他の内容による置換および省略は本来不可能なのですから、等価な情報の提供はできません。例えばＣＧの場合、作者は、絵によって状況の説明をするというよりは、絵自体が内包している、絵でしか伝えられない何かを表現したかったのでしょう。そのときにどうするか？ 難しい問題です。
私の場合、まず等価の情報を提供することは断念します。諦めながらも、最低限、自分の意図を表現しきれていないことを閲覧者に知らせたいです。（そして、どうすればその情報を得られるかのヒントを示唆するわけです。）オブジェクトで、装飾用途でないものは、作者の思考（意図）の大切な一部のはずです。たとえ、代替内容による表現が不可能だとしても、作者の意図する何かがそこに存在したこと、どうすればその意図を汲み取ることができるのか、それについては伝えるべきだと思うのです。
逆にいえば、閲覧者は自分の読みとっている内容に欠損があること（そしてどうすればそれが入手できるのか）を知る権利を持つのではないでしょうか。
日本語テキストをマークアップする際、扱いに悩む内容がいくつかあります。私は、日本語のいわゆる整形的な部分を広く内容と解釈することで対処しています。
日本語としての整形をいかに表現すべきか、慣例が装飾か否かを問題の根元とする（と私が思うような）様々な議論があります。とりあえず自分が意識的に対処しているのは今のところ次の２つだと思います。
br 要素はできる限り使うべきでない、という意見をよく聞きます。実際、物理マークアップとして使われる例が極めて多く、やむを得ない意見かもしれません。というよりは、外見的な整形であって b や u のような“物理要素”だと考えている人が多い感触です。
私は実は多用気味ですが（適切に使用できているかどうかはともかくとして）使うこと自体は間違いではないと考えています。
CSS によるテキスト整形方法の一つに、text-indent というものがあります。これは適用したブロックの先頭行を字下げしてくれるというものです。text-indent が登場してから（？）行頭に全角空白を置いて字下げを表現することの是非がしばしば議論されるようになりました。
私は全角空白による字下げを行っていますし、それでも正しいと考えています。
さて、私の考え方の出発点に「日本語でいう段落と英語でいう paragraph（パラグラフ）とは必ずしも同じものではない。」という主張があります。日本語の「段落」は、subparagraph とでも訳すべきであって、paragraph が表す意味上の集まりよりも幾分か小さいまとまりを指していると思うのです。つまり、日本語には「形式段落」と「意味段落」の別があり、paragraph に該当するものは「意味段落」の方だと思うのです。
これが、自分が br 要素を使用する理由（言い訳？）です。つまり、意味段落を paragraph と解釈して p タグを用いてマークアップし、形式段落を br 要素を用いて表現している、ということになります。
<!-- .html -->
<p>
<span class="subparagraph">
はじめに思考ありき。
</span>
<span class="subparagraph">
ついで内容が来たらん。
</span>
<span class="subparagraph">
依りて記述を為すべし。
</span>
</p>
/* .css */
span.subparagraph {
display: block;
text-indent: 1em;
}
（段落と paragraph に関する私の主張を認めるとして、）これをもし、br 要素抜きで実現するにはどうすればよいでしょうか？
p 要素の中にはブロック要素は入れられませんから、上のようにすることになるでしょう。……しかし、これは定義されたスタイルシートを利用しないと、改行もインデントも無効になって、意味的な区切りが表せないのではないでしょうか？ まあわざと不適切な例を用意したという印象があるかもしれません。普通は次項のように対処するでしょうから。
日本語の段落を p 要素で表してもいいじゃないか、もし日本語にはもっと大きな塊があるというのなら、div class="paragraph" とかそういうものを作ればよい、p = subparagraph と解釈したらどうか、という考え方もあります。
世の中にはどうやらこちらの方式を採用しているところがたくさん見られます。特に見出しと本文を含めて section ブロックを定義している場合が多く、こうすると CSS デザインの可能性も大きく広がるようで、一石二鳥ですね。このような方法も一つの有力な解決策だと思います。
結局のところ、改行以外の手段で段落を表現できるか（ br は不可欠なのか）、という問題だと思います。
私は、先に述べたように、日本語の文章には、意味的に一つのブロック要素にする必要がないくらいの弱い切れ目も存在する、と思います。そして、それが段落であり、これを表現する手段として、他の代替方法が考えられないくらい改行が定着しているし、また最も簡潔な表現手段であろう、という見解なのです。改行および段落分けに br を用いて、より大きな塊（ paragraph ）に p を用いる、そう考えてもよいだろう、ということです。
例えば新聞などは改行を▼等の記号で置き換えたりしていますが、それは紙面の制限という特殊な事情があるからであり、そのような場合こそ、個別の対応策を用意すればよい、と思っています。
最後に、少し脇道にそれますが、br の必要性を確認しておきます。日本語には、会話文ごとに改行し、しかも字下げしないという規則があります。これを表現するものとしては br が最も適切なのではないでしょうか？ 特に小説などでは頻繁に会話文が登場しますが、さすがに一つ一つ paragraph を構成するわけではないですよね。
全角空白は省略・代替をすべきでない内容に含まれる、というのが私の主張です。
<!-- .html -->
<p>
<span class="sentence">
<span class="talk">
段落と paragraph とは異なるものだ
</span>
そう彼は言いました
</span>
</p>
/* .css */
span.talk:before {
content: "「";
}
span.talk:after {
content: "」";
}
span.sentence:after {
content: "。";
}
上記の例を見るまでもなく、区切り的な記号である多くの文字は CSS で表現するような性質のものではありません。たとえ、句読点「、。」を「，．」で読み換えられると言われたって、何も嬉しくありません。むしろ、スタイルシートをオフにしたことを考えると弊害ばかりでしょう。
さて、私はこれについては妥協だとは思いません。むしろ幾つかの記号類は、日本語に溶け込んだ内容となっていると捉えるべきだと考えています。（どの文字も記号ですがね。）括弧類、句読点、疑問符・感嘆符（およびその後の全角空白）は、内容の一部であり、切り離すべきものではない、ということです。
※引用符の勧告などは微妙なところですが……。
そして私は、段落の字下げも、既に内容に溶け込んでいるものだと判断しているのです。
例えば、英語の字下げは文字数が一定していません。それを４文字分のスペースや８文字分のスペースに置き換えても不自然はないでしょう。しかし日本語では、ぴったりと全角１文字分の字下げが広く定着しているのではないでしょうか？ これが全角２文字や４文字になったとしたら、何か違和感を覚えませんか？ 確かに、「字下げなし」という選択肢はあるかもしれません。しかし、短文などならまだしも、小説などの長文では、字下げがないとどうにも居心地がよくありません。しかもその字下げは、必ず全角１文字でなければ納得できないものです。CSS をオフにした場合、インデントが消滅して気分が悪い、ともいえます。
繰り返しますと、私は、必要な「全角１文字分の字下げ」は既に本文に溶け込んでいて、置換・省略をすべきでない「全角１文字の空白」という内容だと思っているのです。これが、自分のサイトでテキストによる字下げを行う理由です。（また、これを行わないことも内容の伝達手段だと思っています。）
なお、br を用いて段落分けを行っているため、text-indent による字下げは都合が悪いという事情もあります。
そういうことで、議論は結局、日本語の整形表現をどのレベルで捉えているか、という点に行き着くと思います。それは、段落＝paragraph という見解であったり、全角１文字分の字下げは代替可能であるという見解であったりするでしょう。
意見が分かれるのは、その相違の根本に、HTMLの範疇を越えた性質のものがあるからではないでしょうか。
ナビゲーションバーとは、該当ドキュメントのサイト全体における位置付けを示すものです。ドキュメントの内容には直接関係ありませんが、ブラウザなどで閲覧している訪問者の利便を図る目的で導入される場合がほとんどです。本サイトにもありまして、ページ先頭の「ホーム」「読み物」「行儀良いHTML文書」が並んでいる部分がその例になります。
ということで、ナビゲーションバーについて、３つほど例を示してその意図を考えてみましょう。（説明の都合上、クラス指定やアンカー要素については省略しておきます。）
<ul>
<li>ホーム<ul>
<li>読み物<ul>
<li>行儀良いHTML文書</li>
</ul></li>
</ul></li>
</ul>
リストの入れ子です。サイトの階層構造を考えると（少なくとも意味的には）最も厳密なものであると思います。つまり［ホーム］から［読み物］に移るところで、幾つかのメニューがあって、そこから１つの項目＝読み物を選択しているのです。［読み物→行儀良いHTML文書］と辿るところでも同じことが起こりますから、全体として三重のツリー構造が存在することになります。
またこの場合、メニュー項目を並列と考えて ul を使うのが普通でしょう。（番号を付け替えていくのはややこしいですし……。）
<ol>
<li>ホーム</li>
<li>読み物</li>
<li>行儀良いHTML文書</li>
</ol>
いわゆる“パン屑リスト”として、道中のドキュメントを拾ってリストに並べているという別の構造を解釈して表現したものです。
ul ではなく、ol を使用したことに『パン屑リスト』の主張があります。つまり、［ホーム→読み物→行儀良いHTML文書］とリンクを順番に辿って行き着いた文書であることを強調しているわけです。
逆にもし ul を使えば、例１のリストの入れ子を簡略化して表現していることになるでしょう。
<p>ホーム／読み物／行儀良いHTML文書</p>
スラッシュで階層構造を表現したものです。あるいは「→」としてパン屑リストの経路構造を表現することも可能でしょう。
ここで、スラッシュは区切りの装飾として使っているわけではありません。スラッシュにより、そこに意味的な階層構造が存在することを表現しているのです。すなわち、階層構造を示す記号以外の文字・画像では代用できないということです。「→」でも同じです。
私はどれを使っても良いと思っています。特に議論になるのが例３を使うことの是非ですが……。
例えば並列項目の列挙を示す「・（中黒点）」等をテキストで表示することは、html ドキュメントの記述では普通しません。（リストを使いますね。）それと同じ理屈で、リストとして表現できるものを、テキスト文字で代替するのはよくないという主張も確かに納得のいくものです。
しかし、階層構造を示すために例１を用いるのは冗長かもしれません。例２については、順序付きのリストが、階層ツリーの一部を抜き取った構造の表現に適当なのかという問題がありえます。階層を簡潔に表現するためにやむを得ない措置だと言われると、確かにそうだと思うわけです。特に CSS をオフにした場合、パン屑リストの表現と、スラッシュを用いた階層表現とは、どちらも、ほぼ同等の説明能力を有しているという印象があります。
そして、本サイトでは例２を採用しています。{ display:inline; } を使ってみたかっただけという説もありますが、まあ、典型的なパン屑リストですからね。そして記述の簡潔さがほぼ例３と同様であり、しかも構造はパラグラフよりもリストに微妙に近いと解釈している、ということです。
ちなみに、多くのサイトではホームのメニュー項目をどのページにも用意して、ホームを経由せずに別分野のコンテンツに飛べるようにしていますね。これもあると親切ですが、なくて困るということはないかと思って、用意していないです。
