21: Lesser-know semantic elements

OperaWSC HTML

http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/

Highlighting contact information

address element は最もおかしな名前を与えられ誤解されている element かもしれない。
この element の意味はページ（あるいはその一部）を書いた人の連絡先である。名前とかメアドとか住所とか連絡先の載っている他のページとか。
住所ならなんでも、というワケではない。それは "microformat" というものを使う。

<p class="footer">Copyright 2008</p>
<address>
   <a href="/contact/">Mark Norman Francis</a>
</address>

Programming languages and code

code element はプログラミング言語に使う。inline で使うこともできるし、複数行のコードなら pre element と組み合わせることもできる。
どの言語なのかを指定する方法は決まっていないが、class attribute を使うことができる。一般的な習慣は "language-" に続いて言語名を続けるというもので、これは HTML 5 の草案でも述べられている。

<p>It is bad form to use event handlers like
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

C# のような書きにくい言語名は "class='language-c\#'" と書けるが、間違いそうなので "class='language-csharp'" がおすすめ。

Displaying computer interaction

samp element と kbd elements はコンピュータの入出力を表す。

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---
  1 packets transmitted, 1 packets recieved, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

samp element はコンピュータの出力を表す。出力の種類は class attribute を使うが、特に決まった習慣はない。
kbd element はコンピュータへの入力を表す。キーボードからの入力っぽいが、それ以外の入力にも使える。

Variables

変数には var element を使う。数式でもプログラミング言語でも使える。

<p>The value of <var>x</var> in 3<var>x</var>+2=14 is 4.</p>

<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code><pre>

Citations

cite element は近くの引用の引用元を表す。
# 引用元が引用の近くだが、別の部分にある場合に使う？

<p>The saying <q>Everything should be made as simple as possible,
but not simpler</q> is often attributed to <cite>Albert Einstein</cite>,
but it is actually a paraphrasing of a quote which is less easy to
understand.</p>

Abbreviations

abbr elements と acronym elements は何の省略形なのかを示し、文章の流れを断ち切ることなくそれらを復元する手段を提供する。

省略形のテキストを abbr element とし、その title attribute に省略しないテキストを指定する。

<p>Styling is added to
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

acronym element も省略形の一種だが、こちらは省略形がひとつの単語であるかのような場合に使う。

HTML 4.01 ではどちらも許されているが、正しく使おうとするのはカンタンではない。IE6 は abbr を認識せず、acronym は認識する。残念ながら acronym は abbr の特殊なバージョンなので、"HTML" のようなものを acronym とするのは間違っている。
IE7 はどちらも認識するが、他のブラウザと違い、に点線で下線をつけるのを忘れている。
さらに HTML 5 の草案では、acronym は削除されている（abbr でいいんで）。
ベストな方法は abbr のみを使い、acronym を使わないことだろう。もし IE6 で abbr の見た目を変えたいなら、中身を span element にする。

Defining instances

# ざっと読んだ感じでは、使い道がはっきりしていない、あるいは混乱している。
# そのうえ、この要素を適切に扱う user agent もほとんど存在しない。

Superscript and subscript

テキストを上付き/下付きにするには sup/sub elements を使う。いくつかの言語や簡単な数式で使うことがある。

<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=ec<sup>2</sup> -- energy is equal
to the mass multiplied by the speed of light squared.</p>

Line breaks

HTML の空白文字を扱う方法のせいで、ソースに改行を含めても、テキストがどこで改行されるかはコントロールできない。
br element を使うと改行することができる。ただし、これはどうしても改行が必要な場合のみ使用し、縦方向に隙間を空けるような用途には使わないこと。それは CSS でやれ。
整形済みテキストとしたり span element を使って block level にする方が簡単な場合もある。
XHTML であれば `<br />` とすること。

Horizontal rules

HTML では、水平線は hr element で作られる。これは document に線を引く（セクションの境界を示す）。
これは見た目だけで意味のないものだという人もいるが、小説のシーンや詩の区切りなどに使われる。
XHTML であれば `<hr />` とすること。

Changes to documents (inserting and deleting)

document が変更された場合に、その変更をマークアップしておけば、ユーザや自動処理はどこがいつ変更されたのかわかる。
追加されたテキストは ins element、削除されたテキストは del element になる。テキストの削除と追加が同時に行われた場合は、先に削除されたテキスト、次いで追加されたテキストが推奨される。
cite attribute に変更の理由へのリンクを、datetime attribute に変更が行われた日時を "YYYY-MM-DD HH:MM:SS±HH:MM" 形式で指定できる。

<p>We should only solve problems that actually arise. As
<cite><del datetime="2008-03-25 18:26:55 Z"
           cite="/changes.html#revision-4">Donald Knuth</del>
      <ins datetime="2008-03-25 18:26:55 Z"
           cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
said: <q>premature optimization is the root of all evil</q>.</p>

Some future HTML elements

HTML 5 の草案に含まれる新しい elements の紹介:

header(masthead)
ページのヘッダ。ロゴとタイトル、短い "about" など。
footer
ページのフッタ。サイト内の他のページへのリンクやコピーライトなど。
nav
ページの主要なメニュー。
article
ヘッダやフッタ、ナビゲーションなどを除く、ページの本文。
aside
サイドバーに表示される情報（？）

ほかにもある。詳しくはHTML Standard