この文書の最新版は「ばけらの HTML リファレンス」に移転しています (P,H1, H2, H3, H4, H5, H6, BLOCKQUOTE, ADDRESS, DIV, CENTER, HR, NOSCRIPT, NOFRAMES) 。以下の文章は古くなっているかも知れません。
ブロック要素とは文章構造の枠組を決定するものです。通常、視覚系のブラウザでは前後が改行され、ウィンドウの左右いっぱいまでの範囲を占めます。中身には他のブロック要素やインライン要素を含みますが、ブロック要素がインライン要素の中身となることはありません。
以下のものがブロック要素です。P, H1, H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, XMP, LISTING, DL, DIV, CENTER, NOSCRIPT, NOFRAMES, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS 。
UL, OL, DIR, MENU, DL についてはリスト要素、PRE, XMP, LISTING については整形済みテキスト、TABLE についてはテーブル、FORM, FIELDSET については入力フォームの項目で解説します。
文章構造の大枠を決定するもの……P, H1, H2, H3, H4, H5, H6, BLOCKQUOTE, ADDRESS, DIV, center, HR,NOSCRIPT, NOFRAMES
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
P | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 省略可 | ブロック | インライン |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
align | - | 2.x | 3.2 | (4.0) | (left|center|right|justify) | (依存) | 表示位置の指定 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
P は Paragraph の頭文字です。文字通り段落を表す要素で、<P> と </P> で囲んだ部分が段落となります。「改行して一行空けるタグ」などと説明されていることがありますが、誤りです。そんな解説を信用してはいけません。
align 属性で右寄せやセンタリングが可能ですが、HTML4 ではこの属性は非推奨です。スタイルシートを使いましょう。ちなみに、既定値は書字方向が ltr(左から右)の場合には left、rtl では right となります。
中身がインライン要素となっている点に注意して下さい。P 自身はブロック要素ですが、中身にブロック要素を含むことは出来ません。次の例はよくある間違いです。
<P align=right> <HR> </P>
作者の意図は HR を右寄せすることにあるのでしょうが、HR はブロック要素であるため、 P の中に入れることは出来ません。この場合、<HR> の直前に </P> が補われて以下のように解釈されます。
<P align=right> </P> <HR> </P>
当然、右寄せにはなりません。中身が空の P 要素は無視される(多くのブラウザは手抜き実装で一行空きにしてしまいますが、本来は無視されるべきものです)だけですが、HR の後ろにある </P> を解釈できません。よって不正となります。このようなマーク付けをしてはいけません。
同様に、TABLE や PRE, BLOCKQUOTE を P の中に入れることもできません。P で TABLE をセンタリングできてしまうブラウザも存在するようですが、それは正しい位置に </P> を補うことが出来ていないということです。つまりブラウザのバグです。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
H1 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
H2 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
H3 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
H4 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
H5 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
H6 | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
align | - | 2.x | 3.2 | (4.0) | (left|center|right|justify) | (依存) | 表示位置の指定 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
H は Heading の H で、見出しの意です。見出しの要素はそのレベルに応じて H1, H2, H3, H4, H5, H6 の6種類あります。あわせて Hn と称されることが多いようです。
n に当たる数字は見出しのレベルを表します(サイズではありません)。たとえば H1 は「ヘディングレベル1」です。数字の若い方が、より上位の見出しとなります。
たとえばこのように使います。
<H1>第一部 光と影</H1> <DIV class="chapter"> <H2>第一章 たらこ唇の伝説</H2> <DIV class="section"> <H3>第一節</H3> <P> …… </P> <P> …… </P> </DIV> <DIV class="section"> <H3>第二節</H3> <P> …… </P> </DIV> </DIV> <DIV class="chapter"> <H2>第二章……
ブラウザは見出しを地の文と区別して表現するでしょうし、レベルの若いものがより目立つように表現するでしょう。RFC1866(HTML2.0) では以下のような表現法が勧められています。
しかしながら、多くのブラウザは手抜きをして単に全部を太字にし、しかも、H5 や H6 が見出しなのに地の文より小さいフォントになるという変な表現方法を採用しています(もっとも、これはスタイルシートが使えれば簡単に変更できますが)。H5 や H6 まで使い切る場合は注意が必要です。
時々、 <H1> の次に <H3> が出てきたり、いきなり <H4> から始まったりすることがありますが、そういう用法は好ましくありません。文書の構造が分かりにくくなる上、Hn を自動的に抜き出して目次を表示してくれるようなツールを混乱させるおそれが大です。
align 属性が指定できますが、スタイルシートで指定した方が良いでしょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
BLOCKQUOTE | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | ブロックとSCRIPT(ブロックとインライン) |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
cite | - | - | - | 4.0 | URI | (依存) | 引用もとの URI |
align | - | 2.x | - | - | (left|center|right|justify) | (依存) | HTML2.x 専用。 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
引用を表します。ブロックレベルの要素で、段落ごと引用してきたようなものを貼り付けるのに使います。
BLOCKQUOTE要素の中身は BODY要素と同じです。HTML4 Strict では BLOCKQUOTE直下にテキストを書くことが出来ませんので、さらに P要素などでマーク付けする必要があります。短いフレーズの引用には BLCOKQUOTE要素ではなく Q要素を使うと良いでしょう。
cite属性には出典の URI を書きます。WWW 上のリソースからの引用ならば、cite 属性に引用もとの URL を書いておくべきでしょう。書籍からの引用の場合、その本に ISBN が与えられていれば、urn:ISBN:4-8291-2745-7
などという URN で出典を示すこともできます。残念ながら、URI で示せない出典を cite 属性で示すことはできません。その場合は、CITE要素で文中に出典を書くことになるでしょう。
当然ですが、引用部分は地の文と明確に区別されなければなりません。RFC1866(HTML2.0) で勧められているのは、以下のような表示方法です。
多くのブラウザは、左右をインデントして表示します。ついでに前後も一行空けることが多いようです。
時々、何を思ったか「インデントのためのタグ」などと解説されることがありますが、誤りです。その解説を鵜呑みにしてインデントに使用しているサイトも見かけますが、望ましくありません。「なぜ BLOCKQUOTE でインデントしてはいけないのか」を参照して下さい。
このような(間違った)使い方がなされる場合があるため、HTML4 では「引用符をつける表示法を標準とするのは避けた方が良い」としています。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
ADDRESS | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | インライン(インラインと P) |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
align | - | 2.x | - | - | (left|center|right|justify) | (依存) | HTML2.x 専用。 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
著者の情報を示します。普通はメールアドレスを書いておきます。
誤解している人が多いのですが、これはブロック要素です。七不思議だとでも言いたげに「前後が改行されます」などと解説している本があったりしますが、ブロック要素なのですから P要素や DIV要素と同じように改行されて当然です。
以下はよくある間違いです。
<A href="mailto:bakera@star.email.ne.jp"> <ADDRESS>bakera@star.email.ne.jp</ADDRESS> </A>
ADDRESS はブロック要素なので、A要素の中身にはなり得ません。A を ADDRESS の内側に入れて
<ADDRESS> <A href="mailto:bakera@star.email.ne.jp">bakera@star.email.ne.jp</A> </ADDRESS>
としてやる必要があります。
中身は P要素またはインライン要素でしたが、HTML4.0 Strict では、P要素を含むことが出来なくなっています。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
DIV | - | - | 3.2 | 4.0 | 必須 | 必須 | ブロック | インラインとブロック |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
align | - | - | 3.2 | (4.0) | (left|center|right|justify) | (依存) | 表示位置の指定 |
datasrc | - | - | - | (4.0) | URI | (依存) | (将来のために予約) |
datafld | - | - | - | (4.0) | CDATA | (依存) | (将来のために予約) |
dataformatas | - | - | - | (4.0) | (plaintext|html) | (依存) | (将来のために予約) |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
DIV は division, 区切りです。この要素そのものには特定の意味はありません。ブロックレベルの要素だということだけしか規定されていないのです。
これは、任意の部位の言語を変更したり、他のブロック要素ではマーク付けできないものをマーク付けするために利用します。たとえば先のHnの例 では、「章」を表現する適切な要素がなかったので、DIV に chapter というクラス名をつけて表現しました。XML なら "CHAPTER" という要素や "章" という要素を作れば良いだけの話ですが、HTML では任意の要素を作ることができませんので、どうしてもこのような方法を採らざるを得ません。
注意して欲しいのは、このような方法がやむを得ないものであるということです。たとえば、引用部をマーク付けするのに、インデントされるのが嫌だからと言って <DIV class="quote">
などとするべきではありません。引用を示すのならあくまで BLOCKQUOTE要素を使い、インデントはスタイルシートで調整すべきです。
HTML3.2 では、DIV に align 属性を指定して、任意の位置でセンタリングや右寄せを実現するのに利用されました。が、この用法は今や非推奨です。スタイルシートを使いましょう。
なお、DIV は P要素と異なり、中身にブロック要素を含むこともできます。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
CENTER | - | - | 3.2 | (4.0) | 必須 | 必須 | ブロック | ブロックとインライン |
固有の属性は特にありません。指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント)
CENTER 要素は align="center" を指定した DIV要素と全く同じ働きをします。すなわち、中身をセンタリングする効果があります。もともとは Netscape 社が勝手に採用した要素だったのですが、HTML3.2 で DIV align=center の略記として採用されました。
DIV の align 属性が非推奨となった今、この要素も非推奨です。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
HR | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 禁止 | ブロック | 空 |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
align | - | - | 3.2 | (4.0) | (left|center|right) | center | 表示位置。 |
align | - | 2.x | - | - | (left|center|right|justify) | (依存) | HTML2.x では justify も可。 |
noshade | - | - | 3.2 | (4.0) | (noshade) | (依存) | 影なし水平線の指定 |
size | - | - | 3.2 | (4.0) | ピクセル数 | (依存) | 線の高さ(太さ) |
width | - | - | 3.2 | (4.0) | 長さ | (依存) | 線の幅(長さ) |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
水平線を引きます。主に章の変わり目などに使用します。
水平線そのものはなんのテキストをも含まないので、どういう趣旨で引かれているのかはっきりしません。title 属性を使って、HR の趣旨を記述した方が良いでしょう。
<P>……</P> <P>……</P> <HR class="divide-chapter" title="ここから新しい章です。">
と、こんな風にしておくと、水平線の意味がはっきりしますし、音声読み上げ環境でもその趣旨を伝えることが出来ます。
なお、この要素はブロックレベルです。従って、P要素の中に入れたりすることは出来ません。
表示の仕方に関する属性がいくつかありますが、すべて非推奨です。スタイルシートを使いましょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
NOSCRIPT | - | - | - | 4.0 | 必須 | 必須 | ブロック | ブロック(ブロックとインライン) |
固有の属性は特にありません。指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント)
NOSCRIPT は SCRIPT に対応していない環境のための代替表記を示します。この要素の中身は、ブラウザ自身がスクリプトに全く対応していないか、あるいはスクリプトの動作がオフに設定されている場合に表示されることになります。
また、ブラウザ自身がスクリプトに対応していても、SCRIPT要素に指定された言語がサポート外のものだった場合、この NOSCRIPT の中身が表示されます。一つの文書内で 複数のスクリプト言語が使われている場合は、至近の SCRIPT要素を参照します。たとえば、
<SCRIPT type="text/javascript" src="another.js"> </SCRIPT> <P>…… …… <NOSCRIPT> <P>JavaScript が実行できませんでした。</P> </NOSCRIPT> <SCRIPT type="text/vbscript"> <!-- 'VBScripts... '--> </SCRIPT> <P>…… …… <NOSCRIPT> <P>VBScript が実行できませんでした。</P> </NOSCRIPT>
このような場合、「JavaScript をサポートしているが VBScript をサポートしていない」ブラウザでは、先の NOSCRIPT の中身は無視され、後の NOSCRIPT の中身だけが表示されることになります。そのはずですが、多くのスクリプト対応ブラウザは「スクリプト機能がオンかオフか」だけを考慮して、言語の種類までは見ないようです。
なお、これは言語をサポートしているか否かの問題なので、「JavaScript はサポートしているが another.js がロードできなかった」という場合、おそらく NOSCRIPT の中身は表示されません。
文書に何かを書き込むとか、情報を表示するとか言った重要なスクリプトには、必ず NOSCRIPT を記して代替を用意しましょう。
もっとも、NN2 は SCRIPT に対応しているのに NOSCRIPT を認識せずに中身を表示してしまいます。その対策として以下のような表記を勧める人がいますが……。
<SCRIPT type="text/javascript"> <!-- JavaScripts ... //--><P>SCRIPTなしの人は<A href="foo.html">代替文書</A>をどうぞ。</P> </SCRIPT>
これは不可です。SCRIPT の中身は CDATA で、終了タグ開始区切り子までがその中身と見なされます。要するに、"</" が出てきた時点で SCRIPT 要素が終わると解釈されてしまうのです。従って、上記の例は不正です。
SCRIPT の終了タグは </SCRIPT> ではなく </> (エンプティエンドタグ) かもしれませんから、 </ で終わらせないとまずいのです。もっとも、ほとんどのブラウザは </> を認識せずに </SCRIPT> の出現を待ってしまいますから、</ を書いても平気です。逆に、SCRIPT の終了タグを書き損じたりするとひどい目に遭います(と、経験者は語る)。
要は "</" がなければ良いので、上記の代替表記から <P> 以外のタグを取り除けば問題はありませんが、お分かりのように、代替文書にリンクさせるような器用なことは出来ず、簡単な説明が関の山です。さらに、SCRIPT 要素は理解するブラウザでスクリプトの実行をオフにしてあるような場合、何の表示もされないことになります。やはり NOSCRIPT を使った方が良いでしょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
NOFRAMES | - | - | - | (4.0) | 必須 | 必須 | ブロック | ブロックとインライン |
固有の属性は特にありません。指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント)
これは HTML4.0 Transitional の BODY 内で使われる NOFRAMES です。フレーム定義文書の FRAMESET 内で使われる NOFRAMES については、フレームの項目を参照して下さい。
NOFRAMES 要素の内容は、フレームに対応していないブラウザやフレーム機能をオフにしているブラウザで表示されます。
もっとも、この要素をこの文脈で使うことはほとんどないでしょう。NOFRAMES が真価を見せるのは、フレーム定義文書の代替表示を記す時です。その用法についてはフレームの項目を参照して下さい。