LabEx
ログイン登録

ウェブ開発におけるセマンティック HTML タグ

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、参加者はセマンティック HTML タグの基本概念と、現代のウェブ開発におけるその重要な役割を探求します。実践的なアプローチを通じて、学習者は<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>などのセマンティック要素を使って、伝統的な HTML 構造を意味のある、アクセシブルで SEO にやさしいウェブページレイアウトに変換します。

この実験は、セマンティック HTML がコードの読みやすさをどのように向上させ、スクリーンリーダーに対するウェブサイトのアクセシビリティを強化し、より構造化された意味のあるウェブコンテンツを作成するかを理解するための段階的なガイドを提供します。完全なセマンティック HTML ページレイアウトを段階的に構築することで、参加者はウェブページ要素の目的と構造を明確に記述するセマンティックタグを実装する実践的なスキルを身につけます。

セマンティック HTML の概念を探求する

このステップでは、セマンティック HTML について学び、なぜウェブ開発において重要かを理解します。セマンティック HTML は、コンテンツの意味を明確に表すタグを使用し、ウェブページをよりアクセシブルで、読みやすく、SEO にやさしくします。

<div>や<span>のような伝統的な HTML タグは、それが含むコンテンツに関する情報を一切提供しません。対照的に、セマンティック HTML タグはコンテンツの目的と構造を表します。

セマンティック HTML の概念を示すために、簡単な HTML ファイルを作成しましょう。WebIDE を開き、~/projectディレクトリにsemantic-example.htmlという新しいファイルを作成します。

touch ~/project/semantic-example.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <div>Website Header</div>
    <div>Navigation Menu</div>
    <div>Main Content</div>
    <div>Sidebar</div>
    <div>Footer</div>
  </body>
</html>

次に、この例をセマンティック HTML タグを使って変換しましょう：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <header>Website Header</header>
    <nav>Navigation Menu</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </body>
</html>

主要なセマンティック HTML タグには以下があります：

  • <header>：序文コンテンツを表す
  • <nav>：ナビゲーションリンクを定義する
  • <main>：文書の主要コンテンツを指定する
  • <article>：独立した、完全なコンテンツの 1 つを表す
  • <section>：文書内のセクションを定義する
  • <aside>：主要コンテンツとは間接的に関連するコンテンツを含む
  • <footer>：文書のフッターを表す

セマンティック HTML の利点：

  1. スクリーンリーダーに対するアクセシビリティの向上
  2. より良い SEO 最適化
  3. より意味のある読みやすいコード
  4. スタイリングと保守が容易

HTML ファイルをブラウザでプレビューすると、視覚的な変更はありませんが、根底にある構造はより記述的で意味のあるものになります。

注：WebIDE で HTML ファイルをプレビューする方法に関する詳細はこちらをご覧ください。

ヘッダーとナビゲーションのセマンティックタグを実装する

このステップでは、意味のある構造化されたウェブサイトのヘッダーとナビゲーションメニューを作成するために、セマンティックな<header>と<nav>タグをどのように使用するかを学びます。これらのタグは、HTML 文書のセマンティック構造を改善するのに役立ちます。

WebIDE を開き、~/projectディレクトリ内のsemantic-example.htmlファイルを編集して、ヘッダーとナビゲーションタグを実装します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Semantic Website</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

使用されているセマンティックタグを解説しましょう：

  1. <header>タグ：
    • ページの序文コンテンツを表す
    • 見出し、ロゴ、ナビゲーションを含めることができる
    • ページまたはセクションの上位レベルのコンテンツをグループ化するために使用される
  2. <nav>タグ：
    • ナビゲーションリンクのセクションを定義する
    • 通常、メニュー、目次を含む
    • アクセシビリティと SEO を向上させる
  3. <ul>と<li>タグ：
    • ナビゲーション項目の順序なしリストを作成する
    • 内部の<a>タグでクリック可能なリンクを作成する 忘れてはいけないポイント：
  • <header>は複数の要素を含めることができる
  • <nav>は主なナビゲーションブロックに特化している
  • より良いアクセシビリティのために、意味のあるリンクテキストを使用する

ブラウザで表示したときの例の出力：

Semantic header and navigation example

記事とセクションのセマンティック構造を作成する

このステップでは、HTML 文書においてより意味のある構造化されたコンテンツを作成するために、<article>と<section>のセマンティックタグをどのように使用するかを学びます。これらのタグは、ウェブページの異なる部分の目的を整理して説明するのに役立ちます。

~/projectディレクトリ内のsemantic-example.htmlファイルを開き、以下のコードで更新します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Article and Section Example</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#blog">Blog</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Learning Web Development</h2>
        <section>
          <h3>HTML Basics</h3>
          <p>
            HTML is the foundation of web development. It provides structure to
            web content.
          </p>
        </section>

        <section>
          <h3>Semantic HTML</h3>
          <p>
            Semantic HTML uses tags that describe the meaning of the content,
            making web pages more accessible and meaningful.
          </p>
        </section>
      </article>
    </main>
  </body>
</html>

セマンティックタグを解説しましょう：

  1. <article>タグ：
    • 独立した構成を表す
    • 独立して配布または再利用可能
    • 通常、ブログ記事、ニュース記事、フォーラム投稿に使用される
  2. <section>タグ：
    • コンテンツのテーマ別のグループ化を定義する
    • 通常、見出しを含む
    • コンテンツを論理的な部分に分割するのに役立つ
  3. <main>タグ：
    • 文書の主要コンテンツを指定する
    • 文書に固有でなければならない
    • 中心トピックまたは主要な機能を含む

