構文
<p>・・・</p>
説明文
<p>タグは,文書の1段落を表す。<p>~</p>に囲まれた文書が1段落として扱われる。また,基本的に段落中では改行はされない。ただし,Webブラウザの右端ま文字が達すると,適当に改行されて表示される。また,強制的に改行したい場合は,改行したい場所に<br>タグを挿入する。
段落同士の行間の設定や字下げを行う場合は,スタイル・シートを利用して設定する。
<p>タグにはインライン要素のみ包括できる。ブロック要素は包括できないので,注意が必要だ。
サンプル
HTMLソース
<p>Webページを作成にはテキスト・エディタを用いてテキスト・ベースで作成
していく手法があります。</p>
<p>この際,HTMLで決められている各タグを理容師ならがら記載します。また,
スタイル・シートを用いて文字に装飾を施したり,オブジェクトを自由に配置
できます。</p>
ブラウザ表示例
Webページを作成にはテキスト・エディタを用いてテキスト・ベースで作成していく手法があります。
この際,HTMLで決められている各タグを理容師ならがら記載します。また,スタイル・シートを用いて文字に装飾を施したり,オブジェクトを自由に配置できます。
対応状況
HTML | IE | Firefox | Opera | |||||
---|---|---|---|---|---|---|---|---|
4 strict | 4 Transitional | 5 | 6 | 7 | 2 | 3 | 8 | 9 |
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
要素,タグ
タグ要素 | ブロック要素 |
---|---|
包括可能要素 | インライン要素 |
タグ記述条件 | 開始タグ:必須 終了タグ:省略可 |
属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
align=配置位置 | この要素に指定した内容について横方向の配置位置を指定する。「left」で左揃え,「center」で中央揃え,「right」で右揃え,「justify」でセル内に均等になるように配置する | × | ○ | |
class=クラス名 | このタグのクラス名。CSSでスタイルを指定する場合などに利用される | ○ | ○ | |
dir=方向 | タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する | ○ | ○ | |
id=ID | タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する | ○ | ○ | |
lang=言語 | タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する | ○ | ○ | |
style=スタイル | タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 | ○ | ○ | |
title=タイトル | タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する | ○ | ○ |
マウスやキーボードの状況変化に関わる属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
onclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
ondblclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousedown=スクリプト | このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseup=スクリプト | このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseover=スクリプト | このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousemove=スクリプト | このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseout=スクリプト | このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeypress=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeydown=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeyup=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する | ○ | ○ |
■ 行頭の字下げ
日本語で文書を記載する際には,各段落の始めを1文字分を空ける字下げが行われる。しかし,そのまま<p>タグで文書を記載しても字下げ処理は行われない。そのため,字下げを行うため段落の始めに全角スペースを入れることがある。しかし,スペースで字下げを行うのは文書構造的に良くない。
そこで,HTMLで字下げを行う場合はスタイル・シートの「text-indent」を設定する。例えば,<p>タグで字下げするには以下のように記載する。
<p style="text-indent:1em;">段落を字下げする。</p>
また,ヘッダ部分や別のスタイル・シートの設定ファイルに<p>タグの字下げの設定をすることで,Webページ内全ての<p>タグが字下げされる。例えば,ヘッダ部分を利用して字下げを行う場合は以下のように記載する。
<style type="text/css">
<!--
p { text-indent: 1em; }
-->
</style>