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

【HTML5】ドキュメントのメインコンテンツを表示するには？mainタグの使い方を解説

HTMLのmainタグとは

HTMLの<main>タグは、ドキュメント内の主要なコンテンツ（メインコンテンツ）を示すためのHTML5セマンティック要素です。ページの中心となる内容を明確にマークアップすることで、検索エンジンやスクリーンリーダーなどの支援技術がページ構造を正しく理解しやすくなります。

mainタグを使用する際のルールと注意点

  • <main>タグは1ページにつき1回だけ使用できます。
  • <article>、<aside>、<footer>、<header>、<nav>要素の子孫要素として配置することはできません。

これらのルールに従うことで、文書のアウトラインが正しく構築され、アクセシビリティの向上にもつながります。

コード例

以下のコードを実行すると、HTMLドキュメント内でメインコンテンツを表示する方法を確認できます。

<!DOCTYPE html>
<html>
    <body>
       <main>
          <h1>Learning</h1>
          <p>Learn to gain experience and try to share your knowledge with others.</p>

          <article>
             <h3>Web Development Tutorials</h3>
             <p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.</p>
          </article>

          <article>
             <h3>Academic Tutorials</h3>
             <p>Consist of Computer Fundamental, Computer Network tutorials for 1st Semester exams.</p>
          </article>
       </main>
    </body>
</html>

コードのポイント

この例では、<main>タグの中にページの見出し（<h1>）と、複数の<article>要素を配置しています。このように<main>タグで主要コンテンツ全体を囲むことで、「ここがページの核心部分である」ということをブラウザや検索エンジンに明確に伝えられます。ヘッダーやフッター、ナビゲーションなどは<main>の外側に記述するのが基本の構成です。

  1. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h

  2. HTMLドキュメントの作成方法とは？基本構造をサンプルコード付きで解説

    HTMLドキュメントは、Webページの構造を定義するものです。大きく分けて「head（ヘッド）」と「body（ボディ）」という2つの部分で構成されており、headにはドキュメントに関する情報（メタデータなど）が、bodyには実際にブラウザ上に表示されるコンテンツが含まれます。head部分は<head>…</head>タグの中に記述し、body部分は<body>…</body>タグの中に記述します。また、HTMLドキュメントは必ず<!DOCTYPE html>という宣言から始まります。これはDTD（Document Type Defin