和田憲幸のブログ

私がHTMLコーディングをする際に気をつけている事として「HTMLタグの持つ意味を理解してその意味の通り使用する」という点が挙げられます。かつてはテーブルレイアウトが跋扈し、なんでもかんでもテーブルを使う時代もありましたが、今はMTなどのおかげもあってかなりdivレイアウトが浸透してきましたが、まだタグの意味を理解せずにコーディングされているサイトを良く見かけます。

ちなみにこれから解説するタグの意味はあくまで私の解釈であって、あってるかどうかは知りませんのでその点、ご了承下さい。

hタグ

hタグは当然見出しタグですよね。その中でも私は「h1をサイト名」として全ページ共通して使い「h2タグをページ名／コンテンツ名」として使っています。h1とh2のプライオリティではh2のほうが高いのは皆さんもご存知だと思いますが、かといってh1を削るわけにも当然いかないわけです。そしてh1はページ内に必ずはいるものですから、そう考えるとサイト名が一番しっくりくるかなと思ったり。h3はページ内の中見出しとして使いますね。ページ内の中見出しはとても重要！

ul・liタグ

これは言うに及ばず、リストですよね。リスト、列記、箇条書きと。そういう意味ではグローバルメニューやフッターメニューなどもul・liで表現する事がほとんどですね。なによりテーブルと違って美しい。きれいですよねコードが。横に並べる際はもちろんfloatをliに掛けます。その際、ulに横幅指定と高さ指定をすることをお忘れなく。

dl・dt・ddタグ

見出しがあってそこに説明文が付随する場合のタグ。このタグは最もズレやすいタグなので、本当に縦に使う場合しか使いませんが、文章構造の基本とも言うべき「見出し・説明」が対になっているため、非常に良く使うタグです。ただ、前述した通り非常にブラウザ間でズレやすいためdtとddを横に並べたりは極力しません。

pタグ

文章はすべてpタグに格納すべきだっ！ということで、divに直接テキストを書いているソースを見かけますが、かならずpタグに入れたほうがなんとなく良いですよ。あとpタグにはline-heightを指定して行間をしっかりとることで文章が俄然見やすくなります。これはやはり文章をしっかり読んでほしい場合は必須。そしてpタグと対になるのが私の場合はh2だったりh3の直下にpタグを使うケースが多いですね。見出しの下にはキャプションが付くものですからね。

ということで私が使うタグはこんなもので、至ってシンプルなものであります。
検索エンジン対策のためだけではなく、洗練されたソースには美しさがある。
基本的にHTMLソースは見づらい場合がほとんどですが、タグの構成がシンプルで、美しい場合に限りHTMLソース自体がとても理解しやすくなるんです。もちろん表層にそれが反映されるわけではないので、完全に自己満足の話ですが、それでもやっぱり美しいソースを書くと「書いてやった！！」って気持ちになります。ビルダーで構成された煩雑なソースが蔓延する世の中ですが、ぜひ美麗で洗練されたソースがひとつでも世に多く生まれますように。