HTML セマンティックな要素とは。使い方や使用例を紹介

本記事は広告が含まれる場合があります HTML

【HTMLセマンティック要素とは】意味付けされた要素・意味と使い方

HTMLを勉強していると「セマンティックな要素」という言葉を聞いたこともあるのではないでしょうか。

セマンティックな要素とは意味づけされた要素のことで、HTML5から新たに追加されました。たとえば、ページのヘッダー部分にはヘッダー部分の意味を持つheaderタグを使おうねといった使われ方です。

今回はheaderやnav、main、asideなどの代表的なセマンティック要素の主な使われ方について説明していきます。
 

 

セマンティックな要素とは?

セマンティックな要素とは意味づけされた要素のことで、HTML5から新たに追加されました。

これにより、今まで全てdivを使っていたところを、ヘッダー部分ならheaderタグ、フッター部分ならfooterタグを、といったように役割に沿ったHTMLタグを使っていきます。

■すべてdivで使った例

■上記のdivを意味づけを意識してセマンティックな要素を使った例

 

なお、divと同様に、セマンティックな要素自体にはブラウザ上の見た目に影響を与える機能があるわけではなく、あくまで「意味/解釈」を与えているだけになります。

ブラウザ上の見た目の操作はこれまで通りCSSで整える形になります。

また、「基本的にこういった箇所で使おうね」といった指針があり、使用者が解釈して当てはめている形になるので、大まかな使い方は共通していても実際のサイトでの使われ方は様々です。

使い方に迷った場合は、他のホームページやブログなどを見て使われ方を調べてみると良いでしょう。
 

主なセマンティック要素

以下は、特によく使われるセマンティックな要素です。

タグ 意味
<header>タグ サイトのヘッダーやコンテンツの導入部分に使用
<footer>タグ サイトのフッターやコンテンツのフッター部分に使用
<nav>タグ 主要なナビゲーションリンクに使用
<main>タグ ページ内の最もメインとなるコンテンツに使用
<aside>タグ メインコンテンツの補足情報に使用
<article>タグ 自己完結している内容のまとまりに使用
<section>タグ 1つの内容のまとまりに使用

 

セマンティックな要素を使うことで、以下のようなメリットもあるため、基本的にできる範囲で使っておいた方が良いでしょう。

■セマンティックな要素を使うことによるメリット

  • 検索エンジン対策の一助となる(クローラビリティの向上と検索結果への適切な反映)
  • コードの保守性が向上する(後からコードを見返したときに分かりやすくなっているため)
  • 音声読み上げソフトが文書構造を理解することで、目の不自由なユーザーにも理解しやすいように読み上げられるようになる

 

代表的なセマンティック要素と意味・使い方

ここからは、代表的なセマンティック要素とそれぞれの意味・使い方について説明していきます。
 

<header>タグ:サイトのヘッダーやコンテンツの導入部分に使用

まず1つ目は、headerタグです。

headerタグはページのヘッダー部分に主に使用されます。
headerタグの使用例(Webst8のブログ)
 

また、headerタグはページ全体のヘッダー部分だけでなく、コンテンツの導入部分、すなわち記事の導入部分でもheaderタグが使用されている例もあります。

 

なお、header部分をどこまでと定義するかは使用者によって異なります。

headerタグに限らず、後述のfooterやnavなど「絶対にこの箇所でここからここまでを含めなければならない」といった一つの正解があるわけではありません。

もちろん大まかな指針はあるので、明らかに変な使い方はよくないですが、厳密な正解を求めすぎなくても良いと思います。

 

(参考)<header> - HTML: HyperText Markup Language | MDN
 

<footer>タグ: サイトのフッターやコンテンツのフッター部分に使用

2つ目はfooterタグです。

footerタグはページ下部のフッター部分で主に使用されます。
footerタグの使用例(Webst8のブログ)
 
また、ヘッダーと同様にコンテンツのフッター部分に使用されている場合もあります。
 
(参考)<footer> - HTML: HyperText Markup Language | MDN
 

<nav>タグ:主要なナビゲーションリンクに使用

3つ目は、navタグです。

navタグは主要なナビゲーションリンク部分で使用されます。具体例としてはグローバルメニューで使われることが最も多く、他にも目次や索引などで使われることもあります。
navタグの使用例(Webst8のブログ)
 

なお、navタグはあくまでも主要なナビゲーションリンクに使用されるので、全てのリンクで使う必要はありません。

フッターなどに使用されるナビゲーションの部分も必ずしも使われているわけではありません。(もちろんフッターのナビゲーションに使用しても構いません。)
フッターのリンクリストにはnavタグが使用されていない
 
(参考)<nav> - HTML: HyperText Markup Language | MDN
 

