どうも。

サウンドオルビス（ @soundorbis ）です。

冷や汗が出た。実は今までIMGタグを囲んでいませんでした。それはもうみごとな裸ん坊でした。恥ずかしい思いをさせてごめんね img タグちゃん

画像 img インライン要素は p タグで囲むべき？

Webデザインには、ブロックレベル要素・インライン要素という考え方があります。p タグはブロックレベル要素。img タグはインライン。

画像のようにブロックレベル要素の中に、インライン要素を入れなければなりません。ちなみにどんなタグがあるのか？

ブロックレベル要素は、こちら↓

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

インライン要素は、こちら↓

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

赤文字をみてください。ご覧のとおり、img タグは p タグの中に HTML のルールでは入っていないとダメなんですよ。

HTML5 ではインライン要素などの考え方がなくなっているため、CSS で display:block を指定する必要がある。詳しくは、こちらのサイトに説明をお願いしたい↓

pタグとは？なんのために囲むの？

そもそも p タグってなんでしょう？ 見たままの文章レイアウトでブログ書く人、ホームページを作る人の方がおおいよね？　知らない人多そう。

p タグの定義はこちら↓

　「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。 <p>～</p>で囲まれたテキストは1つの段落であることを示します。 HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。

pタグとは｜コーディングのプロが作るHTMLタグ辞典 - クロノドライブ より引用

文章のかたまり。意味のまとまった段落ですよ、段落。

p タグで囲んだものが 1 つの意味のある段落（グループ）ってこと、ブラウザに教える役割ってことです。

いま読んでいる文章も、<br /> タグで改行しないで p タグで囲んでいます。段落を分けるのを改行で済ませる方もおりますが、それは間違いですよ!?

結論：画像imgはきちんと囲みましょう

と言うわけで ルールなので、画像 img タグはきちんと囲みましょう。

はてなブログがpタグだったから気づきませんでした…っ。
まさか基本だったとは…。

— HTmusicM@フリーBGMアーティスト (@harys14474464) 2018年4月10日

あらー。

いわゆる「調べれば分かったこと」も きっかけが無ければ
そもそもその段階に辿り着けない みたいな。

この機会が無ければボクは ずっと
「知らないまま」だったろうと思います。(>_<)

人との出会いが奇跡と言われるように
情報との出会いも奇跡なのかもしれませんね。
感謝でございます。

— HTmusicM@フリーBGMアーティスト (@harys14474464) 2018年4月10日

情報との出会いは奇跡。まさにその通り。この記事を読んでくださっている皆様との出会いにも感謝です。

感謝しながら今回のことを反省して、ちゃんとブログをルールに沿ってかけるようにがんばります！

　

それじゃあ、サウンドオルビス（@soundorbis）でした。