主要ブロック要素

h1～h6

説明

その文書の見出しを表します。マークアップでは Heading の頭文字を取って <h1>～</h1> などを用います。数字が大きくなるに連れて見出しのレベルが下がり、一番小さい見出しは <h6>～</h6> になります。当要素内にはブロック要素を含む事は出来ません。よって中にはインライン要素のみを含みます。

使用例

<h1>大見出し</h1>
	<h2>第一章</h2>
		<h3>第一節</h3>
		<p>この物語は…</p>
		<h3>第二節</h3>
		<p>桜が舞い散る頃に…</p>
	<h2>第二章</h2>
		<h3>第一節</h3>
		<p>雨が降ってきた…</p>
		<p>「明日は…</p>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。また、見出しのレベルと同じくして、h1 の文字は大きくなり、レベルが下がるに連れて文字の大きさが小さくなります。ブラウザによっては書体を変更したり、勝手にセンタリングをしたりインデントをしたりしますが、全て CSS によって制御が可能です。

注意

文字の大きさを変化させる為に当要素を用いるのは 間違い です。当要素はあくまでも見出しの順位を示す物であり、文字を大きくしたり太くする為に用いる物ではありません。また、その登場順は <h1> から順番となっているべきで、<h1> の次に <h2> が出てこずに <h3> が出てきたり、いきなり <h2> から始めたりするべきではありません。

良くない例

<h1>第一章「序幕」</h1>
	<h4>第一節</h4>
	<p>この物語は…</p>
		<h5>第二節</h5>
		<p>桜が舞い散る頃に…</p>
<h2>第二章<p>～君が触れる時～</p></h2>
	<h4>第一節</h4>
	<p>雨が降ってきた…</p>
	<p>「明日は…</p>

良くない理由

h1 の次に h4 がきている。
h2 の次に h4 がきている。
<h2>～</h2> 内にブロック要素 ( p要素 ) がある。
第一章と第二章で見出しのレベルが揃っていない。

p

説明

主にその文書の内容部分 (文章部分) に用いられます。段落と言うと節や章の分かれ目などを想像しますが、そうではなく文章の固まりそのものを一つの段落と捉える様にしましょう。マークアップでは Paragraph の頭文字を取って <p>～</p> を用います。DTDによっては終了タグ ( </p> ) を省略する事も出来ますが、必ず記述するようにしましょう。

使用例

<h1>大見出し</h1>
	<h2>第一章</h2>
		<h3>第一節</h3>
		<p>この物語は…</p>
		<h3>第二節</h3>
		<p>桜が舞い散る頃に…</p>
	<h2>第二章</h2>
		<h3>第一節</h3>
		<p>雨が降ってきた…</p>
		<p>「明日は…</p>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。この為に p要素は一行空きなどという説明が行われたりするのでしょう。

注意

p要素は一行空きなどと解説しているモノもあるようですがそれは 間違い です。また、重複になりますが、終了タグは省略しないようにしましょう。<p> のみが単独で出てきた場合にブラウザは </p> を補おうとしますが、思い通りに解釈してくれるとは限りません。そしてp要素は中にブロック要素を含む事は出来ません。

良くない例

<h1>大見出し</h1>
<p><h2>第一章</h2></p>
<p>
この物語は…
<p>
桜が舞い散る頃に…
<p>
雨が降ってきた…
<p>「明日は…</p>
</p>

良くない理由

p要素の終了タグがない。
<p>～</p> 内にブロック要素 ( h2要素 ) がある。
<p>～</p> 内にブロック要素 ( p要素 ) がある。

ul

説明

一覧を表示します。その順番に意味がなく、箇条書きとして表現するものに用います。マークアップには Unordered List の頭文字を取って <ul>～</ul> を用います。当要素には必ず一つ以上の li要素が内包されます。

使用例

<ul>
<li>国語</li>
<li>算数</li>
<li>理科</li>
<li>社会</li>
<li>体育</li>
</ul>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。各 li要素の先頭には通常は黒丸の印が付きます。これは CSS を用いる事によって白丸や四角、場合によっては画像を使用することも可能です。もちろん非表示にする事も出来ます。また、リスト表示部分はインデントされますが、これも CSS によって制御可能です。

注意

ul要素には必ず li要素が必要です。そして直下に li要素以外の要素がくる事はありません。また、li要素の終了タグはDTDによっては省略可能ですが、きちんと書くようにしましょう。そして li要素は単独で用いられる事はなく、必ず ul要素や ol要素などに包含されます。

良くない例

<ul>
国語
<p>
算数
<p>
理科
</ul>
<ul>
<li>社会
<li>体育
</ul>

良くない理由

ul要素の直下にli要素以外のブロック要素(<p>)がある。
ul要素の直下にli要素以外のインライン要素(テキスト)がある。
li要素の終了タグ(</li>)がない。

ol

説明

順序付きの一覧を表示します。ul要素とは違い、その並びに意味がある場合に用います。マークアップには Ordered List の頭文字を取って <ol>～</ol> を用います。当要素には必ず一つ以上の li要素が内包されます。

使用例

