いまさら聞けないHTML「画像imgタグはpタグで囲むの?」って基本の話

WEBデザイン

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

p タグで画像を囲むべき?

Inlineyouso

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 タグはきちんと囲みましょう。

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

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

そのほか、ブログ運営に関する疑問は、こちらをどうぞ↓

サウンドオルビス

5,900,767 views

サウンドテック・ラボ編集長兼ライター。「音楽×テクノロジー」で、あなたの「やってみたい」をお手伝いします。人生にドラマを!!

プロフィール

ピックアップ記事

カテゴリ内の記事