セマンティックな<br>の使い方について。

Question

brタグのセマンティックな使い方についてお聞きします。

閲覧ありがとうございます。
文章と文章の間を一行空けたいときに<br>を利用するというのは、セマンティックな考えでは良い使い方ではないと書いているサイトを多く見かけました。
では、<br>を使わずに一行空けるときはmarginを使うことになるのでしょうか？

例えば下記のような文章をWebサイトに書くとして（Webサイトに書くような内容でなくて恐縮です汗）

面識もございませんのに突然のお手紙をお許しください。（改行）
（一行空ける）
　私は、〇〇株式会社のテラ太郎と申します。（改行）
弊社の技術を必要とする企業様により一層貢献したいという想いで、ご連絡を差し上げております。（改行）
（一行空ける）
　つきましては、この機会に是非お話をお聞かせいただき、ご提案の機会を賜ることができましたら幸甚です。

この場合は下記のようなhtml, cssの書き方になるのでしょうか。

<p class="br">面識もございませんのに突然のお手紙をお許しください。</p>

<p>　私は、〇〇株式会社のテラ太郎と申します。</p>
<p class="br">弊社の技術を必要とする企業様により一層貢献したいという想いで、ご連絡を差し上げております。</p>

<p>　つきましては、この機会に是非お話をお聞かせいただき、ご提案の機会を賜ることができましたら幸甚です。</p>

p.br {
  /* line-heightが1.6の場合 */
  margin-bottom: calc(1em * 1.6);

HTMLを勉強中なのですが、せっかく勉強するならセマンティックを意識して勉強していきたいと考えています。
なんだか面倒で分かりにくい書き方な気がするので本当に合っているのか不安に思ってしまいました。
気にしなくていいと思う方もいるかもしれませんが、ご存じの方いたらぜひご回答よろしくお願いいたしますm(_ _)m

Answer 1

こういうときは本家のサイトにどう書かれているかをチェックすべきでしょう。HTMLの標準はWHATWGが公開しているHTML Living Standardということになっており、ありがたいことに日本語訳も公開されています。

HTML Standard 日本語訳 4.5.27 br要素

br要素は、詩やアドレスのように、実際にコンテンツの一部である改行のためにのみに使用されなければならない。

Comments

[kamo9420]

ご回答ありがとうございます！
そちらのサイトは既に拝見済みでした。
段落内での改行については言及されていたのですが段落と段落の間に1行分余白を空けたいときは<br>, <p>, marginプロパティなどなど、どれを使うべきなのか悩んでいます。

[KojiDoi]

その後の実例を見ると、CSSでどうにかする以外の選択肢は否定されているようにしか私には見えませんが。

[kamo9420]

ご回答ありがとうございます！
初心者すぎてまだ知らないプロパティが多いのですが、
質問文に書いたようなmarginで1em×line-heightの値で調整するのが一般的ということで間違いなかったでしょうか????

[退会済みユーザー]

セマンティックな <br> なんてないと思ってた^^;

Answer 2

セマンティックとは「意味のある」という意味です。
まず、デザインの話を抜きにして、文章構造に注目して記載しましょう。

<header>
  <p>挨拶</p>
</header>

<main>
  <p>質問</p>
  <p>内容</p>
</main>

<footer>
  <p>締めの言葉</p>
</footer>

その他にもいろいろな目的に応じたタグがあります。調べてみてください。