オリジナルテーマ「Compages」使用中

その使い方は間違っている?<hr>の正しい使い方

その使い方は間違っている?<hr>の正しい使い方

皆さん<hr>タグは使っていますか?

私ほとんど使わないのですが、最近は<section>と<section>の間に使われることが増えているようです。

コーディングを始めたばかりの人だと、簡単に区切り線が引けるからという理由で使ってしまいそうな<hr>タグですが、下の例みたいな感じで区切り線として使ってはいけません。

<!-- 間違った例 -->
<h1>大見出し</h1>
<hr>
<p>これはダミーのテキストです</p>

正しい使い方は段落と段落の区切りに使うというもので、<hr>タグを挟んだ前後の内容が変わるときなどに使います。

<!-- 正しい例1 -->
<section>
<h1>大見出し</h1> <p>これはダミーのテキストです</p>
</section>
<hr>
<section>
<h1>大見出し</h1> <p>これはダミーのテキストです</p>
</section>

上の例では<section>で分けていますが、別に同じ<section>の中でも話の内容が変わる場所であれば使用しても問題ないので、このような記述の仕方でも間違っていません。

<!-- 正しい例2 -->
<section>
<h1>夏目漱石の小説</h1> <p>吾輩は猫である。名前はまだない。</p>
<p>どこで生まれたかとんと見当がつかぬ。</p>
<hr>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。<br>
小学校に居る時分学校の二階から飛び降りて一週間ほど腰をかした事がある。</p>
</section>

CSSでデザインを変更したり疑似要素をつけるなんてこともよくありますので、使う機会があるなら間違った使い方をしないように注意しましょう!