HTML要素　-よく使うタグ名と使う場所とコード確認-

header要素

ページやセクションのヘッダーを定義します。通常、ページの冒頭で、ロゴやサイトのタイトル、ナビゲーションなどが含まれます。

<header>
    <h1>サイトのタイトル</h1>
    <nav>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <!-- 他のナビゲーションリンクも追加 -->
        </ul>
    </nav>
</header>

main要素

ドキュメントのメインコンテンツを定義します。通常、ページ内で一度だけの使用となります。

<main>
    <article>
        <h2>記事のタイトル</h2>
        <p>記事の内容</p>
    </article>
    <!-- 他の記事やコンテンツもここに追加 -->
</main>

footer要素

ページやセクションのフッターを定義します。通常、著作権情報、連絡先情報、サイトのクレジットなどが含まれます。

<footer>
    <p>&copy; 2024 サイトの名前</p>
</footer>

nav要素

<nav>要素は、ナビゲーションリンクのグループを定義するためのHTML要素です。サイトでのページ間のリンクやナビゲーションメニューに使用されます。

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">製品</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

aside要素

<aside>要素は、主なコンテンツから独立した補足情報を表現するためのHTML要素です。通常はサイドバーや広告、関連記事など、主要なコンテンツから切り離された情報を含むために使用され、その目的に応じてさまざまな形で活用できます。

<article>
    <h2>記事のタイトル</h2>
    <p>記事の本文</p>
    <aside>
        <h3>関連記事</h3>
        <ul>
            <li><a href="#">関連記事1</a></li>
            <li><a href="#">関連記事2</a></li>
            <!-- 他の関連記事も追加 -->
        </ul>
    </aside>
</article>

<!-- または -->
<article>
    <h2>最新の製品</h2>
    <p>新製品の説明</p>
</article>

<aside>
    <h3>特別オファー</h3>
    <p>今だけ特別価格でご提供中！</p>
    <img src="ad-image.jpg" alt="特別オファー">
</aside>

figure要素

<figure>要素は、HTML内で画像、図表、動画などの独立したコンテンツをグループ化するための要素です。<figure>要素内には通常、対応する説明やキャプションを提供するための <figcaption> 要素も含まれることがあります。この組み合わせにより、コンテンツとその説明を関連付け、アクセシビリティを向上させることができます。

<figure>
    <img src="image.jpg" alt="説明文">
    <figcaption>画像の説明やキャプション</figcaption>
</figure>

section要素

<section>要素は、HTML文書内のセクションを定義するための要素です。セクションは関連するコンテンツのグループを示し、通常はセクション全体にタイトルが与えられます。ページ内には複数の<section>要素が存在することができ、セクションは独自のタイトルと内容（文章や箇条書き・写真）を持っています。

また<section>要素はネストできます。

<section>
    <h2>第1セクション</h2>
    <p>第1セクションの内容</p>
</section>

<section>
    <h2>第2セクション</h2>
    <p>第2セクションの内容</p>
</section>


<!--またはsectionの中にsection-->
<section>
    <h2>親セクション</h2>
    <p>親セクションの内容</p>
    <section>
        <h3>子セクション</h3>
        <p>子セクションの内容</p>
    </section>
</section>

section要素内がh2からの理由は？

<section>内で一般的に<h2>から始めるのは理由があります。HTMLの文書の構造を整理するためです。例えば、ページ全体のタイトルが<h1>であれば、その下にくるセクションの見出しは<h2>から始めます。さらに、<h2>内に更に具体的なサブセクションがあれば、その見出しは<h3>から始めます。このような構造は、文書の階層性を強調し、検索エンジンやアクセシビリティツールが文書の構造のためでもあります。

<h1>ページのタイトル</h1>

<section>
    <h2>セクション1</h2>
    <p>セクション1の内容</p>
</section>

<section>
    <h2>セクション2</h2>
    <p>セクション2の内容</p>
    <section>
        <h3>サブセクション</h3>
        <p>サブセクションの内容</p>
    </section>
</section>

article要素

<article>要素は、HTML文書内で独立したコンテンツや記事を表現するための要素です。<article>内には、通常、記事全体や個々のコンテンツが独立して存在し、他のコンテンツとは関連性があります。<article>は、単体で分離しても意味を持つコンテンツをグループ化するために使用されます。

<article>
    <h2>ブログ記事のタイトル</h2>
    <p>ブログ記事の本文</p>
    <!-- 他のコンテンツ要素もここに追加 -->
</article>

<article>
    <h2>ニュース記事1</h2>
    <p>記事1の本文</p>
</article>

<article>
    <h2>ニュース記事2</h2>
    <p>記事2の本文</p>
</article>

<article>
    <h1>主要なニュース記事</h1>
    <p>記事の本文</p>
</article>

あわせて読みたい

ホームページ基礎講座　誰もが迷うarticle要素の使いどころ Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, secti...