タグにはちゃんと意味がある
最近、何でもかんでもdivやspanで囲ってスタイルシートあてとけみたいなHTMLやレイアウトめんどくさいからとにかくtable使っとけ(結構よくやります)みたいなHTMLをよく見ます。
それじゃいかんだろということで原点に戻ってHTMLのおさらいを。
普段何気なく使ってるHTMLのタグですがひとつひとつ意味がありそれがわかればHTMLをより深く使えるんじゃないかと思ってます。
と言うことでよく使うタグの語源一覧を作ってみました。
| タグ | 語源 | その他補足 |
| a | anchor | アンカーと読みます。 ちなみにアンカーとは碇(いかり)のことです。 属性hrefはhypertext referenceの略です。 |
| h1〜6 | heading | 見出し。 このタグを使わず、スタールシートで文字を大きくしたりしてるサイトを見かけますが、そんなことすると検索エンジンが正しく見出しを解釈してくれないので注意しましょう。 |
| div | division | 区切り |
| span | span | 範囲、スパン |
| p | paragraph | 段落 |
| br | line break | 単に改行という意味ではなく強制改行を意味します。 |
| strong | strong | 文章中の論理的な強調。 bタグは単に文字を太字にするだけなのでstrongタグと意味が違います。 |
| blockquote | block quotation | ブロックレベルの引用。 cite属性に出典URIを指定しましょう。 |
| q | quotation | インラインレベルの引用 |
| code | program code | プログラムコード。 改行とかタブをそのまま表示したいときはpreと併用しましょう。 |
| pre | preformatted text | 整形済みテキスト |
| samp | sample | プログラムによって出力される内容のサンプルらしい。 こんなタグ知んかったです。 |
| ol | ordered list | 順序付き箇条書き |
| ul | unordered list | 順序なし箇条書き |
| li | list item | リストの中身 |
| dl | definition list | 見出し付き箇条書き。 あまりメジャーなタグではないようですが個人的には結構使います。 でもインデントに使っちゃダメです。 |
| dt | definition term | 見出し付き箇条書きの見出し |
| dd | definition description | 見出し付き箇条書きの箇条書き |
| table | table | 表。 このタグを乱用しているサイトをよく見ますがタグの意味を考えればなんだかなぁと思います。 |
| tr | table row | テーブルの行 |
| td | table data cell | テーブルのカラム |
| th | table header cell | テーブルのカラム(見出し用) |
| img | image | 属性srcはsourceの略です。 属性altはalternate text(代替テキスト)の略です。 |
| hr | horizontal rule | 水平線 |
文章に論理的意味合いを印付けることなのでこれを忘れないようにしましょう。
スタイルシートがはやっているのはいいことなのですが、やらなくてもいいことまでやっちゃってるサイトが意外に多いように思います。
個人的には文章に論理的意味合いをつけるってことが終わってから、やれデザインだのスタイルシートだの考えていけばいいと思っています。
CSSの勉強も大切ですが、HTMLの理解の方が大事だと思うしだいです。
