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

はじめに

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

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

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 95%です。学習者から 100% の好評価を得ています。

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> タグを使用することで、ユーザーが簡単にナビゲートできるように、ウェブサイトの識別しやすいセクションを作成できます。

HTML のメインコンテンツ

はじめに

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

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

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

最終的な HTML コードを確認する

まとめ