ULリストやDL定義リストで内部SEO対策

ULリストはよく使用しますが、DL定義リストも内部SEO対策の一環として有効らしいので、改めて正しい使い方をチェック。

検索エンジンはdl要素に書かれているキーワードに関して充実したページだと判断する傾向にあります。
SEO対策 初心者 <dl>タグ・<dt>タグの最適化

ランキング上位にある、とある企業サイトのソースを見てみると<li>の中に、<dl>を多用してて「えっこれ文法上正しいの!?」と驚きましたが、調べてみると全然、問題ないんですねこれ。

続きを読む ULリストやDL定義リストで内部SEO対策

dl定義リストをtableっぽく表組みにしてみる

表組みタグといば<table>。
でも<table>はタグがいっぱいになるので、個人的にあまり好きじゃない。

そこで、<DL>定義リストを、CSSで表組みぽくできるみたいなので作ってみた。

<DL>の表組みサンプル

ポイントは…

  • <DT>の幅にあわせ<DD>をmargin-leftで寄せること必須。
  • 高さを指定しない場合は、<DT>にfloat: left;を指定し横並びさせるのが簡易。
  • 高さを指定する場合は、<DD>にmargin-top(ネガティブマージン)指定し<DT>の横に並べる。
  • <DD>のmarginは、余白やボーダーの分も計算。

簡易な表組みに最適。

2列、3列程度の簡易な表組みなら、<DL>定義リストにするのがいいかもしれない。HTML内もスッキリするしSEO的にもいいんでは。

列が多いもの、複雑な表組みならやっぱりtable?

  • 欠点1
    縦(行)はガンガン増やせるが、横(列)を増やそうと思うと面倒…<DD>に対し、いちいち横マージンを指定する必要がある。
  • 欠点2
    <DT>に背景色を入れると<DD>内の行数が増えたとき、<DT>の背景色は自動では広がらない…。やり方があるのだろうか?

まぁ、<DL>は定義型のリストを作成するタグであって、表組み用のタグではないですからね…(笑。もっと自由に表組みさせたいときは、やっぱり<table>しかないみたい。