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

4.11.2018

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

どうも。

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

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

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

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

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

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

 

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

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

音楽×テクノロジーを中心に、ブログ書いています。詳しいプロフィールは ⇨ こちら

\ シェアしよう /

以前の記事  以前の記事
新しい記事  新しい記事