ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Web開発 - HTML：セクショニング

Web開発

初めに

　HTML5では、ページの構造をより意味のある区分に分割するためのセクショニング要素が導入されました。本記事では、セクショニングとはどのようなものか説明し、具体例を用いてセクショニングに使うタグの使い方をまとめます。

Index

セクショニングとは

　セクショニングは、ウェブページ内でコンテンツを論理的に分割し、意味のあるセクションに整理することです。

　例えば、ヘッダー、メイン、フッターにセクションを分けることが考えられます。

　セクショニングをすることで、ウェブページを構造化し、そのコンテンツを意味のあるグループに整理することで、理解しやすく、適切に表示されるようにすることができます。

タグ

　HTML5では、ページの構造をより意味のある区分に分割するためのセクショニング要素が導入されました。

タグ 説明
<header> ページやセクションの先頭に配置されるコンテンツを表す
<footer> ページやセクションの末尾に配置されるコンテンツを表す
<nav> ナビゲーションリンクのセクションを表す
<main> ページの主要なコンテンツを表す
<article> 独立したコンテンツのセクションを表す
<section> ページ内の論理的なセクションを表す

　header タグ、footer タグ、main タグは直感的に分かりやすいので、説明を省略します。

　<nav>タグは、主要なナビゲーションを表す要素です。 具体的にはサイトの全ページに一貫して表示されるグローバルナビゲーションなどに利用します。


  <header>
    <h1>(header) メインタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
article タグ・section タグ

　article タグと section タグは似ていますが、役割が異なります。

<article> 独立したコンテンツのセクションを表す
<section> ページ内の論理的なセクションを表す

　article タグは独立したコンテンツのセクションを表します。具体例としては、ブログ記事のリストなどがこれに当たります。
　section タグのほうは、章、節などの区切りと考えた方が分かりやすいかもしれません。

　使い分けとしては、独立しているコンテンツは article で、それ以外はセクションで区切るという認識でよいでしょう。

（例）

  <main>
    <h2>(main)</h2>
    <section>
      <h3>セクション1</h3>
      <p>ここにセクション1のコンテンツが入ります。</p>
    </section>

    <section>
      <h2>セクション2</h2>
      <article>
        <h3>記事タイトル</h3>
        <p>ここに記事の本文が入ります。</p>
      </article>
      <article>
        <h3>別の記事タイトル</h3>
        <p>ここに別の記事の本文が入ります。</p>
      </article>
    </section>
  </main>

補足

セクショニングの説明で使用したページのコード

　下の画像のページを表示するコード全文を載せておきます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>セクショニングの例</title>
  <style>
    header {
      background-color: #ffcccc; /* 薄い赤 */
      padding: 20px;
    }
    main {
      background-color: #cce6ff; /* 薄い青 */
      padding: 20px;
    }
    footer {
      background-color: #ffffcc; /* 薄い黄色 */
      padding: 20px;
    }
    section {
      background-color: #ccffcc; /* 薄い緑 */
      margin-bottom: 20px;
      padding: 10px;
    }
    article {
      background-color: #fff5ed; /* 白に近いオレンジ */
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <header>
    <h1>(header) メインタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>(main)</h2>
    <section>
      <h3>セクション1</h3>
      <p>ここにセクション1のコンテンツが入ります。</p>
    </section>

    <section>
      <h2>セクション2</h2>
      <article>
        <h3>記事タイトル</h3>
        <p>ここに記事の本文が入ります。</p>
      </article>
      <article>
        <h3>別の記事タイトル</h3>
        <p>ここに別の記事の本文が入ります。</p>
      </article>
    </section>
  </main>

  <footer>
    <h2>(hooter)</h2>
    <p>&copy; 2023 サンプルウェブサイト</p>
    <p>連絡先: example@example.com</p>
  </footer>

</body>
</html>

参照

akros-ac.jp
www.tagindex.com
zero-plus.io