Markdown水平線からHTML hrタグへの変換

Markdownの水平線(---, ***, ___)をHTML <hr>タグに変換する方法を解説。3種類の構文、スペース要件、テーマティックブレークの使いどころを学びます。

Block Elements

詳細な説明

Markdownの水平線

水平線(テーマティックブレーク)は、コンテンツのセクション間に視覚的な区切りを作成します。HTMLの <hr>(水平線)要素に変換されます。

3種類の構文

Markdownでは水平線に3種類の文字を受け付けます。それぞれ行単独で3回以上繰り返します:

---

***

___

すべて同じHTMLを生成します:

<hr>

スペース要件

水平線がSetextスタイルの見出し下線として解釈されないように、前後に空行が必要です。

セマンティックな意味

<hr> 要素は テーマティックブレーク(トピックの変更)を表します。スクリーンリーダーはこれをセパレータとして読み上げるため、セマンティックな意味を持ちます。純粋に装飾目的の場合は、CSSのボーダーを使用してください。

ユースケース

水平線は、ブログ記事、ドキュメントの章、READMEファイルなどの長文コンテンツで主要なセクションを分離するために使用されます。新しい見出しを必要とせずにトピックの変更を示し、スキャンのしやすさを向上させます。

試してみる — Markdown to HTML Converter

フルツールを開く