<main>タグ:ページ内の最もメインとなるコンテンツに使用

4つ目はmainタグです。

mainタグはページ内でメインとなるコンテンツに使用されます。例えばブログ記事であれば、サイドバーを除いたメインエリアの部分などに使用されます。

mainタグの使用例(Webst8のブログ)

なお、他の多くのタグと違い、mainタグはページ内で1回のみしか使用することはできません。(mainタグにhidden属性が指定されている場合は例外。)

(参考)<main> - HTML: HyperText Markup Language | MDN

 

<aside>タグ:メインコンテンツの補足情報に使用

5つ目はasideタグです。

asideタグは、メインコンテンツの補足情報・関連情報などで使用されます。具体的にはサイドバー部分などが最も多い使われ方です。
asideタグの使用例(Webst8のブログ)

他には、メインコンテンツ下にある「関連記事」一覧箇所にもasideタグが使用されている例も多いです。
Affingerでは関連記事一覧箇所にもasideタグが使用されている
 

(参考)<aside> - HTML: HyperText Markup Language | MDN
 

<article>タグ:自己完結している内容のまとまりに使用

6つ目は、articleタグです。

articleタグはそれだけで自己完結していて、個別に配信や再利用できる内容のまとまりを表す際に使用されます。具体的にいうと下記のような箇所です。

■articleがよく使われる箇所

  • ブログ・お知らせの一覧内の各記事
  • ブログ・お知らせの記事
  • フォーラムの投稿
  • ユーザーが投稿したコメント

よくある例としては、お知らせ一覧・記事一覧の中にあるそれぞれの一項目などが該当します。

 

以下はWordPressテーマ「JIN」でのarticleタグの使用例です。ブログの一覧でそれぞれ記事ごとに使われています。
articleタグの使用例(WordPressテーマ「JIN」公式サイト)
 

また、一覧内の各記事だけでなく、個別の記事ページの記事部分もarticleタグが使用されるケースもよくあります。
articleタグの使用例(WordPressテーマ「Affinger」)
 

なお、articleタグはそれぞれを識別できるようにするために、子要素として見出しタグを含めることが推奨されています。

それぞれの<article>は、子要素として見出し(<h1>-<h6>要素)を含むなどの方法で識別できるようにするべきです。

引用:<article>: 記事コンテンツ要素 - HTML: HyperText Markup Language | MDN

 

<section>タグ:1つの内容のまとまりに使用

7つ目は、sectionタグです。sectionタグは1つの内容のまとまりを表す箇所に使用されます。

「一つのまとまり」という汎用的に使用される要素で、「章や節」などといった情報の区分けなので利用できます。

なお、前述のheader、main、nav..など、「ここではこのタグを使った方が良い」という箇所ではそちらを優先的に使った方がよく、前述で説明した箇所に該当しない場合に使用します。

以下は、sectionタグの使用例ですが、「受講の流れ」や「スクール学習」といった異なる内容のまとまりは、sectionタグでマークアップしています。

■(参考)当スクールサイトでのsectionタグ使用例

setionタグの使用例
 

なお各sectionもarticleタグ同様、子要素として、一般的に見出しタグを含めることが推奨されています(ただし必須ではないため、無理やり入れる必要はありません)

繰り返しになりますが、それぞれの<section>はできるだけ、特に見出し(<h1>-<h6> 要素)を<section>の子要素に含めて識別できるようにするべきです。見出しのない<section>の例については以下を参照してください。

引用:<section>: 汎用セクション要素 - HTML: HyperText Markup Language | MDN

(参考)<section> - HTML: HyperText Markup Language | MDN
 

 

まとめ 代表的なセマンティック要素と使い方

まとめです。今回はHTML文書に意味付けをする役割を持ったHTMLのセマンティック要素の中でも特によく使うタグ(section、articleなど)の使い方を紹介しました。

タグ 意味
headerタグ サイトのヘッダーやコンテンツの導入部分に使用
footerタグ サイトのフッターやコンテンツのフッター部分に使用
navタグ 主要なナビゲーションリンクに使用
mainタグ ページ内の最もメインとなるコンテンツに使用
asideタグ メインコンテンツの補足情報に使用
articleタグ 自己完結している内容のまとまりに使用
sectionタグ 1つの内容のまとまりに使用

 

検索エンジンも文書構造を理解しやすくなりSEOの一助にもなるため、該当箇所ではなるべく適切なタグを使っておくと良いでしょう。

なお「基本的にこういった箇所で使おうね」といった指針があり、使用者が解釈して当てはめている形になるので、使うべき箇所について迷ったり人によって意見が分かれることもあります。

ですので、最初はいろいろなサイトをみてどういった箇所で使われているのかを実際に見てみるのがおすすめです。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML