4回目の投稿になります。
今回は、HTMLのブロック要素とインライン要素のタグを一覧にまとめました。
※HTML5での分類は無くなったとご指摘をいただきましたので、訂正致します。勉強不足ですね・・・失礼しました。
こういった要素があったということで、このままメモとして残させていただきます。
ブロック要素とインライン要素
HTMLの要素には改行される要素(ブロック要素)と改行されない要素(インライン要素)があります。
ブロック要素
縦に積まれる性質。
ブロック要素を配置した時に前後に1行分のスペース(改行)があることを指す。
ブロック要素の中にブロック要素を入れられる。
要素名 | 意味・用途 | 中に入れられる要素 |
---|---|---|
h1 ~ h6 | 見出し | インライン要素のみ |
p | 段落 見出し以外の文章に使われる | インライン要素のみ |
pre | 改行や字下げを保持し、整形した通りのテキスト表示 | インライン要素のみ(img,object,big,small,font etc...文字幅を変えてしまう要素は入れられない) |
div | Divisionの略 レイアウトを構成(グループ化)する時に使う用素 | ブロック要素、インライン要素 |
ul | UnorderListの略 箇条書きリスト | li要素のみを1つ以上(li要素の中にブロック要素を含んで問題なし) |
ol | OrderListの略 数字連番リスト | li要素のみを1つ以上 |
dl | DefinitionListの略 定義を表す(用語と説明)リスト | dt要素、dd要素のみ |
blockquote | 長めの引用文 | ブロック要素、script要素 |
table | 表 | caption要素、colgroup要素、col要素、thead要素、tfoot要素、tbody |
address | アドレス(連絡先)、作者情報 | インライン要素のみ |
form | 送信フォーム部品すべて | ブロック要素、script要素 |
fieldset | フォーム部品のグループ化 | ブロック要素、インライン要素 |
noframes | フレーム表示されない時のコメント用 | ブロック要素、インライン要素 |
hr | 水平線(区切り線) | 空要素タグ |
インライン要素
ブロック要素や文章のなかに含まれる要素で、前後改行されない。
横に並ぶ性質。
インライン要素の中にブロック要素は入れられない。
要素名 | 意味・用途 | 中に入れられる要素 |
---|---|---|
a | リンク | a要素を除くインライン要素のみ |
span | 特定の範囲に使用。文字の一部分だけ色を変えたりなど。 | インライン要素のみ |
br | 改行 | 空要素タグ |
button | ボタン | iframe要素、input要素、select要素、textarea要素、label要素、button要素、isindex要素、a要素を除くインライン要素のみ |
font | フォント名、色、フォントサイズを指定 | インライン要素のみ |
b | 太字 | インライン要素のみ |
bdo | 文字の方向 | インライン要素のみ |
small | 小さめの文字 | インライン要素のみ(smallを入れるとさらに小さな字にできる) |
strong | 強調(太字で表示) | インライン要素のみ |
em | 強調(イタリックで表示) | インライン要素のみ |
i | 斜体(イタリック) | インライン要素のみ |
sub | 下付き文字 | インライン要素のみ |
sup | 上付き文字 | インライン要素のみ |
var | 変数、引数とわかるように文字表示 | インライン要素のみ |
u | 下線 | インライン要素のみ |
s | 取り消し(打ち消し)線 | インライン要素のみ |
img | 画像 | 空要素タグ |
map | イメージマップ(画像の中のリンク部分) | ブロック要素か、一つ以上のarea要素 |
select | 選択画面入力部品 | option要素、optgroup要素 |
input | 送信フォームの入力部品 | 空要素タグ |
label | フォーム部品としてのラベル | label要素を除いたインライン要素のみ |
textarea | 複数行のテキスト入力エリア | テキストのみ |
cite | 出典、参照先(イタリックで表示) | インライン要素のみ |
dfn | 用語解説の該当用語をイタリックで表示 | インライン要素のみ |
q | 短めの引用文 | インライン要素のみ |
samp | サンプル形式表示 | インライン要素のみ |
kbd | キーボード入力文字形式として表示 | インライン要素のみ |
code | ソースコード | インライン要素のみ |
iframe | インラインフレームの配置用 | ブロック要素、インライン要素 |
object | 様々な形式のデータを配置 | ブロック要素、インライン要素、param要素 |