<ol>
<li>一時間目「国語」</li>
<li>二時間目「算数」</li>
<li>三時間目「理科」</li>
<li>四時間目「社会」</li>
<li>給食</li>
</ol>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。各 li要素の先頭には通常は算用数字 (1,2,3,4,5…) が付きます。これは CSS を用いる事によってローマ数字 (ⅰ,ⅱ,ⅲ…) やアルファベット (a,b,c…)、漢数字 (一,二,三…) やイロハ（い,ろ,は… / イ,ロ,ハ…）、五十音順 (あ,い,う… / ア,イ,ウ…) などに変更する事も可能です。また、リスト部分はインデントされますが、CSS による制御が可能です。

注意

ol要素には必ず li要素が必要です。そして直下に li要素以外の要素がくる事はありません。また、li要素の終了タグはDTDによっては省略可能ですが、きちんと書くようにしましょう。そして li要素は単独で用いられる事はなく、必ず ul要素や ol要素などに包含されます。

良くない例

<ol>
一時間目「国語」
<p>
二時間目「算数」
<p>
</ol>
<ol>
<p>
<li>給食
<li>四時間目「社会」
<li>三時間目「理科」
</p>
</ol>

良くない理由

ol要素の直下にli要素以外のブロック要素(<p>)がある。
ol要素の直下にli要素以外のインライン要素(テキスト)がある。
li要素の終了タグ(</li>)がない。
li要素の配列と内容にズレがある。

dl

説明

定義される語句とその説明を表示する為の一覧で、Definition List の頭文字を取って <dl>～</dl> を用いてマークアップが行われます。定義される語句は Definition Term の頭文字を取った <dt>～</dt> を用いて表現され、その説明は Definition Description の頭文字を取った <dd>～</dd> が用いられます。

使用例

<dl>
<dt>国語</dt>
<dd>言語の表現や理解などを伸ばす為の教科</dd>
<dt>算数</dt>
<dd>計算などを教える初歩の数学</dd>
<dt>理科</dt>
<dd>自然科学を学ぶ為の教科</dd>
<dt>社会</dt>
<dd>社会生活に関する正しい知識を学ぶ為の教科</dd>
<dt>給食</dd>
<dd>配給される食事</dd>
</dl>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。dt要素や dd要素は共にブロック要素と同じような表現になりますが、dt要素はブロック要素を含む事はできず、dd要素はブロック要素を含む事が可能です。また、dd要素部分はインデントされますが、これも CSS による制御が可能です。

注意

dl要素には必ず dt要素か dd要素が必要です。そして直下に dt要素か dd要素以外の要素がくる事はありません。また、dt要素と dd要素の終了タグはDTDによっては省略可能ですが、きちんと書くようにしましょう。そして通常は dt要素と dd要素が繰り返し登場します。

良くない例

<dl>
<dt>国語
<dd>言語の表現や理解などを伸ばす為の教科
<dt><h2>算数</h2></dt>
<dd>計算などを教える初歩の数学</dd>
<dt>理科</dt>
<dt>社会</dt>
<dt>給食</dd>
<dd>自然科学を学ぶ為の教科</dd>
<dd>社会生活に関する正しい知識を学ぶ為の教科</dd>
<dd>配給される食事</dd>
</dl>

良くない理由

dt要素の終了タグ(</dt>)がない。
dd要素の終了タグ(</dd>)がない。
dt要素内にブロック要素(<h2></h2>)がある。
dt要素とdd要素の要素が不自然な形で連続している。

hr

説明

章の変わり目や節などにおいて水平線を用いる事により、それを際立たせる事などが期待できます。マークアップでは Horizontal Rule の頭文字を取って <hr> を用います。空要素ですので終了タグは存在しません。

使用例

<h1>大見出し</h1>
<hr>
	<h2>第一章</h2>
		<h3>第一節</h3>
		<p>この物語は…</p>
		<h3>第二節</h3>
		<p>桜が舞い散る頃に…</p>
<hr>
	<h2>第二章</h2>
		<h3>第一節</h3>
		<p>雨が降ってきた…</p>
		<p>「明日は…</p>
<hr>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。通常は画面の端から端まで水平線が引かれますが、CSS による様々な制御が可能です。

注意

hr要素はブロック要素ですので他のブロック要素と同じ扱いになります。よって p要素などに含んだりする事は出来ません。また、空要素ですので、中に何かを含むという概念は存在しません。

良くない例

<h1>
<hr>
大見出し
<hr>
</h1>
<p>
この物語は…
<hr>
桜が舞い散る頃に…
</p>

良くない理由

h1要素内にブロック要素であるhr要素がある。
p要素内にブロック要素であるhr要素がある。

blockquote

説明

引用です。自己の物ではない著作物を文書に組み込む場合に用います。マークアップには <blockquote>～</blockquote> を用います。block はブロックレベルという意味で、quote は引用という意味です。つまりはブロックレベルの引用を意味し、段落ごと引用する場合などに用います。短文などの (インライン要素の) 引用には q要素が用いられます。また出典元がWWW上のリソースだった場合は、その出典を示す為に cite属性を用いて引用元のURIを明示します。

