「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

2018-04-11

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

どうも。

サウンドオルビス( @soundorbis )です。

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

img タグは p タグで囲むのが基本です。

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

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

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

 

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

↓10万回再生されたフリーBGM公開中↓

↓ おなじ話題をもっと読む ↓

↓ シェアして話題を共有しよう ↓

関連する記事

このブログを書いてる人
soundorbis
サウンドオルビス -フリーBGMアーティスト-

ブログ・音楽・VTuberなど好きなコトで生きていく情報を毎日、発信しています。あなたのクリエイティブを応援するぞ!詳しいプロフィールは ⇨ こちら

soundorbis 公式アカウント

パワープッシュリンク