小粋空間  -  a cheap joke and a play on words site

Movable Type で blockquote 要素を記述する時の注意

blockquote 要素を使用した Movable Type のエントリーを、Another lint HTML Gateway でチェックすると、

9: line xx: <blockquote> を xx行目の <p>～</p> 内に書くことはできません。<blockquote>～</blockquote> 内に <p> を書くことはできます。 → 解説 43

というエラーが出る場合があります。本エントリーではその原因と対処方法について記します。

以前、このエラー発生についてのご質問を頂き、回答するお約束をしておりましたが、エントリーすることをすっかり失念しておりました。申し訳ありません。この場をお借りしてお詫び申し上げます。
また記事中に誤った認識がある場合、適宜ご指摘頂ければ幸いです。

１．blockquote 要素の仕様

XHTML文書では、blockquote 要素を p 要素の中に記述することはできません。
例えば、下記のようなマークアップは誤りです。*1 *2

<p>
<blockquote>引用</blockquote>
</p>

ちなみに blockquote が記述できる親要素は XHTMLのバージョンによって異なります。利用可能な要素を調べるには下記のページが参考になるでしょう。

Another HTML-lint：タグ一覧

２．問題点

Movable Type のエントリー編集画面下にある「改行設定」で「改行を変換する」を選択している場合、下記のような文書構造

段落１
 
段落２
 
段落３

を書くと、空行ではさまれた段落は自動的に p 要素で括られ、

<p>段落１</p>
 
<p>段落２</p>
 
<p>段落３</p>

となります。

ただし、空行の直後（あるいはエントリー開始行）が blockquote 等 *3 で開始（または終了）する場合、「p 要素で括る」という変換は行われません。

例えば、

段落１
 
<blockquote>引用</blockquote>
 
段落２

と書けば、

<p>段落１</p>
 
<blockquote>引用</blockquote>
 
<p>段落２</p>

と変換されるので、「blockquote 要素が p 要素で括られてしまう」という問題は発生しません。

問題となるのは blockquote 要素の前に空行がない場合です。

段落１
<blockquote>引用</blockquote>
段落２

という文書では、

<p>段落１
<blockquote>引用</blockquote>
段落２</p>

と、全体がひとつの段落としてみなされ、p 要素で括られてしまい、blockquote 要素に対し予期しないマークアップがされてしまうことになります。
これが冒頭に申し上げた問題です。

３．問題を回避するための対処

以下に対処方法を提示します。

３．１ blockquote 要素の開始タグの前と終了タグの後に空行を設ける

２項の説明からお分かりの通り、「改行設定」で「改行を変換する」を選択している場合、blockquote 要素の開始タグの前と終了タグの後に空行を挿入します。ただし blockquote がエントリーの先頭であれば開始タグ前の空行は不要です。

終了タグの後ろに空行を挿入する理由は、その後に続く段落に p 要素を付与するためです（p 要素が付与されないと、その箇所だけ他と異なるマークアップになる可能性があります）。
次の段落がブロックレベル要素のタグで開始するのであれば空行は不要ですが、「ブロックレベル要素の前後は空行」というお作法で統一しておいた方が良いでしょう。

３．２ 手動でマークアップする

「改行設定」で「改行を変換する」を選択せずに、ご自身でマークアップをすれば想定外のマークアップをされる心配はありません。が、個人的には改行変換機能を利用して少し気をつけてエントリーを記述した方が効率的であると考えます。

４．その他の注意点

４．１ blockquote 要素で括られた文書の途中に空行を作らない

改行変換機能には「空行をみつけて p 要素を挿入するという規則があるので、blockquote 要素で括られた文書の途中に空行が存在すると、Movable Type の処理上、そこが段落の開始とみなされ、次の空行までを p 要素で括られてしまい、誤ったマークアップになります。

例えば、

段落１
 
<blockquote>引用
 
引用</blockquote>
 
段落２

と書くと、

<p>段落１</p>
 
<blockquote>引用
 
<p>引用</blockquote></p>
 
<p>段落２</p>

と、予期しない p 要素のマークアップが行われ、結果的に誤った XHTML になってしまいます。

どうしても blockquote 要素の中で空行を挿入したい場合は、

• 空行となる部分に半角空白を挿入する
• 改行変換機能を使わない

のいずれかを選択してください。
補足すると、前者は半角空白文字を本来の目的と異なった用途で使用するため、後者の方法が本来ですが、私自身は前者を用いております（ダブルスタンダードであることは認識しています。予めご容赦ください）。

４．２ blockquote 要素に改行を挿入するように修正する

blockquote 要素の前に空行を挿入することによる弊害は、blockquote 要素内の改行に br 要素が付与されなくなる、つまり blockquote 要素内で改行変換機能が効かなくなることです。

これを解消する方法については、「エントリーにpタグとbrタグが入る仕組み（その2：blockquoteにbrタグを挿入）」を参照ください。

---

*1：例えば、XHTML1.0 Strict では、blockquote 要素の子要素として記述できるのは、ブロックレベル要素（address / blockquote / div / dl / fieldset / form / h1 / h2 / h3 / h4 / h5 / h6 / hr / ol / p / pre /table / ul） と del 要素、ins 要素、noscript 要素、script 要素です。つまり、インライン要素や #PCDATA （意味はばけらの HTML リファレンス(未完成)：構文解析対象文字データ」参照）を直接記述することはできませんが、ここでは複雑になるのを避けるため説明を省略しています。

*2：blockquote 要素には cite 属性（引用元URL）を記述することができますが、この記事の主旨から外れるので説明は省略しています。また cite 要素を記述することについても同様の理由で言及しておりません（それらを使用することが適切であることは認識しています）。

*3：h1 / h2 / h3 / h4 / h5 / h6 / table / ol / dl / ul / menu / dir / p / pre / center / form / fieldset / select / blockquote / address / div / hr