使用例

<h2>考察</h2>
 <p>次に彼は著書の中でこう述べている</p>
  <blockquote>
	<p>
	以上の事から全てを創造し得る者は…（中略）…と私は考える。
		<cite>
		<a href="http://～">らら著「ララの世界」</a>
		</cite>
	</p>
  </blockquote>
 <p>つまりは彼の考えを…</p>
  
<h2>まとめ</h2>
 <p>彼はWebサイトにおいてこうも記述している</p>
  <blockquote cite="http://～">
	<p>
	よってこれから我々が…（中略）…と私は感じたのである。
	</p>
  </blockquote>
 <p>これを読む限りでは…</p>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。主な引用の表現としては字体を変更したりインデントを取ったりします。ただし、インデントをする為の要素ではないので、インデントの為に用いるのは止めましょう。

注意

blockquote要素は body要素と同様に、直下にはインライン要素を含む事ができず、ブロック要素しか含む事ができません。よって p要素などのブロック要素を用いる事になります。そして繰り返しになりますが、blockquote要素はインデントを行う為の要素ではなく、あくまでも引用を表す要素ですのでインデントの為に用いるのは止めましょう。また、引用元 (出典) がわかるように cite属性をしっかりと記述しましょう。出典がURI で示せない場合は cite要素を用いて文章の前後に出典を記述します。

良くない例

<p>彼はこのように述べている。(以下は引用である)</p>
<blockquote>
おそらく全ての人間が潜在的に持ち合わせているであろう…
</blockquote>
<p>
さらに彼は
<blockquote>
「全ては無に帰する」
</blockquote>
とも言っている。
</p>

良くない理由

blockquote要素の直下にインライン要素(テキスト)がある。
p要素内にブロック要素であるblockquote要素がある。
出典が明記されていない。

pre

説明

HTML に記述した通りに改行や空白を反映させたい場合に用います。使用用途としては主にプログラムや HTML のソースコードを記述したり、整形された詩歌を載せたりします。他にも文字絵 (アスキーアート) を描く時にも使用されるようです。マークアップには preformatted text の頭文字を取った <pre>～</pre> を用います。

使用例

<h2>HTMLファイルの基本構造</h2>
<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;title&gt;ページタイトル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;内容&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2>雨宿り</h2>
<pre>
もしもアナタが望むなら
私はアナタの空になる

もしもアナタが望むなら
私はアナタの風になる

もしもアナタが望むなら
私はアナタの星になる

もしもアナタ望むなら…
</pre>

<h2>クリスマスツリー</h2>
<pre>
　　　　　+
　　　　+　　+
　　＋　　☆　　　　+
　　　+　★★
　＋　　◇★★　　+
　　+　★★☆★
　　　★◎★★★　　　+
　+　★★★★○★
　　★△★★★★☆　+
　　　　田田田
　　　　田田田
…～‥～…～‥…～‥～…
</pre>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。空白や改行は記述したままに表示されます。

注意

自動改行はされなくなるので横幅に気をつけなければ横スクロールが発生したりします。また、その時に要素の幅を飛び越えて文字列が表示されたりもします。タブ文字は有効ですが、一つのタブを何文字分の空白に相当させるかはブラウザによって異なります。それから < や > や & などはそのまま表示される事なく認識されます。つまり <pre>～</pre> 内でもマークアップは有効です。よってソースコードを記述する場合には文字実体参照も有効なので < は < そして > は > それから & は & と記述する事で表します。

良くない例

<pre>
<img src="rara.gif" alt="rara">
<p>もしも君が望むのならば</p>
</pre>
<pre>
<html>
<body>
<p>内容</p>
</body>
</html>
</pre>

良くない理由

pre要素の中にブロック要素である p要素が含まれている。
pre要素の中に内包できない img要素が含まれている。
pre要素の中でもマークアップは有効なので、ソースを記述する時は < > を < > として記述しなければならない。

address

説明

そのリソースの著作者の情報を表します。主にメールアドレスなどの問い合わせ先などの情報を提示して置くのに用います。マークアップには <address>～</address> を用います。

使用例

<address>
著作者:rara
E-mail:<a href="mailto:rara@w2.makko.biz">rara@w2.makko.biz</a>
</address>

主な視覚系ブラウザによる表現

ブロック要素の特長通りに前後に改行が入ります。また、文字列はイタリック体になる事が多いようです。

注意

ブロック要素ですので p要素に内包したりすることはできません。それとは逆に昔は p要素を含むことが可能でしたが、最新の HTML では不可となっています。

良くない例

<address>
<ul>
<li>著作者:rara</li>
<li>E-mail:<a href="mailto:rara@w2.makko.biz">rara@w2.makko.biz</a></li>
</ul>
</address>
<a href="mailto:rara@w2.makko.biz">
<address>rara@w2.makko.biz</address>
</a>

良くない理由

address要素の中にブロック要素である ul要素が含まれている。
address要素はブロック要素なのでインライン要素である a要素に内包する事はできない。

table

説明: 執筆中

div

説明: 執筆中