Body要素内の代表的構文と使い方

LaTeX文書\begin{document}内の代表的構文と使い方に対応している。

HTMLでは、Body要素(本文コンテンツ)を、その文書のコンテンツモデル(文書要素)を指示する目的で用意された各種のタグを正しく使って書くことが求められている。

タグを、ブラウザで表示される「視覚的なレイアウト」(フォントのサイズや色など)を調節するために使ってはならない。 表示されるレイアウトを調整するためには、CSSの仕組みを使う。 HTMLの世界では、文書構造とそれをどのようにレイアウトするかを可能な限り分離するように求められている。

ただし、あるタグが1つのコンテンツ構造(文書要素)にだけ属するというわけではなく、HTML5に厳格であるためには各種のコンテンツモデルを理解しておく必要があるのが悩ましい。

ここでは文書を構成するためにごく基本的なタグ(要素)を紹介するにと留める(厳格なHTML5書法に従っているわけではない)。

見出し

コンテンツに見出しを付けて分節化して、文書の構造を示唆するために利用する(ここに紹介する範囲では、文書構造に曖昧さをもたらしてしまう)。

タグの組 <h1>と</h1>、<h2>と</h2>、<h3>と</h3>、<h4>と</h4> を使う(フォントサイズはCSSで指定しない限りは、見出しレベル 1,2,3...に応じて徐々に小さくなる)。

[HTMLテキスト例]
<h1>Level1の見出し</h1>
....
<h2>Level2の見出し</h2>
....
<h2>Level2の見出し</h2>
....
<h1>Level1の見出し</h1>
[使い方]
<h1>東京都の町</h1>
....
<h2>豊島区</h2>
....
<h2>板橋区</h2>
....
<h1>埼玉県</h1>
....


段落 <p> 〜 </p>

段落(パラグラフ)とは、幾つかの文が連なって(意味的に、内容的に)1つのまとまったグループをなしていることを表している様子である。 段落内の文は、そのまま一連なりになっている。

レイアウト的には、例えば段落の始まりの文字を字下げ(1マス空ける)して段落の切れ目であることを視覚的に見せる方法が通常の文書方式である。 段落先頭の前の文字の「後」に段落改行されていると見なすこともできる。 段落改行は、以下の強制改行とは全くことなり、その利用においては厳格に区別されるべきである。

HTMLでは、段落の切れ目を改行または空行(改行を2回続ける)で表すことはできない。

[HTMLテキスト例]
今日は快晴である。
最高のスポーツ日和である。

ところで、昨日新しいゲームが発表された。
あまりにも面白いので朝から夢中だ。
[ページ表示]
今日は快晴である。 最高のスポーツ日和である。 ところで、昨日新しいゲームが発表された。 あまりにも面白いので朝から夢中である。


指定した文字列範囲を段落とするのは、 先頭を <p>、段落の最後を </p> で挟む。

[HTMLテキスト例]
<p>
今日は快晴である。
最高のスポーツ日和である。
</p>
<p>
ところで、昨日新しいゲームが発表された。
あまりにも面白いので朝から夢中だ。
</p>
[ページ表示]

今日は快晴である。 最高のスポーツ日和である。

ところで、昨日新しいゲームが発表された。 あまりにも面白いので朝から夢中である。



タグ <p> と </p> にる段落指定では、段落と段落の間にわずかに空白があって、段落の切れ目だとわかるが、段落の開始文字は字下げが行われない(段落開始文字の字下げはCSSで調整すべきことになっている)。

強制改行 <br />

文中のある文字のあとで、意味・内容とは無関係に強制的に改行してしまうことを強制改行といいい、単独タグで用いて <br /> で表す。 組なったタグ<p>〜</p>を使って段落の切れ目でおこなわれる段落改行とは意味も用途もまるで異なる

通常の文書でも、強制改行後は段落改行のように「次の」文字の字下げは行われない。

[HTMLテキスト例]
今日は快晴である。
最高のスポーツ
<br />
日和である。

ところで、昨日新しいゲームが発表された。
あまりにも面白いので朝から夢中だ。
[ページ表示]
今日は快晴である。 最高のスポーツ
日和である。 ところで、昨日新しいゲームが発表された。 あまりにも面白いので朝から夢中である。


単純箇条書

以下の表示のように、料理の材料を箇条書きで並べる場合、その順番には『意味はなく』どのように並べても、文意が通る。 このように、箇条項目の順番に意味がないときには、単純箇条書(Unordered List)を使う。

[書き方(1)]
しっとりチーズケーキを作る材料です。
クリームチーズ 250g 
生クリーム 200mL 
卵 2個 
グラニュー糖 80g
薄力粉 大さじ3
レモン汁 大さじ2
[書き方(2)]
しっとりチーズケーキを作る材料です。
卵 2個
グラニュー糖 80g
クリームチーズ 250g 
生クリーム 200mL 
レモン汁 大さじ2
薄力粉 大さじ3


単純箇条書では、箇条項目を並べてた全体を、タグ <ul></ul> で囲む。 また、各箇条項目は、タグ <li></li> で囲む。 下右のように、箇条項目が記号『・』が付いてレイアウトされる。

HTMLテキスト例]
<p>
しっとりチーズケーキを作る材料です。
</p>
<ul>
<li>クリームチーズ 250g</li>
<li>生クリーム 200mL</li>
<li>卵 2個</li>
<li>グラニュー糖 80g</li>
<li>薄力粉 大さじ3</li>
<li>レモン汁 大さじ2</li>
</ul>
[ページ表示]

しっとりチーズケーキを作る材料です。



順序付箇条書き

以下の表示のように、目的地までの道順を箇条書きで並べる場合、その順番自体に『意味があり』、順序を変えてしまうと、文意が破壊される。 このように、箇条項目の順番に意味があるときには、順序箇条書(Ordered List)を使う。

[意味ある書き方]
高坂から東京駅に行く鉄道経路です。
東上線 高坂から和光
副都心線 和光から新宿三丁目
丸ノ内線 新宿三丁目から四谷
JR中央線 四谷から東京
[無意味な書き方]
高坂から東京駅に行く鉄道経路です。
丸ノ内線 新宿三丁目から四谷
東上線 高坂から和光
JR中央線 四谷から東京
副都心線 和光から新宿三丁目



順序付箇条書では、箇条項目を並べてた全体を、タグ <ol></ol> で囲む。 また、各箇条項目は、タグ <li></li> で囲む。 下右のように、箇条項目には順序記号『1,2,3』などが付いてレイアウトされる。

HTMLテキスト例]
<p>
高坂から東京駅に行く鉄道経路です。
</p>
<ol>
<li>東上線 高坂から和光</li>
<li>副都心線 和光から新宿三丁目</li>
<li>丸ノ内線 新宿三丁目から四谷</li>
<li>JR中央線 四谷から東京</li>
</ol>
[ページ表示]

高坂から東京駅に行く鉄道経路です。

  1. 東上線 高坂から和光
  2. 副都心線 和光から新宿三丁目
  3. 丸ノ内線 新宿三丁目から四谷
  4. JR中央線 四谷から東京


箇条書きを書く場合には、単純箇条書であるべきなのか、順序付箇条書きべきであるのかを文意を捉えて適切に判断する必要がある。 単純箇条書で十分であるのに、順序付箇条書きを使って書くことは文書として誤りである。

箇条書きを入れ子にする