セマンティックなHTMLの具体例

Yamato Nagata

セマンティックウェブは、World Wide Web上の情報を機械が理解しやすくするための技術的な仕組みや方法論のことを指します。従来のWebは、人が理解するために作られたもので、コンピュータが理解するのは困難でした。しかし、セマンティックウェブは、Web上の情報に意味を持たせ、コンピュータが情報を自動的に処理できるようにすることを目的としています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>セマンティックHTMLの例</title>
</head>
<body>
    <header>
        <h1>新聞のタイトル</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">カテゴリー1</a></li>
                <li><a href="#">カテゴリー2</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>記事のタイトル</h2>
                <p>投稿日: 2023年4月22日</p>
            </header>
            <section>
                <p>記事の先頭部分</p>
                <figure>
                    <img src="article-image.jpg" alt="記事の画像">
                    <figcaption>記事の画像のキャプション</figcaption>
                </figure>
                <p>記事の中間部分</p>
                <blockquote>
                    <p>引用文</p>
                    <cite>引用元</cite>
                </blockquote>
                <p>記事の最後の部分</p>
            </section>
            <footer>
                <p>タグ: <a href="#">タグ1</a>, <a href="#">タグ2</a></p>
            </footer>
        </article>
        
        <section>
            <h2>関連記事</h2>
            <ul>
                <li><a href="#">関連記事1のタイトル</a></li>
                <li><a href="#">関連記事2のタイトル</a></li>
                <li><a href="#">関連記事3のタイトル</a></li>
            </ul>
        </section>
    </main>
    
    <aside>
        <h2>広告</h2>
        <a href="#"><img src="ad-image.jpg" alt="広告の画像"></a>
    </aside>
    
    <footer>
        <p>&copy; 2023 新聞のタイトル</p>
    </footer>
</body>
</html>

この例では、<article>タグで記事を区切り、記事タイトル、投稿日、記事本文、関連記事、タグなどを区分しています。また、<figure>タグで記事の画像とキャプションを定義し、<blockquote>タグで引用文と引用元を示しています。広告は<aside>タグで定義され、フッターはページ全体の著作権情報を示すために使用されます。

この記事が気に入ったらサポートをしてみませんか？