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

フロントエンドエンジニアの所長です！

今回はブロックレベル要素とインライン要素について説明していきます。
たくさんあるタグたちは、ほとんどがこのブロックレベル要素とインライン要素に分類されます。
代表的なタグも紹介しながら説明していきます！

ブロックレベル要素

見出しや段落など、文書を構成する基本的な要素で1つのブロック(塊)として認識される。
ブラウザでの表示も一つの塊として扱われ、一般的なブラウザでは前後に改行が入る。
つまり、横幅が左右いっぱいに広がる要素です。

<h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <p> , <ul> , <ol> , <li> など

主にブロックレベル要素の内容として用いられ、文章の一部として使います。
一般的なブラウザでは前後に改行が入らない。
つまり、横幅は自身のコンテンツに依存する要素です。

<a> , <img> など

一般的なブラウザでは前後に改行が入るとか入らないとか。
正直良くわからないと言う人の為に！
実際のブラウザでの表示を見てみましょう！
※わかりやすいように背景に色を入れています

ブロックレベル要素

インライン要素インライン要素インライン要素

ブロックレベル要素はテキストの長さ(コンテンツ量)に依存せず、表示領域の端から端まで広がっています。
インライン要素はテキストの長さ(コンテンツ量)に依存し、そこで自身の領域も止まります。

また
ブロックレベル要素の中にインライン要素入れることができますが
インライン要素の中にブロック要素は入れることができません。
(※かなり細かくルールがあり、例外などもあります！)
これは基本中の基本のルールなので覚えておきましょう。

本当に最低限のWEBサイトはこれだけで作れます！！
しかし、世にあるWEBサイトはもっと華やかにデザインされていたり、色々動いたりしてるしている！
それらを表現するには、CSSやJavascript / jQueryといったものが必要になってきます。
これらをザックリ説明すると

などと表現されたりします!
飛び出す絵本とまでは行かなくても、絵本くらいまではいきたいものですね╭( ˇωˇ)╯
ワクワククエストでも、さらにHTMLの深いところやCSSを解説していけたらいいなと思っています！
心が折れないように頑張ります。