改行タグ(br要素)ではなく、”段落タグ”(p要素)を使おう!

ブログを始めてから、1年以上、”段落タグ”<p></p>の存在を存じませんでした。

改行は主に<br>で行っていました。

段落タグは、FC2やBloggerで記事を書く際に顔を出さないコードです。カスタマイズをするようになってから初めて知ったのですが、<br>の空白行づくりの目的で使用することは推奨されていないようです。

改行タグ、br要素の使い方

W3C、「4.5.29. The br element」より引用

The br element represents a line break.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

br elements must not be used for separating thematic groups in a paragraph.

br 要素は改行を表します。
br 要素は、詩やアドレスのように、改行が実際にコンテンツの一部である場合にのみ使用する必要があります。
br 要素は、1つの段落内のテーマの塊を分離するために使用してはなりません。

ん?

例を見てみました。

brタグの使い方の例
brタグの使い方の例

「コメントの数」と「コメントを書く」は、別の内容だから、brタグの改行ではなく、pタグで段落分け。

「住所」と「名前」は、別の内容だから、brタグの改行ではなく、pタグで段落分け。

ふむふむ。
で、pタグって、何??
と、なったわけです。

段落タグ、p要素の使い方

W3C、「4.4.1. The p element」より引用

The p element represents a paragraph.

The p should not be used when a more specific element is more appropriate.

p要素は、段落を示します。
p要素は、他のより具体的な要素の方が適切である場合は、使用すべきではありません。

え、それだけ??

例を見てみたところ、brと同様の使い方に加え、リスト要素(例えばolul)は、段落タグの子要素にはなれないので、リスト要素を挟んだ1段落の場合には代わりにdivタグを使用することなどが提案されていました。

"段落タグ"の使い方
“段落タグ”の使い方

ずっと、pタグなんて使ったことがなかったので衝撃でした。

Bloggerなんて、pタグで書いてもbrタグに変換されてしまいます。ワードやエクセルで書いたものをHTMLにて同じ見た目にスタイリングしてくれるから凄く重宝していたのですが、理想的ではないとされるHTMLでのスタイリング満載で、全然ダメなんじゃないの??っと思い、最終的にワードプレスの使用へ向けて大きく背中を押されました。

“段落タグ”(p要素)を使おう!

と、いうわけで、最近は、文の意味の塊ごとに、段落pタグを使うように心がけています。

ちなみにbrタグは、HTML4では<br />、HTML5では<br>、人によっては<br/>の様に、スペースを空けないでスラッシュは入れる、などなどいろいろみたいですよね。どれでもブラウザーが柔軟に読んでくれるみたいですけれどもね。

ちゃんとW3Cおススメの方法で書いてみたいじゃないですか…
なんとなく。

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。