はじめに ― HTML5を覚えるにあたって

最近HTML5入門と銘打っていくつか記事を書いています。HTML5に関してはかなり思い入れが出てきて、最近色々制作しています。webcre8自身も大してできるわけじゃないんですけど、人と会うと結構HTML5の話になったりします。その中で「まだまだHTML5覚えられないなー」的な人にウケがいいのが「知ってるようで知らないタグの元の意味を知る」事です。

折りよく昨日TM LifeさんのHTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Lifeという記事を見かけ、これのHTML5版を作ったらちゃんと知りたい人多そうだなーと思いました。

という訳で早速表を作った

と言う訳で略されたHTML5タグの語源表を作ってみました。まず表を見てみましょう。

タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。

付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。

一応分かりにくいものだけ補足

hrタグについて

よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。

dlタグ、dtタグ、ddタグについて

dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うような意味)とそれに対する概要を示すもの、というものに変わっています。

その際にdl等の最初のdはdefinitionからdescriptionに変わってしまい、description of an item in a definition listという意味を持っていたddはdescription of an item in a description listという意味になってしまいました。と言う訳で、現在のddが何の略かと言うと、description descriptionとなってしまうわけです。

この辺の解釈がちょっと不安なので、違う！と言う人がいたらツッコミお願いしますｗ

プレゼンテーション要素からセマンティックな要素に進化したタグ

プレゼンテーション要素とは要素の見た目の特徴を表す言葉です。HTML5においては元々見た目を表すタグだったものが、その用途からセマンティックな意味を持たせるべきと判断され、意味を変えて生き残っているタグの事です。具体的にはem、s、q、i、b、u等のことです。これらはそれぞれ本来の見た目を表す意味の単語に由来した名前を持っていますが、「このタグの意味はなんですか」と聞かれれば、それぞれemphasis text、strike textといった、～のテキスト、という意味になるかなと思います。

その意味ではsub、supも同じく、意味としてはsubscript text(下付きのテキスト)、superscript text(上付きのテキスト)といったものになります。

rubyタグ、rtタグ、rpタグについて

ルビを振る要素のタグです。

ruby、rt、rpはそれぞれルビ、ルビのテキスト、ルビの括弧という意味です。これもちょっと解釈怪しいのでツッコミ待ち。て言うかどれについてもツッコミ大歓迎です！ｗ

終わりに

以上、後半はわりとどうでもいいトリビアでした！ｗ あまりにもあっさりした記事になりそうだったのでちょっと軽く説明を入れてみました。

本文中にも言い訳がありますが、これは知ってたヤツ以外はソッコーで自分で調べて解説したものなので勘違いもあるかと思います。もしわかる人がいらっしゃったらちょっとコメントでも頂けると嬉しいですね…！

参考

HTML Reference
HTML 要素 – HTML5タグリファレンス – HTML5.JP
HTML5

追記

あと、他のHTML5タグは何があるのかは一応HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ―の記事でも紹介しています。もっと詳しい説明については各リファレンスサイトやW3C公式を見てもらう他、そういうコンテンツをwebcre8からも提供して行きたいと思っています！お楽しみにー！★