ブラウザで表示したときの例の出力：

Browser view of semantic HTML example

忘れてはいけないポイント：

  • <article>は独立したコンテンツ用
  • <section>は関連するコンテンツをグループ化する
  • 各セクションは通常、見出しを持つ
  • これらのタグを使用して、文書の構造と読みやすさを向上させる

アサイドとフッターのセマンティック要素を追加する

このステップでは、<aside>と<footer>のセマンティックタグを使ってウェブページの構造と意味を強化する方法を学びます。これらのタグは、補足的なコンテンツを整理し、ページに関する追加情報を提供します。

~/projectディレクトリ内のsemantic-example.htmlファイルを開き、以下のコードで更新します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Aside and Footer Example</title>
  </head>
  <body>
    <header>
      <h1>My Web Development Blog</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#blog">Blog</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Learning Web Development</h2>
        <section>
          <h3>HTML Basics</h3>
          <p>
            HTML is the foundation of web development. It provides structure to
            web content.
          </p>
        </section>

        <aside>
          <h3>Related Resources</h3>
          <ul>
            <li><a href="#">HTML Tutorial</a></li>
            <li><a href="#">CSS Guide</a></li>
            <li><a href="#">JavaScript Basics</a></li>
          </ul>
        </aside>
      </article>
    </main>

    <footer>
      <p>&copy; 2023 Web Development Blog</p>
      <p>Contact: info@webdevblog.com</p>
    </footer>
  </body>
</html>

新しいセマンティックタグを見てみましょう：

  1. <aside>タグ：
    • 主要コンテンツとは間接的に関連するコンテンツを表す
    • サイドバー、引用文、または追加情報によく使用される
    • 補足的なコンテンツを主要な記事から分離するのに役立つ
  2. <footer>タグ：
    • 文書またはセクションのフッターを表す
    • 通常、著作権情報、連絡先、または関連リンクを含む
    • 文書内に複数回出現することができる

ブラウザで表示したときの例の出力：

Browser view of semantic HTML example

忘れてはいけないポイント：

  • <aside>は主要コンテンツに関連するが中心的ではないコンテンツを含む
  • <footer>は文書またはセクションに関する追加情報を提供する
  • これらのタグは HTML のセマンティック構造を改善する

完全なセマンティック HTML ページレイアウトを構築する

このステップでは、学んだすべてのセマンティック HTML タグを組み合わせて、完全で構造的なウェブページを作成します。セマンティック HTML の力を示す包括的なレイアウトを作成します。

~/projectディレクトリに以下のコードで新しいファイルsemantic-website.htmlを作成します：

touch ~/project/semantic-website.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web Development Learning Hub</title>
  </head>
  <body>
    <header>
      <h1>Web Development Learning Hub</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#tutorials">Tutorials</a></li>
          <li><a href="#resources">Resources</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Getting Started with Web Development</h2>

        <section>
          <h3>HTML Fundamentals</h3>
          <p>
            Learn the basics of HTML and how to create structured web pages
            using semantic tags.
          </p>
        </section>

        <section>
          <h3>CSS Styling</h3>
          <p>
            Explore how to style your HTML documents and create visually
            appealing websites.
          </p>
        </section>

        <aside>
          <h3>Recommended Learning Path</h3>
          <ul>
            <li>HTML Basics</li>
            <li>CSS Styling</li>
            <li>JavaScript Fundamentals</li>
            <li>Responsive Web Design</li>
          </ul>
        </aside>
      </article>

      <article>
        <h2>Latest Tutorials</h2>
        <section>
          <h3>Semantic HTML Deep Dive</h3>
          <p>
            Understand the importance of semantic tags in modern web
            development.
          </p>
        </section>
      </article>
    </main>

    <footer>
      <p>&copy; 2023 Web Development Learning Hub</p>
      <nav>
        <ul>
          <li><a href="#privacy">Privacy Policy</a></li>
          <li><a href="#terms">Terms of Service</a></li>
        </ul>
      </nav>
      <p>Contact: support@webdevhub.com</p>
    </footer>
  </body>
</html>

セマンティック構造を見直しましょう：

  1. <header>：サイトタイトルと主要ナビゲーションを含む
  2. <nav>：2 つの場所でナビゲーションリンクを提供する
  3. <main>：ページの主要コンテンツを囲む
  4. <article>：独立した、完全なコンテンツを表す
  5. <section>：コンテンツをテーマ別のグループに分割する
  6. <aside>：補足情報を表示する
  7. <footer>：追加のサイト情報とリンクを提供する

ブラウザで表示したときの例の出力：

Semantic HTML page layout example

重要なポイント：

  • セマンティック HTML は文書構造を改善する
  • 各タグには特定の意味と目的がある
  • セマンティックタグはコードをより読みやすくアクセシブルにする

まとめ

この実験では、参加者はセマンティック HTML の基本概念とそのウェブ開発における重要性を探求します。従来の非記述的な<div>タグから、<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>のような意味のあるセマンティック要素に移行することで、学習者はよりアクセシブルで読みやすく、SEO にやさしいウェブページを作成する方法を理解します。

この実験では、参加者にセマンティック HTML の実際の実装方法を案内し、これらの特殊なタグがウェブコンテンツに明確な構造的文脈を提供する方法を示します。セマンティック HTML の原則を理解して適用することで、開発者は画面リーダーに対するウェブサイトのアクセシビリティを向上させ、サーチエンジン最適化を改善し、より保守しやすく意味のあるコード構造を作成することができます。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development