HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのmain要素の使い方！基本構文とheader・footerとの違いを解説

この記事では、HTMLの<main>要素の役割と正しい使い方について、コード例を交えながらわかりやすく解説します。

<main>要素とは？

HTMLの<main>要素は、<body>要素の中で、そのページの中心的な内容（メインコンテンツ）を表すためのコンテナとして使用されます。ドキュメントの主題となる最重要部分を明示することで、検索エンジンやスクリーンリーダーといった支援技術がページ構造を正しく理解できるようになる点も大きなメリットです。

基本構文の例

<body>
  <header><!-- ヘッダーの内容 --></header>
  <main>
    <article>
      <h3>Google Chrome</h3>
      <p>段落テキスト</p>
    </article>

    <article>
      <h3>見出し</h3>
      <p>段落テキスト</p>
    </article>

    <article>
      <h3>見出し</h3>
      <p>段落テキスト</p>
    </article>
  </main>
  <footer><!-- フッターの内容 --></footer>
</body>

<main>要素には、そのドキュメントの主題の中核となるコンテンツを含めます。

header・footerとの違い

<header>や<footer>要素にもコンテンツ（通常はロゴやナビゲーションリンクなど）が含まれますが、これらはサイトの「主要な部分」には該当しません。そのため、<main>要素の外側に配置するのが正しいマークアップです。

main要素は1ページに1つだけ

同じくコンテナとして機能する<article>要素との大きな違いとして、<main>要素は同一のHTMLドキュメント内で1回しか使用できません。これは仕様で定められたルールなので注意しましょう。

例えば、ブログ記事のマークアップは次のようになります。

<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>段落テキスト</p>
    <p>段落テキスト</p>
    <img src="your-image.jpg" alt="画像の説明">
    <p>段落テキスト</p>
    <p>段落テキスト</p>
  </article>
</main>

ちなみに、今あなたが閲覧しているこのサイトも、同様のHTMLマークアップ構造になっています。ページ上で右クリックして「検証」（Inspect）を選択すれば、実際のコードを自分の目で確認できます。

その他の主なコンテナ要素

<main>タグは、コンテナ要素を定義するために使われる数あるHTMLタグの一つです。よく使われる主なHTMLコンテナ要素は以下のとおりです。

  • <section> … ドキュメントの章や節といったセクションを表す
  • <article> … ブログ記事など独立したコンテンツを表す
  • <header> … ページやセクションの導入部分を表す
  • <footer> … ページやセクションのフッター部分を表す
  • <form> … ユーザー入力のためのフォームを表す
  • <div> … 他のどのタグも当てはまらない場合に使う汎用的なタグ
  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値