--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

あなたが知らない(はず)のレアなHTMLタグ10選

2009年03月25日 23:20

10 Rare HTML Tags You Really Should Know - Nettuts+
和訳しつつ改変です。
適宜サンプルも変えています。

1.<cite>
<blockquote>の弟分。書籍、本などの参照先を示すのに使われます。hogehogeより引用、みたいなね。
で、通常ブラウザはイタリック表示しますが、cssで変えられますよ、っと。
例:以上、10 Rare HTML Tags You Really Should Know - Nettuts+より参照です。

2.<optgroup>
セレクトボックス内の、グループ分けに用いられます。optionのgroupだからかな?
↓の「日本車」と「アメ車」の部分
例:

3.<acronym>
言葉に注釈をつけるときに用いられます。その文字の上にマウスをのっけると、title属性に書かれた説明が現れます。
acronymとは英単語で、頭字語という意味だそうです。WHO=世界保健機関みたいな。
例:そういえば今年のM1はnon styleが優勝しましたね、っと。

4.<address>
addressタグは、あまり名が知れてないですが、便利ではないって事じゃないです…ってマジかよ
その名の通り、住所を示します。通常はイタリック体で表示されますが、もちろんcssで変更可
例:
住所:千葉県こりん星


5.<ins>と<del>
insertとdeleteの省略。改訂・訂正・変更したことを指し示します。↓のように、insは下線付きで、delは取消線がつきます。打ち消しでも同じ事は出来ますが、意味的に「取り消したよ!」ってのが強くなると言うことかと。(b≒strong)
例:小沢一浪一郎の秘書が起訴されました。

6.<label>
フォーム(input)のようなものは、作ってる最中に忘れがちなもの。さらに忘れやすいのがlabel。
でも、実はこのタグは便利です。ラベルのテキストを教えるだけでなく、inputのid属性とlabelのfor属性を同じにしてやれば、そのinputと関連づけられます。また、そのラベルの文字をクリックするだけで、選択することが可能になります。


7.<fieldset>
これもフォーム関連。グループ化に役立ちます。また、legendタグを使うと、そのグループにはタイトルがつけられます。デフォだとボックスがくっつきます。なんで伝説なんだろう……と思ったら、本来は「題名」という意味なんだとか。
例:

性別




8.<abbr>
acronymと酷似してますが、abbrは短縮語=abbreviated wordのためにだけ使われます。使われるのは希ですが、スペルチェックのために便利だとか。
例:ゼロ魔面白いですね~。

9.rel属性
relはJavaScriptなどを使う際に異常なほど便利、らしい。たぶんrelativeとか系のrel。
LightBox系で使ったことあります。なんか凄い絶賛されているんだが……

10.<wbr>
本当に滅多に使われないらしい。
改行しても良いよ、と本人が思うところに入れます。ただし、必要なときだけ改行されます。
改行を入れるかどうかがブラウザに委ねられているあたりがユニークですとな。
日本だと本当に意味ないんですが、海外だと、「スペースがないと一単語」であり、超長い単語は、その単語の前で改行されるか、改行されないでその単語が領域を突っ切るか、という感じになります。
従って、勝手に横スクロールバーが現れたりして困るなど、完璧なデザインを求める場合に重宝されます。
例:日本でもURLがたまに対象になります。hogehogehogehogehogehogehogehogehogehogehogehogehagehagehagehagehagehagehagehagehagehageと書き込んだりした際、hageの前にwbrを入れてやれば、確実にそこで改行してくれます。


長くなりましたねー。
なんで?というタグも多いかと思いますが、タグというのはデザインを表す物ではなくて、意味を表す物だからです。
たとえば、addressというタグは、イタリックになるのが大事なのではなく、住所を示すのが大事と言うことです。
特にこれが顕著な効能を発するのは、メジャーではないブラウザ(独自開発のブラウザやケータイ用ブラウザとか社内向けブラウザとか・・・ってあんのかな)、検索エンジン等(SEO)です。
ま、普通に見る分には構わないんですけどね。こういうのがすらっと使えるナイスミドルになりたいです。
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://suiseidreaming.blog45.fc2.com/tb.php/214-9c0f8ede
    この記事へのトラックバック


    最近の記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。