Web Survive

Webで生きる道を模索するブログ

主なブロックレベル要素

ブロックレベル要素にはたくさんの種類がありますので、
以下では代表例を解説します、

見出し(h1〜h6)

見出しにはh1要素、h2要素、h3要素、h4要素、h5要素、h6要素の6つのレベルがあります。
h1要素は大見だし、h2要素は中見出し、h3要素は小見出しに使い、
h4〜h6要素は必要に応じてそれ以下の見出しに利用するのが基本です。

見出し(h1〜h6要素)のマークアップ例

つまり、h1要素の下のレベルとしてh2要素を、
さらにその下のレベルとしてh3要素を、
というように、階層を意識してマークアップすることになります。

見出しの使い方は、標準仕様で明確に決められていなかったり、
ページ全体の文脈に依存するため、
一様に「これ」といいう決定的な方法はないのが実情です。

段落(p要素)

段落(パラグラフ)とは「文章ひとかたまり」のことであり、p要素を利用します。

段落(p要素)のマークアップ例

実務的には、数行にわたる文章ばかりではなく、
見出しやリストといった特定の役割を与えることのできないコンテンツも
p要素としてマークアップするのが一般的です、
たとえば「詳しくは◯◯を参照」といったリンクテキストや、
画像やキャプション(ちょっとした説明)のまとまりなどです。
段落のなかで改行したい場合は、br要素というインライン要素を利用します。

引用文(blockquote要素)

テキストをまとまった引用文として定義するにはblockquote要素を利用します。

引用文(blockquote要素)のマークアップ例

書籍や雑誌、他のサイトやブログから文章を引用する場合には、
著作権法に従って実施します。

blockquote要素でマークアップし、可能ならcite属性で引用元のURLを示します。
マークアップだけでなく、引用元をきちんと書いておきましょう。
blockquote要素は「引用範囲の入れ物」のようなものなので、
中身をp要素などのブロックレベル要素できちんとマークアップします。

サイト所有者・制作者情報(address)

主にページのフッター部分で
著作権表記やサイト所有者・制作者の連絡先を指定するのにはaddress要素を利用します。

制作者情報(address)のマークアップ例

多くのサイトのフッターで
「Copyright ©2015 Example inc. All Rights Reserved.」
と書いてあるのを見かけますが、これが著作権表記です。
また、ページによっては所有者や制作者の氏名と連絡先を示すことがありますが、
その場合にもaddress要素が利用されます。

順不動リスト(ul要素)

項目を順不同で並列的に列挙するタイプのリストです。
ul要素でリスト全体を囲み、項目それぞれをli要素でマークアップします。

順不動リスト(ul要素)のマークアップ例

例でいうと、料理をつくるための材料は順不同なので、
ul要素でマークアップします。
実務的には、ナビゲーションなど並列的なリンクリストも
ul要素でマークアップするのが一般的です。

ブラウザではli要素の先頭に「・」とマーカーが振られます。
入れ子にした場合は、丸形で白抜きなど、マーカーの形が変化することもあります。

順序リスト(ol要素)

項目を順序や順番として定義するタイプのリストです。
ol要素でリスト全体を囲み、項目それぞれをli要素でマークアップします。

順序リスト(ol要素)のマークアップ例

料理をつくる手順は文字どおり「順序」を示す必要があるので、
ol要素でマークアップします。
ほかにも、売り上げランキングなど順位を示す場合にもol要素を利用します。

ブラウザではli要素の先頭に「1.」「2.」「3.」と番号が振られます。

定義リスト(dl要素)

用語と説明で構成するタイプのリストを「定義リスト」といいます。
dl要素で全体を囲み、用語をdt要素で、説明をdd要素でマークアップします。

定義リスト(dl要素)のマークアップ例

「用語集」のようなコンテンツを思い浮かべてもらうとわかりやすいでしょう。

実務的には、
新着情報リスト(「日付」と「内容」)、商品リスト(「商品写真」と「説明」)、
役員リスト(「役員名」と「名前」)、会話リスト(「発言者」と「発言内容」)
などに応用して利用することもあります。

表(table要素)

ある内容を表(テーブル)として定義するためにはtable要素を利用します。
単なるテキストの羅列よりも、
一覧表や年表としてまとめたほうが見やすくわかりやすいコンテンツもあるので、
そのような場合にtable要素を利用することになります。

HTML5からは、border属性以外の属性(width、height、cellspacing、cellpadding等)は廃止となりました。
border属性の値は1か空(””)のどちらかで
border=”1″の場合はその表がレイアウト目的のものではないことを表します。
デザインのためのborder指定ではないことに注意枠線のスタイルはCSSで指定します(従来通り)

表(table要素)のマークアップ例

例えば、料理の材料をリストで示すのではなく、
「左側に材料名、右側の分量」という表でまとめたほうが
わかりやすい場合もあるでしょう。

マークアップにおける用語法として、
表の中の一つ一つの項目を「セル(cell)」、
横方向のセルの並びを「行(row)」、
縦方向のセルの並びを「列(column)」
と表現します。
table要素で全体を囲み、tr要素で行を定義し、
ヘッダセル(見出しセル)であるth要素や、
データーセル(通常のセル)であるtd要素を含めます。
caption要素でキャプション(表のタイトル)をつけることもできます。
さらに、列グループを定義するcolgroup要素とcol要素、
行グループを定義するthead要素、tfoot要素、tbody要素を利用することで、
表をさらに詳細に構造化することができます。

表(table要素)の高度なマークアップ例

フォーム(form要素)

ユーザーによる入力や選択が可能なフォームの範囲を示すために
form要素を利用します。

お問い合わせフォームやアンケートフォーム、
検索ボックスなどを思い浮かべてみてください。

フォームに含めるさまざまなパーツを「フォームコントロール」と総称します。
ほとんどの場合、
imput要素で埋め込み、type属性でパーツの種類を指定することになります。

たとえばテキスト入力欄(text)や送信ボタン(submit)、
チェックボックス(checkbox)などです。

ほかにもセレクトメニューはselect要素で、
複数行テキストエリアはtextarea要素で、
汎用ボタンはbutton要素で埋め込みます。

フォーム(form要素)のマークアップ例