WordPressの閉じタグ（終了タグ）などのHTMLタグ自動修正
WordPressに関してこんな質問があったので、記事にしてみました。もともとはWordpressに関する質問だったのですが、実際はHTMLタグのルールに関係するものでした。
質問の内容は以下のようなものです。
WordPressのテーマ編集時、<div>の開始タグだけを入力してサイトを表示すると、自動的に</div>終了タグが補完される。
また<div><dl></div><dt><dd></dd></dt></dl>と打ち込んで保存すると<div><dl><dt><dd></dd></dt></dl></div>と</div>の位置が勝手に変わる。文法的に正しくなるように修正してあるのはわかるが、私は<a><div>～</div></a>のようにしたいところ、<a></a><div>～</div>と修正されてしまい困っている。だから自動修正をオフにしたい。
・・・という内容のご質問でした。
結論ですが、この方はHTMLタグのルールに関しての見落としがあることが原因でこの質問が出ており、Wordpressのタグ修正機能をなくす必要がない、ということになります。
目次 Table of Contents
HTMLタグの記述ルールは『かっこ』の位置だけではない
ご質問の中の2つ目の例を出されているように、この質問者様はHTMLタグの基本ルール、「タグとタグが部分的に重なるように記述してはいけない」ということを理解されています。数学の大カッコ・中カッコ・小カッコのようなものですね。
HTMLタグの部分重なりはNGで、完全にあるタグの中に他のタグを入れこむ（入れ子・ネストという）形にする必要があるからです。Wordpressのタグ自動修正機能がちゃんと働いていることがわかりますね。
ただ残念ながらHTMLタグには他にもルールがあるんです。
おそらくこの方は、divタグで囲んだ領域をまるごとリンクにされたいということでしょう。リンクバナーかリンクボタンのようなものを設置されたいのかもしれません。
しかしそもそも<div>タグを<a>タグで囲むという記述のしかたはHTMLのルールに反しているのです。
div要素はブロックレベル要素、a要素はインライン要素であり、インライン要素の中にブロックレベル要素を入れ込むことはできないのです。
ブロックレベル要素
ブロックレベル要素とは「独立したひとまとまり」という意味です。ブロックレベル要素のほとんどは、その中にインライン要素やテキスト（文章）を含むことができます。div要素のように一部のブロックレベル要素は、その中にさらにブロックレベル要素を含むことができるものがあります。
具体的にブロックレベル要素には以下のようなものが該当します。
- h1～h6要素（見出し要素）
- p要素（パラグラフ・段落要素）
- address要素（作成者情報）
- blockquote要素（引用文）
- ul要素・ol要素（箇条書き）
- dl要素（用語定義型要素）
- table要素（表）
上記のHTMLタグはすべてブロックレベル要素です。しかしすべてがインライン要素や他のブロックレベル要素を内包できるわけではなく、中に入れ込める要素が決まっているものもあります。
インライン要素
一方インライン要素とは「テキストの一部分に何らかの役割を持たせる」ものです。インライン要素の中には他のインライン要素やテキストを含めることができますが、ブロックレベル要素を含めることはできません。
また、リンク要素であるa要素には、同じa要素を含めることはできません。
インライン要素には以下のようなものが該当します。
- a要素（アンカー要素・リンク等）
- img要素（画像）
- em要素・strong要素（強調）
- span要素（グループ化要素）
以上のHTMLタグはインライン要素に当てはまります。
なんとなく感覚で理解できるかもしれませんが、とくに注意が必要なものが“a要素”です。リンクは文字だけでなく、画像等を囲んでボタンやバナーとして利用することもあるので、間違えやすいのです。
a要素を使われるときは、以下の2点に注意しましょう。
- a要素はインライン要素なので、中にブロック要素であるdivやpを含めない
- a要素の中にa要素は含めない
よって今回の質問者様がやりたいことを実装するには、<div><a>～</a></div>のような形にし、a要素をCSS（スタイルシート）のdisplay: block;でブロック要素にし、大きさ等を指定してあげるのがよいかと思います。
プラグインでも、Wordpressの自動整形に関するものがあるようですが、あまりオススメはしません。HTML、XHTMLなどのルールはバージョンによって変わっていきます。Wordpressのバージョンアップもこれらになるべく準拠していくことが予想されるので、部分的にプラグインなどで変えないほうがよいのではないかと思うからです。
[Wordpress関連] [コメント：0]
comment closed