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

HTMLの見出し要素<h1>~<h6>をハッシュ文字を使用したMarkdown ATXスタイル見出しに変換する方法を解説。見出し階層、属性の処理、ベストプラクティスを含みます。

Basic Conversion

詳細な説明

HTML見出しからMarkdownへの変換

HTMLは <h1> から <h6> タグで6レベルの見出しを定義します。Markdownではハッシュ文字(#)を使用して表現します — 見出しレベルごとに1つのハッシュです。

変換ルール

<h1>メインタイトル</h1>
<h2>セクションタイトル</h2>
<h3>サブセクション</h3>

変換結果:

# メインタイトル

## セクションタイトル

### サブセクション

各見出しレベルが直接マッピングされます:<h1>#<h2>##、以下同様です。

属性の処理

HTML見出しにはしばしば idclassstyle などの属性が付いています。標準Markdownは属性をサポートしないため、変換時に破棄されます。

インラインコンテンツを含む見出し

見出しにはリンク、コード、強調などのインライン要素を含めることができ、それらは再帰的にMarkdownの同等表現に変換されます。

ベストプラクティス

  • Markdown出力の各見出しの前後に空行を入れること。
  • 元のHTMLの見出し階層を保持し、レベルを飛ばさないこと。
  • 適切なセマンティック構造のために、ドキュメントごとに #(h1)は1つだけにすること。

ユースケース

見出し変換は、Jekyll、Hugo、DocusaurusなどのMarkdownベースのプラットフォームにWebコンテンツを移行する際に重要です。正しい見出しレベルにより、適切なドキュメント構造、スクリーンリーダーのアクセシビリティ、SEO見出し階層が保証されます。

試してみる — HTML to Markdown

フルツールを開く