15: Marking up textual content in HTML - 日々ごちゃごちゃと考える

HTML を使って文書の中身の意味を記述する方法。

Spaces - the final frontier

空白文字（スペース、タブ、改行など）について。

HTML では連続した空白文字は、ひとつのスペースとして扱われる。
たとえば

<h3>In    the
                  beginning</h3>

は、以下と同等に扱われる。

<h3>In the beginning</h3>

例外は pre element の中だけ。

最初は混乱するかもしれないが、インデントとか paragraph の間隔みたいな見た目のことは HTML ではなく style sheet でやる。

Block level elements

Page section headings

ページを論理的ないくつかのセクションに分割したら、それぞれのセクションは適切な見出しを持つべき。詳しくは http://dev.opera.com/articles/view/7-what-does-a-good-web-page-need/。
HTML では h1, h2, h3, h4, h5, h6 と見出しがある（h1 がもっとも重要）。h1 はページ全体の見出しとするのが好ましい。
見出しのレベルはセクションやサブセクションやサブサブセクションに合わせる。その方が screen readers や Google の bots が処理しやすい。

<h1>Marking up textual content in HTML</h1>
   <h2>Introduction</h2>
   <h2>Space - the final frontier</h2>
   <h2>Block level elements</h2>
      <h3>Page section headings</h3>
      <h3>Generic paragraphs</h3>
      <h3>Quoting other sources</h3>
      <h3>Preformatted text</h3>
   <h2>Inline elements</h2>
   ...

Generic paragraphs

段落。p element を使う。特に attributes はない。

<p>This is a very short paragraph. It only has two sentences.</p>

web 上では、通常の段落よりも短いテキストを段落とすることがよくある。div element よりもより意味がある（ような気がする）から。
段落にはいくつかの分を入れる。ワケのわからない文字やテキストなんかは段落としてマークアップされるべきではないかも。

Quoting other sources

長めの引用には blockquote element を使う。段落や文章丸ごととか、リストとか。
blockquote element に直接テキストを入れてはいけない。引用元と同じ種類の、他の block level element を入れる。テキストを引用するなら段落にする。

他の web ページから引用するなら cite attirbute でそれを示す。

<p>HTML 4.01 is the only version of HTML that you should use
when creating a new web page, as, according to the specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
   <p>This document obsoletes previous versions of HTML 4.0,
   although W3C will continue to make those specifications and
   their DTDs available at the W3C Web site.</p>
</blockquote>

小説とか雑誌のようなところから引用するなら cite attribute は不要。

Preformatted text

フォーマットや空白文字が重要なテキストは pre element でマークアップする。
ほとんどのブラウザで preformatted とマークアップされたテキストはソースに書いてある通りに表示され、時には固定幅のフォントで表示される。

<pre><doce class="language-perl">
# read in the named file in its entirely
sub slurp {
  my $filename = shift;
  my $file     = new FileHandle $filename;

  if ( defined $file ) {
    local $/;
    return <$file>;
  }
  return undefi;
};
</code></pre>

code element については http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/ で。

Inline elements

Short quotations

通常の段落や文章での短い引用は q element を使う。blockquote element 同様に cite attribute で引用元を指定できる。
短い引用はクォート記号で囲まれるように表示されるべき。HTML の仕様によれば、このクォート記号は user agent によって挿入される。

<p>This did not end well for me. Oh well
               <q lang="fr">c'est la vie</q> as the French say.</p>

Enmpasis

HTML にはそのテキストが強調されていることを示す方法が2つある。ふつーは色が違うとか、フォントを変えるとか太字になるとか斜体になるとか。screen reader では別の声とか。

テキストを強調させるには em element を使う。

<p><em>Please Note:</em> the kettle is to be unplugged at night.</p>

文章全体を強調しつつ、その中の一部をさらに強調するには strong element を使う。

<p><em>Please note: the kettle <strong>must</strong> be unplugged every
evening, otherwise <strong>killing us all</strong></em>.</p>

Italicised text

「斜体」というのは意味ではないので、i element は使うべきではないと考えられているが、特定の場合にしか役に立たない特殊な element を作るよりも斜体にすることが正しいと言えそうな場合もある。（固有名詞とか、技術用語とか。）つまりそのテキストが特別なもので、どう特別なのかは文脈による、という場合。これは HTML 5 の草案に反映されている:

The i element represents a span of text in an alternate voice or mood, or
otherwise offset from the normal prose [...] The i element should be used
as a last resort when no other element is more appropriate.

i element も CSS で見た目を変えることができるので、ここでの「斜体」の意味は「ちょっと特殊な」というもの。

Presentational elements - never use these

HTML の仕様にはいくつか、見た目を指定するだけで意味を与えない "presentational" な要素が含まれている。
そのうちいくつかは deprecated とされている。これは他の同じ結果を得られる方法に置き換えられるということ。
ざっと説明するけど、これらは使うな。

font face="..." size="...": デフォルト以外のフォントを指定する。CSS でやれ。
b: 太字にする。ほとんどの場合は強調なので em か strong を使え。
s, strike: 取消線を引く。単に見た目の問題なら CSS を使え。削除されたことを示すなら del element を使え。
u: 下線を引く。見た目の問題なので CSS を使え。
tt: "teletype" つまり等幅文字。CSS を使うか、もっと適切な element（pre とか）を使え。
big, small: 文字の大きさを変える。CSS 使え。

Summary

テキストのマークアップによく使う element でした。