HTML

HTMLのブロック要素とインライン要素・そしてコンテンツモデル

みなさん、こんにちは。どんぶラッコです。

今日はボックス型とインライン型の違いについて解説します。
…と言われても「?」となる方が多そうですね。笑

我々が普段何気なく使っているhtmlタグですが、実はタグによって2つの性質を持っています。

それがブロック要素とインライン要素です。

今日は、それぞれの特徴についてご紹介します!

ブロック要素とインライン要素

まずは比較表から。

ブロック要素は文章の構成に関わるタグがこれに当たります。具体例で言うと、p, h1, div などですね。

一方インライン要素は文章そのものの性質を表現するために使うタグです。具体例で言うと、a, img, span などですね。

この2つの性質の最も大きな違いは改行があるかどうか、です。
例えばブロック要素である段落を使ったとしましょう。通常段落を使うときは1段落目、2段落目…というように段落分けされますよね。なので改行の処理が入ります。

一方、インライン要素は文章自体の性質を表すだけなので改行処理は入りません。
リンクは、他のページに遷移できる「文章」ですよね!

コンテンツカテゴリー

実は、HTML5ではブロック要素・インライン要素という概念は無くなってしまいました。

今はコンテンツカテゴリーという概念でHTMLタグは分類されています。

例えば、リンクはインライン要素でしたが、カードに対してリンクを貼りたい場合がありますよね。

でも、ブロック要素・インライン要素という分類だけでは、

文章の中の要素(リンクタグ)の中にブロック要素(カード, divタグ)が入っているのはおかしくね!?

となってしまいます。

そんな不整合さを解消するためにHTMLタグを再整理したのがコンテンツカテゴリーです。

しかし、HTMLタグそれぞれはブロック要素、インライン要素の性質は保持したままなので、まずはブロック要素、インライン要素の概念を抑えちゃいましょう!


頭の中を再整理する機会になれば幸いです♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

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