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

今回は、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>
: 具体的なトピックを分割するセクション。- 文書のセクションを表します。
- セクションごとにテーマを分けたいときに使用します。
h1
~h6
タグを含むことが推奨されます。
<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要素の使い方を深く理解しよう

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