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


さぁ、はじめよう!!

ほぼ初心者な私が、そろそろ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