あまり知られてないけど知っとくべき10のHTMLタグ

Nettuts+より、10 Rare HTML Tags You Really Should Knowを翻訳したので紹介します。

そのHTMLタグは、下記のようになっています。

1. <cite>

<cite>は、<blockquote>になじみ深いものです。しかし、<cite>は、<blockquote>は弟分のような存在ということを知っていたでしょうか?

< cite>は、参照と要素のの中のテキストを定義することを許可する。>< cite>は、通常、イタリックで表示されます。

< cite>は、著書目録・他のサイト参照を引用するのに実に役立ちます。

使用例:

David Allen's breakthrough organization book<cite>Getting Things Done</cite>has taken the web by storm.

補足:

citeはよく、<blockquote>の属性としてなじみ深いです。

例:

<blockquote cite="引用元の書籍やURLを表記">"
<p> hogehogwehoge </p>
</blockquote>

ですので、文章自体を引用するものでは無く、書籍名や作者などを引用するときに使います。

2. <optgroup>

<optgroup>は、セレクトボックスの内部のグループのオプションのわずかな定義を加える素晴らしい要素です。

使用例:

<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes">
	<optgroup label="1PM"></optgroup>
	<option value="titanic">Twister</option>
	<option value="nd">Napoleon Dynamite</option>
	<option value="wab">What About Bob?</option>
	<optgroup label="2PM"></optgroup>
	<option value="bkrw">Be Kind Rewind</option>
	<option value="stf">Stranger Than Fiction</option>
</select>

デモ

選択リストを視覚的に分離することを可能にします。

3. <acronym>

<acronym>は、ワードのグループを定義するかさらに説明する方法です。

補足:

頭文字をとった略語で1つの単語として発音するものを指します

使用例:

<acronym title="Search Engine Optimization">SEO</acronym> is full of trickery and magic.

4. <address>

<address>は、不明瞭なタグです。名前が意味するように、<address>は、HTML内にアドレスとして意味論的にマークアップすることを許容します。

使用例:

<address>Glen Stansberry
1234 Web Dev Lane
Anywhere, USA
</address>

5. <ins> と <del>

マークアップで修正を表示したいならば、<ins> と <del>は適切です。名前が意味するように、<ins>は、アンダーラインを備えたドキュメントをハイライトし、<del>は、打ち消し線が表示されます。

使用例:

John <del>likes</del> <ins>LOVES</ins> his new iPod.

6. <label>

フォーム要素は、ドキュメントをマークアップする場合に忘れることの多い要素です。最も忘れられことが多い要素が<label>です。

それがラベルのテキストに注意する迅速な方法だけであるのではなく、どの要素がラベルが与えられる必要があるかを指定するために、「for」属性も通過できます。また、<label>タグがスタイリングだけにすばらしいのではなく、見出しを関連要素にクリック可能にさせます。

使用例:

<label for="username">Username</label>
<input id="username" type="text">

7. <fieldset>

Fieldsetは、論理上グループ化するために形式を加えることができる属性です。

いったん適用されると、<fieldset>はfieldsetの中に要素の周りにボックスを描きます。グループのタイトルを定義するためにfieldsetの内の<ラベル>タグを加えるためのボーナスポイントです。

<form>
<fieldset>
<legend>Are You Smarter Than a 5th Grader?</legend>
Yes <input name="yes" value="yes" type="radio">

No <input name="no" value="no" type="radio">
</fieldset>
</form>

8. <abbr>

<abbr>タグは、<acronym>と同種です。<abbr>タグは、簡略化された単語を定義するのに使用されるだけです。

使用例:

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

9. rel

どんなHTML要素もそれにrelを適用することができるrelは有用な属性である。それは、別に指定されない余分の変数を超えるのに有効です。

それは、JavaScriptを使うときに有用です。

使用例:

<a rel="clickable" href="page.html">This link is editable</a>

Javascriptは、rel属性「clickable」とのリンクを捜しているかもしれません。どこかのAjaxを適用し、かつそれがインラインで編集されることを可能にするために知っています。可能性が無限のように、これはrel属性と共に使用してもよい多くの技術のうちの1つです。

10. <wbr>

<wbr>は信じられないほど不鮮明なタグです。

今まで見たことがあるかどうかというぐらい滅多に使われるのことのないタグです。

<wbr>は、必要である場合にだけラインブレイクが役に立つかもしれないと思う場所を指定できます。

もし必要ならば、それがラインブレイクを挿入するためにブラウザの分別に依存するとともに、このタグはユニークです。

水平のスクロール・バーを避けたレイアウトをつくるには絶好です。

使用例:

<span>How do you say Supercalifragilistic<wbr>expialidocious?</span>

あとがき

相変わらず、変な日本語があるかもしれませんが、ご了承ください。