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


さぁ、はじめよう!!

ほぼ初心者な私が、そろそろWeb制作の基本も理解しておいた方がいいかな?と思い、でも覚えなさそうなので、忘れてもいいように少しずつ書きまとめているものです。

これは、ある日気の向くままに「WEBサイト」を立ち上げてしまった初心者が、Web制作の基本も理解していなければ、この先もあまり覚えそうにないということで、忘れてもいいように少しずつ書き残しているものです。

 

 

 

 

要素の分類

HTML要素の中で使用される各要素は、大きく分けて「ブロックレベル要素」と「インライン要素」に分類される。

と、HTML4.01 までは分類されていたが、「カテゴリによる分類とコンテンツ・モデル」という新たなルールが、HTML5から導入されたため廃止されている。

でも一般的に、まだまだ使われているようなので、HTMLとCSSを理解する上でも知っておくと良いかもしれない。

 

ブロックレベル要素

文書を構成する基本となる要素。

 

見出し <h1>~<h6>
テーブル <table>
グループ化 <div>
段落 <p>
リスト <ol>
<ul>
罫線 <hr>
フォーム <form>
など

 

 

インライン要素

文章の一部として意味付けする要素。

 

リンク <a>
画像 <img>
強調 <strong>
グループ化 <span>
フォーラム関連 <input>
<textarea>
など

 

 
コンテンツモデル
どの要素にどんなコンテンツを入れて良いかを定義したもの。

要素によっては、複数のカテゴリーに属している場合があったり、属性などの条件により、属するカテゴリーが変化する場合がある。 また、どのカテゴリーにも属さない要素もある。

 
 Metadata Content メタデータ・コンテンツ 
文書情報や別文書との関係など、ページに表示する以外の情報を伝える、head要素内で使用できる要素。

 
 Flow Content フロー・コンテンツ 
文書の本体に現れる一般的なもので、ほぼbody要素内で使われる要素。

 
 Sectioning Content セクショニング・コンテンツ 
見出しやフッターの対象を定義する要素。

 
 Heading Content ヘッディング・コンテンツ 
セクションの見出しを定義する要素。

 
 Phrasing Content フレージング・コンテンツ 
段落などに含まれる文節・語句など、文書を構成するテキストを表す要素。
従来のHTMLでインライン要素と呼ばれていた分類に相当する要素。

 
 Embedded Content エンベッデッド・コンテンツ 
文書に、画像やインラインフレームなどのほかのリソースを組み込む要素。

 
 Interactive Content インタラクティブ・コンテンツ 
リンクやフォームの入力欄などのユーザーが操作可能な要素。

 

 

基本的なルール

ブロックレベル要素とインライン要素では、要素を入れ子状にするときのルールが異なる。

 

ブロックレベル要素

ほかのブロックレベル要素やインライン要素、テキストを配置することができる。

 

インライン要素

ほかのインライン要素やテキストを配置することができるが、ブロックレベル要素の「親要素」になることはできない。

 

 サンプルソース 

 ブロックレベル要素の中にインライン要素を配置

<p>これは
<strong>正解</strong>です。</p>

× インライン要素の中にブロックレベル要素を配置

<strong>これは<p>間違い</p>です。</strong>

 

 

 

 

最後まで読んでくれてありがとうございました。
それでは、see you next time.

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA