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

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

Posted at October 4,2006 1:00 AM
Tag:[Entry, MovableType]

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

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

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

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

1.blockquote 要素の仕様

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

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

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

Another HTML-lintタグ一覧

2.問題点

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

段落1
 
段落2
 
段落3

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

<p>段落1</p>
 
<p>段落2</p>
 
<p>段落3</p>

となります。

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

例えば、

段落1
 
<blockquote>引用</blockquote>
 
段落2

と書けば、

<p>段落1</p>
 
<blockquote>引用</blockquote>
 
<p>段落2</p>

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

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

段落1
<blockquote>引用</blockquote>
段落2

という文書では、

<p>段落1
<blockquote>引用</blockquote>
段落2</p>

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

3.問題を回避するための対処

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

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

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

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

3.2 手動でマークアップする

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

4.その他の注意点

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

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

例えば、

段落1
 
<blockquote>引用
 
引用</blockquote>
 
段落2

と書くと、

<p>段落1</p>
 
<blockquote>引用
 
<p>引用</blockquote></p>
 
<p>段落2</p>

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

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

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

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

4.2 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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Movable Typeの自動改行機能の問題 from 猫鯖の部屋
これも個人的なメモ書き Movable Typeの自動改行はとっても機械的に動作... [続きを読む]

Tracked on March 4, 2007 12:39 PM

Movable Typeの自動改行機能の問題 from 猫鯖の部屋
これも個人的なメモ書き Movable Typeの自動改行はとっても機械的に動作... [続きを読む]

Tracked on March 31, 2007 8:46 PM

Movable TypeのBlockquoteタグ from *cosmos* blog
blockquoteタグが面倒だったんです。 改行をしてくれないために、わざわざ自分でタグを入れたりして。 なんとかならんのか!?と思って調べたら・・・... [続きを読む]

Tracked on March 25, 2008 12:11 PM
コメント

こんにちは。

私も MT の貧弱な改行処理に悩み、結局マークアップの手作業化でケリを付けたつもりだったのですが、 One Line to Paragraph Plugin というプラグインを発見しました。
以前の私が抱えていた悩みと共通していると思うのでお勧めしたいと思います。

http://www.code-404.net/article/2006/03/12/line2paragraph-plugin
(作者シンヤさんによるドキュメント)

[1] Posted by のっと : October 4, 2006 8:01 PM

>のっとさん
こんばんは。
情報ありがとうございます。
プラグイン一覧に掲載させて頂きました。
ではでは!

[2] Posted by yujiro : October 5, 2006 1:52 AM

formもXHTMLでは子要素に直接Inline要素やCDATAを書けないので同じことが起こりそうですね

[3] Posted by はじめ男爵 : October 5, 2007 7:10 AM

>はじめ男爵さん
こんにちは。
仰る通り、本文や追記に form 要素を記述する場合は注意が必要です。

[4] Posted by yujiro : October 11, 2007 12:06 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)