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

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

ブログ

どうも。ブロガーのサウンドオルビス( @soundorbis )です。

冷や汗が出た。実は今まで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 タグはきちんと囲みましょう。

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

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

 

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

記事へのお問い合わせ

soundorbis

238,852 views

聴く、奏でる、つくる人のための音楽メディア「soundorbis」の運営者、サウンドオルビスです。音楽・映像・文章コンテンツで、あなたがワクワクする情報を、...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

ABOUT

聴く、奏でる、つくる人のための音楽メディア「soundorbis」。「サウンド」をキーワードに、イベント紹介や最新情報、商品レビュー、DTM講座、ハイテク家電の噂や小技など、サウンドが彩る刺激的な情報を発信しています。
soundorbis.com とは?

NEW POSTS