Markdown見出しからHTML h1-h6タグへの変換

Markdownの見出し(#, ##, ###)がHTML h1〜h6タグにどのように変換されるかを学びます。ATXスタイルとSetextスタイルの見出し構文を実例とともに解説します。

Block Elements

詳細な説明

Markdown見出しからHTMLへの変換

Markdownは6段階の見出しをサポートしており、HTMLの <h1> から <h6> タグに対応します。見出しの書き方には ATXスタイルSetextスタイル の2種類があります。

ATXスタイルの見出し

ATXスタイルでは、行頭にハッシュ文字(#)を使用します:

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

これは以下のHTMLに変換されます:

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

# の数が見出しレベルを決定します。正しくレンダリングするには、# の後にスペースが必要です。

Setextスタイルの見出し

Setextスタイルは2段階のみサポートします。= の下線で <h1>- の下線で <h2> を作成します:

見出し1
=========

見出し2
---------

ベストプラクティス

  • SEOのために、ページごとに <h1> は1つだけにしましょう。
  • 見出しレベルを飛ばさないでください(例:h2 から h4 へのジャンプ)。
  • 見出しは簡潔で説明的に保ちましょう。
  • 可読性のために、各見出しの前後に空行を入れましょう。

ユースケース

見出しはあらゆる文書の構造化に不可欠です。READMEファイル、ブログ記事、ドキュメント、技術記事をMarkdownで書く際、見出しは階層構造を定義し、読者と検索エンジンの両方にとってコンテンツをスキャンしやすくします。

試してみる — Markdown to HTML Converter

フルツールを開く