テキストに意味づけをする マークアップ
HTMLのタグにはそれぞれ意味があり、テキスト文書にタグを振り、意味を表現することをマークアップといいます。
たとえば Pタグは文章を、ULタグはリスト、BLOCKQUOTEタグは引用をそれぞれ意味します。
このマークアップによって、テキストの表現に統一感を出したりできます。
またGoogleなどのサーチエンジンのような文章を解析するプログラムに、文章構造をわかりやすく伝えることができます。
BODYタグ内で表示される全てのテキスト、インライン要素のタグは意味のあるブロック要素で囲うようにします。
<DEL>と<INS>は、『インライン要素のみを包含する場合はインライン要素、ブロック要素を包含する場合はブロック要素』となります。
[参考記事] 内包可能要素 子要素として許可される要素
[参考記事] ブロック要素(ブロックレベル要素)とインライン要素
HTMLの厳密な仕様では、BODY要素の直接の子要素としてインライン要素を使うことはできません。
DOCTYPE宣言に仕様のURLがあります。たとえばHTML4.01 Strictは次のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
http://www.w3.org/TR/html4/strict.dtd
を開いてみるとBODY要素の内容について記述があります。
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
つまりBODY要素の直下には、ブロック要素、scriptもしくはINS、DELしか認められていません。
たとえば次のようなものは間違いです。
<body> テキスト文章 </body>
<body> <img src="sample.png" alt="サンプル" /> </body>
厳密には次のようにします。
<body> <p>テキスト文章</p> </body>
<body> <p><img src="sample.png" alt="サンプル" /></p> </body>
よくある間違いとして、次のようなBRタグの扱いも間違いです。
<body> <p>テキスト文章</p> <br /> <p>テキスト文章</p> </body>
BRタグもインライン要素のためBODYの直下には配置できません。
また厳密なHTMLではデザインはスタイルシートで記述するようになっているため、隙間を空けるためだけのBRは避けるべきです。
インライン要素(文章中で使用する)
タグ | 意味 |
---|---|
<ABBR> | 略語を示す |
<ACRONYM> | 略語を示す |
<CITE> | 出典元・参照元を示す |
<CODE> | プログラムのソースコードを示す |
<DEL> | 削除された部分であることを示す |
<DFN> | 定義する用語を明示する |
<INS> | 追加された部分であることを示す |
<KBD> | キーボード入力される文字であることを示す |
<Q> | 引用文であることを示す |
<SAMP> | プログラムによる出力結果のサンプルであることを示す |
<VAR> | 変数や引数であることを示す |
ブロック要素(文章全体に意味付けをする)
タグ | 意味 |
---|---|
<ADDRESS> | 連絡先・問合せ先を示す |
<BLOCKQUOTE> | 長い引用文を示す |
<DIR> | ディレクトリ内などのファイルリストを表示する |
<DEL> | 削除された部分であることを示す |
<DL> | 定義リストであることを示す |
<DT> | 定義する用語を示す |
<DD> | 定義した用語の説明を指定する |
<H1>〜<H6> | 見出しを付ける |
<INS> | 追加された部分であることを示す |
<MENU> | メニューリストを表示する |
<OL> | 順序のあるリストを表示する |
<P> | ひとつの段落(パラグラフ)であることを示す |
<TABLE> | テーブル(表)を作成する |
<TD> | テーブル(表)のデータセルを作成する |
<TH> | テーブル(表)の見出しセルを作成する |
<UL> | 順序のないリストを表示する |
関連記事
- HTMLの構造
- 文字コードの指定
- HTMLファイルを作って、ブラウザで表示してみる
- 『開始タグ』と『閉じタグ』
- 子要素として許可される要素 内包可能要素
- ブロック要素(ブロックレベル要素)とインライン要素
- 見出し H1 H2 H3 H4 H5 H6
- 文章のまとまり、段落 P ADDRESS BLOCKQUOTE
- 表組みを作成する TABLE TH TD
- リストを作成する UL OL DL
- 横罫線を引く HR
- 改行する BR
- 文章中のテキストに意味を付ける インライン要素のマークアップ
- テキストの装飾をする
- 上付き文字、下付き文字を表示する SUP SUB
- 追加された部分、削除された部分であることを示す INS DEL
- リンクなどのパスの指定
- 別のページへのリンク 同ページ内のリンク A
- 他のページを参考にする ソースを見る
- 画像を設置する IMG
- HTML特殊文字 HTMLエスケープ 実体参照
スポンサーリンク