見出しタグ h1からh6までの使い方

見出しタグ(Heading tags)は、
HTML文書の中でテキストの見出し(ヘッダー)を定義するために使用されます。
見出しタグには6つのレベルがあり、それぞれのレベルは異なる重要度や階層を表します。
<h1> は最も重要な見出しを表し、<h6> は最も低い階層の見出しを表します。

見出しタグの使用方法

h1タグ

定義

文書全体の最も重要な見出し。

役割

通常、ページのタイトルや主要なトピックを示します。
一つの文書に通常は一つだけ使用します。

例)

<h1>Welcome to My Website</h1>

h2タグ

定義

第2レベルの見出し。

役割

主要なセクションやサブトピックの見出しに使用されます。
<h1> よりも重要度が低いが、依然として重要な見出しです。

例)

<h2>About Us</h2>

h3タグ

定義

第3レベルの見出し。

役割

<h2> のサブセクションや詳細なトピックの見出しに使用されます。

例)

<h3>Our History</h3>

h4タグ

定義

第4レベルの見出し。

役割

<h3> のさらに細分化されたサブセクションの見出しに使用されます。

例)

<h4>Founding Years</h4>

h5タグ

定義

第5レベルの見出し。

役割

<h4> のサブセクションや細かいトピックの見出しに使用されます。

例)

<h5>Initial Challenges</h5>

h6タグ

定義

第6レベルの見出し。

役割

最も低い階層の見出しで、細かい詳細や注釈的なトピックに使用されます。

例)

<h6>Minor Milestones</h6>

見出しタグの使用例

以下は、基本的な見出しタグの使用例です。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Headings</title>
  </head>
  <body>
    <h1>Main Title of the Page</h1>
    <h2>Section Title</h2>
    <h3>Subsection Title</h3>
    <h4>Detail Title</h4>
    <h5>Further Detail Title</h5>
    <h6>Minor Detail Title</h6>
  </body>
</html>

実践的な例

以下は、より実践的な見出しタグの使用例です。
ウェブサイトのホームページを想定しています。

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <h2>About Us</h2>
    <p>We are a company dedicated to...</p>
    <h3>Our History</h3>
    <p>Our company was founded in...</p>
    <h4>Founding Years</h4>
    <p>In the early years, we faced...</p>
    <h5>Initial Challenges</h5>
    <p>One of the first challenges we...</p>
    <h6>Minor Milestones</h6>
    <p>Even in the beginning, we had some minor milestones...</p>
    <h2>Services</h2>
    <p>We offer a wide range of services including...</p>
    <h3>Consulting</h3>
    <p>Our consulting services include...</p>
  </body>
</html>

見出しタグのベストプラクティス

階層的な使用

見出しタグは階層的に使用し、文書の構造を明確にします。
適切な見出しレベルを使用することで、内容の重要度と階層関係を示します。

一貫性

ページ全体で一貫して見出しタグを使用し、
ユーザーにとって読みやすくナビゲートしやすい構造を提供します。

キーワードの使用

SEOを考慮し、見出しタグには関連するキーワードを含めると、
検索エンジンのランキング向上に寄与します。

まとめ

見出しタグ(<h1> から <h6>)は、HTML文書において内容を構造化し、
階層的に整理するために重要な役割を果たします。
適切に使用することで、ユーザーエクスペリエンスを向上させ、
検索エンジン最適化(SEO)にも貢献します。
見出しタグの理解と正しい使用は、効果的なウェブデザインの基本となります。