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

HTML5セマンティクスとは？主要なセマンティックタグと実装例を徹底解説

HTML5セマンティクスとは、Webページに「意味」を持たせるためのセマンティックタグ（意味論的タグ）のことを指します。HTML5では、タグがセマンティック（意味を持つ）とノンセマンティック（意味を持たない）の2種類に分類されており、HTML5の登場によって数多くの新しいセマンティックタグが導入されました。

従来のdiv要素だけのマークアップと比べ、セマンティックタグを使うことで、検索エンジンやスクリーンリーダーがページ構造を正確に理解できるようになり、SEO対策やアクセシビリティの向上にも大きく貢献します。

主なHTML5セマンティックタグ一覧

タグ説明
figure画像や図表などのコンテンツを、キャプションとともにまとめて定義します。
article単体で完結する独立した記事コンテンツを表します。
navナビゲーションリンクのコンテナを定義します。
asideメインコンテンツ以外の補足的なコンテンツ（サイドバーなど）を表します。
section文書内の一つのセクション（区切り）を表します。
details開閉可能な追加情報ウィジェットを定義します。
headerセクションまたは文書全体のヘッダーを定義します。
footerセクションまたは文書全体のフッターを定義します。
figcaptionfigure要素内の画像などに対する説明文（キャプション）を定義します。
mainページのメインコンテンツを表します。1ページにつき1つだけ使用します。
summarydetails要素の見出し（サマリー）を定義します。
markハイライト（強調表示）されたテキストを表します。

HTML5セマンティクスの実装例

それでは、header・nav・article・footerなどのセマンティックタグを使った具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<style>
    * {
        box-sizing: border-box;
    }
    body {
        color: #000;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    header {
        background-color: #000;
        padding: 20px;
        text-align: center;
        color: white;
    }
    nav {
        float: left;
        width: 20%;
        height: 200px;
        background: #282828;
        padding: 60px 10px;
    }
    nav ul {
        list-style-type: none;
        padding: 0;
    }
    nav ul li a {
        text-decoration: none;
        color: #fff;
    }
    article {
        float: left;
        padding: 80px 10px;
        width: 80%;
        background-color: #fff;
        height: 200px;
        text-align: center;
    }
    section:after {
        content: "";
        display: table;
        clear: both;
    }
    footer {
        background-color: #000;
        padding: 20px;
        text-align: center;
        color: white;
    }
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>

出力結果

HTML5セマンティクスとは？主要なセマンティックタグと実装例を徹底解説

このように、header・nav・article・footerといったセマンティックタグを適切に配置することで、コードの可読性が高まり、ブラウザや検索エンジンにとっても構造が明確なページになります。ぜひ実際のWeb制作でも活用してみてください。

  1. HTML5の数学演算子の使い方！エンティティで数学記号を表示する方法

    HTML5の数学演算子とは？ HTML5の数学演算子は、HTML文書内で数学的・技術的な記号（演算子）を表現するために使用されます。Webページ上でこれらの記号を正しく表示するには、HTMLエンティティ名を利用します。対応するエンティティ名が存在しない場合には、10進数または16進数の文字参照（エンティティ番号）を代わりに使用できます。 基本構文 数学演算子をHTMLに記述する際の基本構文は次のとおりです。 ① エンティティ名を使う場合： &operatorName; ② 10進数の文字参照を使う場合： &#演算子の10進コード; ③ 16進数の文字参照を使う場合： &

  2. HTML5のレスポンシブ対応とは？Webデザインにおける応答性の重要性を解説

    HTML5は、最新かつ人気の高いWebデザイン言語として、デザイン業界に大きな変革をもたらしました。従来のHTMLと比較したとき、HTML5を特別な存在にしている最大の要因こそが「レスポンシブ（応答性）」です。 Webページのレスポンシブ性とは、ページがブラウザ上に読み込まれた後、閲覧に使われたデバイス（PC、スマートフォン、タブレットなど）に応じて、適切な出力・表示を行う能力のことを指します。 旧来のHTMLには多くの制約があり、それが新バージョン誕生のきっかけとなりました。当時のWebデザイナーには、変化するテクノロジーに合わせて柔軟にページを作り込む自由度がなかったのです。 最新のテ