はじめてのホームページ 意味合いを持った要素 セマンティクス要素の設定

  • URLをコピーしました!

今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利便性が高くなります。ここでは、大事な、header要素、footer要素、main要素、section要素、article要素 の設定方法を行なっています。

目次

HTMLコードを入力

下記のコードをコピーもしくは、コードを模写して準備しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
</head>
<body>
    <header>
        <h1>ECOLOGY【エコロジー】</h1>
    </header>
    <main>
        <article>
            <header>
                <h2>基本ポリシー</h2>
            </header>
            <section>
                <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー/環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
            </section>
        </article>
        <article>
            <header>
                <h2>エコロジーへの取り組み</h2>
            </header>
            <section>
                <p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
            </section>
        </article>
        <article>
            <header>
                <h2>商品のラインナップ</h2>
            </header>
            <section>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
            </section>
        </article>
    </main>
    <aside>
        <p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
    </aside>
    <footer>
        <p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
    </footer>
</body>
</html>

全体の構造

HTMLコードは以下のようなセマンティック要素で構成されています

  • <header>: ページのヘッダー部分。
    • ページ全体やセクションのヘッダー部分を表します。
    • ロゴ、タイトル、ナビゲーションリンクなどを含むことが一般的です。
  • <main>: ページの主要なコンテンツ部分。
    • 文書の主要な内容を表します。
    • ページ内で最も重要なコンテンツ部分に使用します。通常、ページ内で1つだけ使用します。
  • <article>: 独立した内容を表現するコンテンツの単位。
    • 独立した情報の単位を表します。
    • 記事やブログ投稿など、文書全体から独立して再利用できる内容に使用します。
  • <section>: 具体的なトピックを分割するセクション。
    • 文書のセクションを表します。
    • セクションごとにテーマを分けたいときに使用します。h1h6タグを含むことが推奨されます。
  • <aside>: 補足情報や関連情報を提供する部分。
    • 本文の補足情報や周辺情報を表します。
    • 広告、関連リンク、参考情報、サイドバーなどに使用します。
  • <footer>: ページのフッター部分。
    • ページ全体またはセクションのフッター部分を表します。
    • 著作権情報、連絡先、関連リンクなどを含むことが多いです。

これらの要素を使うことで、ページの構造が明確になり、検索エンジンや支援技術(スクリーンリーダー)にとっても理解しやすくなります。

header要素

ページ全体のタイトルを示します。<h1>: ページで一意のメインタイトルとして使用します。この場合、「ECOLOGY【エコロジー】」がページの主題です。

<header>
    <h1>ECOLOGY【エコロジー】</h1>
</header>

main要素

ページの主要なコンテンツを囲む領域です。<main>内には複数の<article>要素があります。

<main>
    ...
</main>

article要素

<article>: 独立したコンテンツの単位を表現します。このページでは「基本ポリシー」「エコロジーへの取り組み」「商品のラインナップ」をそれぞれ個別の<article>で表現しています。

<header>: 各<article>の見出し部分を定義しています。ここでは<h2>が使われ、ページ全体の<h1>に続く階層的な見出しとなります。

<section>: 各トピックの具体的な説明を分けるために使用します。

<article>
    <header>
        <h2>基本ポリシー</h2>
    </header>
    <section>
        <p>エコロジーや環境問題への関心は、年々高くなっています。...</p>
    </section>
</article>

aside要素

メインコンテンツを補足する情報を表示します。
: 関連情報や外部リンクなどを提供する場合に適しています。この例では「ニュースページ」への誘導を行っています。

<aside>
    <p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
</aside>

footer要素

ページのフッター部分を定義します。一般的に著作権情報や連絡先などが含まれます。

<footer>
    <p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</footer>


CSSを追加してみよう

上記のHTMLコードにはCSSが含まれていません。下記のスタイルを記述してみましょう。

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
    }
    header {
        background-color: #4CAF50;
        color:#fff;
        padding: 20px;
        text-align: center;
    }
    article {
        margin: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }
    aside {
        margin: 20px;
        padding: 10px;
        background-color: #f1f1f1;
        border-left: 4px solid #4CAF50;
    }
    footer {
        background-color: #222;
        color: #fff;
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
</style>

仕上がりイメージ

article要素の使い方を深く理解しよう

あわせて読みたい
ホームページ基礎講座 誰もが迷うarticle要素の使いどころ Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, secti...

次は、widthやmargin/paddingを使った指定方法 06に進む!

あわせて読みたい
06 ホームページ基礎講座 CSSで横幅のwidthと線指定 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力...

5回目は、article section を設定する動画

よかったらシェアしてね!
  • URLをコピーしました!
目次