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見出しにはしばしば id、class、style などの属性が付いています。標準Markdownは属性をサポートしないため、変換時に破棄されます。
インラインコンテンツを含む見出し
見出しにはリンク、コード、強調などのインライン要素を含めることができ、それらは再帰的にMarkdownの同等表現に変換されます。
ベストプラクティス
- Markdown出力の各見出しの前後に空行を入れること。
- 元のHTMLの見出し階層を保持し、レベルを飛ばさないこと。
- 適切なセマンティック構造のために、ドキュメントごとに
#(h1)は1つだけにすること。
ユースケース
見出し変換は、Jekyll、Hugo、DocusaurusなどのMarkdownベースのプラットフォームにWebコンテンツを移行する際に重要です。正しい見出しレベルにより、適切なドキュメント構造、スクリーンリーダーのアクセシビリティ、SEO見出し階層が保証されます。