段落

以降は断りのない限り,ソースはbody要素内に書かれているものとします.

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

段落を表すには文章をp要素で囲います.出力結果は以下の通りです.

段落1

段落2

段落3

p要素は改行を表すものではありません. <p> </p> のように記述して行間を空けるのは御法度です.このような見た目の制御はCSSを用いて行うべきです.

見だし

<h1>見だしレベル1</h1> <h2>見だしレベル2</h2> <h3>見だしレベル3</h3> <h4>見だしレベル4</h4> <h5>見だしレベル5</h5> <h6>見だしレベル6</h6>

出力結果は以下です.

見だしレベル1

見だしレベル2

見だしレベル3

見だしレベル4

見だしレベル5
見だしレベル6

これらの要素は文字を大きくするためのものではありません.また,h2要素やh3要素があるのに,h1要素がないのは悪い例です.数字の小さいものから順に使いましょう.

改行

<p>文章があります.<br />改行されました.</p> <p>直接改行文字を入れた場合はどうでしょうか? 改行されません.</p>

出力結果は以下です.

文章があります.
改行されました.

直接改行文字を入れた場合はどうでしょうか? 改行されません.

改行にはbr要素を用います.p要素と同様に,br要素を縦方向のスペースをとるために使うのは避けるべきです.

水平線

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

出力結果は以下です.

段落1


段落2

上の枠の中では水平線は枠いっぱいに収まっていますが,スタイルシートを指定しない限り,本来はブラウザの左から右まで水平線が引かれます.

もっとも,hr要素は,文書の構造というより見た目を記述する要素にも思えますが……(CSSで実現できます).

箇条書き

番号なし箇条書き

<ul> <li>項目1</li> <li>項目2</li> </ul>

出力結果は以下です.

番号あり箇条書き

<ol> <li>項目1</li> <li>項目2</li> </ol>

出力結果は以下です.

  1. 項目1
  2. 項目2

見だしつき箇条書き

<dl> <dt>見だし</dt> <dd>説明文</dd> </dl>

出力結果は以下です.

見だし
説明文

番号なし箇条書き・番号あり箇条書きの項目の前にある記号や数字は,スタイルシートで変えられます.

引用

<p> <blockquote><p>長い文章の引用を表すタグです.</p></blockquote> <q>短い語句の引用を表すタグです.</q> </p>

出力結果は以下です.

長い文章の引用を表す要素です.

短い語句の引用を表す要素です.

blockquote要素とq要素には,原文の所在を表すURIを指定できるcite属性があります.

なお,q要素はUAによって挙動が異なります.例えば,カギ括弧の有無が違うため,あるUAでは「「(q要素の中身)」」となり,別のUAでは「(q要素の中身)」と表示されます.混乱を招く恐れがあるため,あまり使われていません.

略語

<abbr title="Computer Graphics">CG</abbr><br /> <acronym title="Musical Instrument Digital Interface">MIDI</acronym>

出力結果は以下です.

CG
MIDI

どちらの要素も略語を表します.abbr要素は,略語がアルファベット通りに読まれるもの(上の例では「シージー」)で,acronymは,略語がアルファベット通りに読まれないもの(上の例では「ミディー」)に使います.

どちらの要素もtitle属性でフルスペルを与えることができます.

文書の変更

<p>来週の講義は<del>休講です.</del><ins>予定通り開講します.</ins></p>

出力結果は以下です.

来週の講義は休講です.予定通り開講します.

ins要素とdel要素には,cite属性とdatetime属性が指定できます.cite属性には変更理由を説明した文書のURIを,datetime属性には文書の変更日時を指定します.

datetime属性の指定方法で,例えば,2002年8月8日正午(日本時間)は 2002-08-08T12:00:00+09:00 と表します.標準時に直して 2002-08-08T03:00:00Z と表記することもあります.

整形済みテキスト

<pre> スペースを空けても    ちゃんと表現されますし, br要素を使わずに改行してもちゃんと表現されます. </pre>

出力結果は以下です.

スペースを空けても    ちゃんと表現されますし,
br要素を使わずに改行してもちゃんと表現されます.

pre要素を使うと,文章を入力した通りに表示させることができます.

文書の構造を表す要素

<p> <em>強調を表す要素</em><br /> <strong>強い強調を表す要素</strong><br /> <dfn>何らかの定義を表す要素</dfn><br /> <cite>引用文献や参照元を表す要素</cite><br /> <address>署名を表す要素</address><br /> <code>コンピュータコードを表す要素</code><br /> <samp>プログラムの出力結果等を表す要素</samp><br /> <kbd>ユーザの入力を表す要素</kbd><br /> <var>変数を表す要素</var> </p>

出力結果は以下です.

強調を表す要素
強い強調を表す要素
何らかの定義を表す要素
引用文献や参照元を表す要素

署名を表す要素

コンピュータコードを表す要素
プログラムの出力結果等を表す要素
ユーザの入力を表す要素
変数を表す要素

例えば,em要素は斜体文字での表現が多いですが,あくまで強調を表すために使います.もし,UAの開発者が「強調は大きい文字で表す」と考えるなら,em要素で囲われた文字は,斜体文字ではなく大きい文字になります.