ブロックレベル要素とインライン要素｜HTML5｜HTML－havin' a coffee break

＃

ブロックレベル要素とインライン要素

“ブロックレベル要素(Block-level Elements)”と“インライン要素(Inline Elements)”はHTML4での要素の分類方法で、この分類によって要素の内包関係を定義するコンテンツ・モデルや要素がどのようにレイアウトされるかを定義していました。

ブロックレベル要素
新しい行から始まり、使用可能な横幅いっぱいに空間を占有します。
見出し・段落・表など、文書を構成する基本となる要素です。インライン要素と他のブロックレベル要素を含むことができます。: インライン要素
行の途中から始まることができ、内容に合った空間だけ占有します。
文章の一部を構成する要素で、文章の中の一部を強調したり、書体を変えたりする要素です。テキストと他のインライン要素を含むことができます。
HTML4.01のStrict DTDではブロックレベル要素に内包せずに直接“body”要素の中に配置することができません。

コンテンツ・モデルはより細かく要素を分類したコンテンツ・カテゴリーによるものに変更されました。また、HTML5からは要素のレイアウトなどの見た目に関する機能については完全にCSSが担うようになったため、“ブロックレベル要素”と“インライン要素”の概念自体は現在もCSSの仕様にあるものの、HTMLの仕様では要素がそのどちらなのかについて厳密には定義されていません。

＃

CSSによる“ブロックレベル要素”と“インライン要素”

“ブロックレベル要素”と“インライン要素”は現在でもCSSによるフロー・レイアウトの中で定義されており、“display”プロパティによって要素がそのどちらとしてレイアウトの中で振舞うのかを指定することができます。

“display”プロパティの外部ディスプレイ・タイプが“block”の場合には要素はブロック整形コンテキストに参加するブロック・レベルの要素となり、“inline”の場合には要素はインライン整形コンテキストに参加するインライン・レベルの要素となります。

＃

ブロックレベル要素の一覧

以下は一般的なブラウザでブロックレベル要素として表示される要素です。

要素	説明
<address>	文書や記事の連絡先情報を表す
<article>	自己完結した記事セクションを表す
<aside>	補足するセクションを表す
<blockquote>	引用部分を表す
<body>	文書の内容を表す
<dd>	説明リストの説明部分を表す
<del>	削除された内容を表す
<details>	開閉式のウィジェットを表す
<dfn>	定義される用語を表す
<dialog>	ダイアログボックスを表す
<div>	特定の範囲をグループ化
<dl>	説明リストを表す
<dt>	説明リストの説明対象を表す
<fieldset>	フォームの内容をグループ化
<figcaption>	図表などのキャプションを表す
<figure>	自己完結した内容を表す
<footer>	文書やセクションのフッタを表す
<form>	入力フォームを表す
<h1>~<h6>	セクションの見出し
<header>	文書やセクションのヘッダを表す
<hgroup>	見出しのグループ化
<hr>	テーマの区切りを表す
<html>	HTML文書のルートを表す
<legend>	グループ化したフォームの内容のキャプションを表す
<li>	リストの項目を表す
<main>	文書のメイン・コンテンツ
<menu>	操作メニューを表す
<nav>	ナビゲーションであることを示す
<ol>	順序付きのリストを表す
<optgroup>	入力候補のグループ化
<p>	段落を表す
<pre>	整形済みのテキストを表す
<section>	一般的なセクションを表す
<select>	選択式の入力欄を表す
<summary>	開閉式のウィジェットの要約を表す
<sup>	上付き文字を表す
<table>	表の大枠を表す
<ul>	順不同のリストを表す

以下のHTML5で廃止された要素はHTML4ではブロックレベル要素に分類されていました。

要素	説明
<center>	中央揃え
<dir>	ディレクトリリスト
<noframes>	フレームの代替内容

＃

インライン要素の一覧

以下は一般的なブラウザでインライン要素として表示される要素です。

要素	説明
<a>	ハイパーリンクを表す
<abbr>	略語や頭字語を表す
<audio>	音声コンテンツを埋め込む
<b>	特別なテキストを表す
<bdi>	書字方向が異なるテキストを表す
<bdo>	テキストの書字方向を指定
<br>	改行を表す
<button>	ボタンを表す
<canvas>	スクリプトによる描画領域を表す
<cite>	作品のタイトルを表す
<code>	ソースコードなどを表す
<data>	機械可読な形式で表す
<embed>	プラグインデータの埋め込み
<em>	テキストの強調を表す
<i>	質が異なるテキストを表す
<iframe>	他の文書の埋め込み
<img>	画像を埋め込む
<input>	入力欄を表す
<ins>	後から追記された内容
<kbd>	入力するテキストの例を表す
<label>	フォームの内容のラベルを表す
<mark>	他の場所からの参照のためにハイライト
<meter>	計測値を表す
<object>	外部リソースの埋め込み
<picture>	レスポンシブな画像を埋め込む
<progress>	進捗状況を表す
<q>	短い引用を表す
<ruby>	ルビを振るテキストを指定
<s>	すでに正確ではない部分を表す
<samp>	出力されるテキストの例を表す
<slot>	シャドウツリーのスロットを表す
<small>	細字部分を表す
<span>	特定の範囲をグループ化
<strong>	テキストの重要性を表す
<sub>	下付き文字を表す
<textarea>	複数行のテキスト入力欄を表す
<time>	日付や時刻を機械可読な形式で指定
<u>	テキストのラベル付けを表す
<var>	変数を表す
<video>	映像コンテンツを埋め込む
<wbr>	改行可能な箇所を指定

以下のHTML5で廃止された要素はHTML4ではインライン要素に分類されていました。

要素	説明
<acronym>	略語（頭字語）
<applet>	Javaアプレットの埋め込み
<big>	大きめの文字
<font>	フォント
<isindex>	テキスト入力欄
<strike>	取り消し線
<tt>	等幅フォント

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素とは？