◀ 2.

HTML5 セクショニング要素完全ガイド（header / nav / main / article / section / aside / footer）

▶
編集
この記事の要点
  • セクショニング要素:
    /
  • の代わりに使うことで SEO / アクセシビリティ / 読みやすさが向上
  • は独立して成立する単位（記事 / コメント / カード）
  • はテーマでまとまった範囲。直下に

    ～
    を置く

  • はページに 1 つだけ、ページ固有メインコンテンツ
  • 補足:
    /
    /
    、ARIA: role="banner" / "navigation"

HTML5 セクショニング要素一覧

要素用途使う場所
導入部・見出し群ページ冒頭、article/section の冒頭
主要ナビゲーショングローバルナビ / サイドメニュー
ページのメインコンテンツページに 1 つだけ
独立した記事ブログ記事 / 商品カード / コメント
テーマでまとまった範囲章 / セクション
補足・サイドバー関連リンク / 広告 / 注釈
末尾情報ページ末尾、article/section の末尾
/
図版とキャプション画像 + 説明、コードブロック
連絡先情報記事の著者連絡先、会社情報

モダンな HTML 構造例




    
    HTML5 セクショニング完全ガイド | CWiki





    
CWiki

    





    

        

            
HTML5 セクショニング要素完全ガイド

            
投稿日: 

        


        

            
セクショニング要素とは

            
...

        


        

            
用途別の使い分け

            
...

        


        
    


    





    © 2026 CWiki

article vs section の使い分け

「どちらを使うべきか」が一番悩むポイント:

  • : 独立して RSS / 別ページにそのまま転載できるもの → ブログ記事、ニュース記事、コメント 1 つ、商品カード
  • : 本文の章立てのように、ページの一部としてのみ意味を持つもの → 「概要」「使い方」「FAQ」 等の章



    

        
記事タイトル


        

            
概要

            
...

        


        

            
使い方

            
...

        

    







    
記事一覧

main は 1 ページに 1 つだけ

はページの固有メインコンテンツを示します。サイト全体で繰り返される header / nav / footer は含めない。

HTML 仕様では「visible（隠れていない）

は 1 つだけ」と定義されています。タブ UI など複数の main は hidden 属性で非表示にしてあるものなら許容。

nav はナビゲーションだけ

パンくず・ページネーション・グローバルナビ・サイト内検索のリンク群など、主要なナビに使います。footer 内の細々したリンクや「関連記事」は

2026-06-10 16:39:53 atom 248

人気ページ

最近更新/作成されたページ