HTML でメインコンテンツコンテナを作成する

はじめに

HTML では、<main> タグはドキュメントの主要または支配的なコンテンツを表すために使用されます。これは HTML5 で新たに導入されたタグであり、通常は <body> タグの中に記述されます。<main> タグのコンテンツは一意であり、ドキュメントの中心トピックに直接関連している必要があります。これは、大きなドキュメントで迅速に識別してナビゲーションを容易にするランドマークと同じ概念です。

この実験では、HTML で <main> タグを使用して主要なコンテンツコンテナを作成する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして 8080 ポートでウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70792{{"HTML のメインコンテンツ"}} html/head_elems -.-> lab-70792{{"HTML のメインコンテンツ"}} html/text_head -.-> lab-70792{{"HTML のメインコンテンツ"}} html/lists_desc -.-> lab-70792{{"HTML のメインコンテンツ"}} html/layout -.-> lab-70792{{"HTML のメインコンテンツ"}} html/nav_links -.-> lab-70792{{"HTML のメインコンテンツ"}} html/doc_flow -.-> lab-70792{{"HTML のメインコンテンツ"}} end

HTML ファイルのセットアップ

新しいファイルを作成し、index.html と名付けます。好きなコードエディタで開きます。

HTML ファイルの <head> セクションに、次のコードを追加します。

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

ヘッダーとフッターの追加

私たちのウェブページを完成させるために、ヘッダーとフッターを追加します。

HTML ファイルの <body> タグの間に次のコードを追加します。

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

上記のコードは、ナビゲーションメニュー付きのヘッダー、<main> タグ、およびフッターを定義しています。

メインタグにコンテンツを追加する

これでヘッダーとフッターをセットアップしたので、メインタグにコンテンツを追加できます。

<main> タグの間に次のコードを追加します。

<main>
  <h2>About Us</h2>
  <p>
    We are a company that specializes in web development services. Our team
    consists of experienced web developers who can help you create a website
    that will help your business grow.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Here are some of the websites we have created:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

完成した HTML コードを確認する

メインコンテンツエリアを追加した後、あなたの HTML コードはこのようになるはずです。

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        We are a company that specializes in web development services. Our team
        consists of experienced web developers who can help you create a website
        that will help your business grow.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Here are some of the websites we have created:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

まとめ

この実験では、HTML ドキュメントにおいて <main> タグを使用してメインコンテンツコンテナを作成する方法を学びました。サンプルコンテンツを持つヘッダー、メインコンテンツエリア、およびフッターを作成しました。<main> タグのコンテンツは、ドキュメントの中心的なトピックに直接関連しており、一意である必要があることを忘れないでください。<main> タグを使用することで、ユーザーが簡単にナビゲートできるように、ウェブサイトの識別しやすいセクションを作成できます。