読者です 読者をやめる 読者になる 読者になる

A Day In The Life

とあるプログラマの備忘録

タグにはちゃんと意味がある

html

最近、何でもかんでもdivやspanで囲ってスタイルシートあてとけみたいなHTMLやレイアウトめんどくさいからとにかくtable使っとけ(結構よくやります)みたいなHTMLをよく見ます。

それじゃいかんだろということで原点に戻ってHTMLのおさらいを。

普段何気なく使ってるHTMLのタグですがひとつひとつ意味がありそれがわかればHTMLをより深く使えるんじゃないかと思ってます。

と言うことでよく使うタグの語源一覧を作ってみました。

タグ語源その他補足
aanchorアンカーと読みます。

ちなみにアンカーとは碇(いかり)のことです。

属性hrefはhypertext referenceの略です。
h1〜6heading見出し。

このタグを使わず、スタールシートで文字を大きくしたりしてるサイトを見かけますが、そんなことすると検索エンジンが正しく見出しを解釈してくれないので注意しましょう。
divdivision区切り
spanspan範囲、スパン
pparagraph段落
brline break単に改行という意味ではなく強制改行を意味します。
strongstrong文章中の論理的な強調。

bタグは単に文字を太字にするだけなのでstrongタグと意味が違います。
blockquoteblock quotationブロックレベルの引用。

cite属性に出典URIを指定しましょう。
qquotationインラインレベルの引用
codeprogram codeプログラムコード。

改行とかタブをそのまま表示したいときはpreと併用しましょう。
prepreformatted text整形済みテキスト
sampsampleプログラムによって出力される内容のサンプルらしい。

こんなタグ知んかったです。
olordered list順序付き箇条書き
ulunordered list順序なし箇条書き
lilist itemリストの中身
dldefinition list見出し付き箇条書き。

あまりメジャーなタグではないようですが個人的には結構使います。

でもインデントに使っちゃダメです。
dtdefinition term見出し付き箇条書きの見出し
dddefinition description見出し付き箇条書きの箇条書き
tabletable表。

このタグを乱用しているサイトをよく見ますがタグの意味を考えればなんだかなぁと思います。
trtable rowテーブルの行
tdtable data cellテーブルのカラム
thtable header cellテーブルのカラム(見出し用)
imgimage属性srcはsourceの略です。

属性altはalternate text(代替テキスト)の略です。
hrhorizontal rule水平線
HTMLの本来の意味は文章に論理的意味合いを印付けることなのでこれを忘れないようにしましょう。

スタイルシートがはやっているのはいいことなのですが、やらなくてもいいことまでやっちゃってるサイトが意外に多いように思います。

個人的には文章に論理的意味合いをつけるってことが終わってから、やれデザインだのスタイルシートだの考えていけばいいと思っています。

CSSの勉強も大切ですが、HTMLの理解の方が大事だと思うしだいです。