ウェブサイト
スポンサーリンク

 

今回はHTML5より新たに導入された非常に便利なセマンティックウェブの使い方・書き方を解説していきたいと思います。

 

HTML5についてはこちら。

 

この記事を読んでいただければ、セマンティックウェブの意味について理解し、どんな種類があるのかや使い方がわかると思いますので是非最後まで読んでいただけたら幸いです。

 

セマンティックウェブとは

 

そもそもセマンティックウェブが何のこっちゃわからないと言った方に説明させていただきます。

セマンティックとは英語でsemanticと書き「意味の」、「意味論の」と言った意味があります。

英語ではsemantic element(セマンティック・エレメント)「意味を持つ要素」としてよくHTMLで使われます。

 

要はhtml内で

  • どこがヘッダーか
  • どこがフッターか
  • どこがメニューか
  • どこが記事か
  • どこがサイドバーか

といったことが分かりやすくなるように、HTMLのタグ自体に意味をもたせ、それを利用したものがセマンティックウェブになります。

 

例えば、

ヘッダーだったら<header>タグ、フッターだったら<footer>タグといった具合に、HTMLタグ自体に名前があり、「あ、これがヘッダーでこれがフッターか」と一目見ただけでわかるようにしようというのがセマンティックウェブです。

 

ここで言う

<header><footer>が、セマンティック・エレメント「意味を持つ要素」、になります。

 

セマンティックエレメント
名前を見ただけで要素の意味がわかるタグのこと。<header><footer>など。
セマンティックウェブ
セマンティックエレメントを使って構成されたもの。

 

とここまでで、ある程度セマンティックウェブに関して理解いただけたかと思います。

 

では、実際にどのようなものがあり、どのようにして書けばいいのか、もしくはどのようにして使えばいいのかを解説していきたいと思います。

 

スポンサーリンク

セマンティック・エレメントの種類

 

それではまずセマンティック・エレメントの種類についてですが、HTML5より導入されたものは下記になります。

 

<article>記事セクションを定義する。
<aside>ページコンテンツとは別にセクションを定義する。
<details>追加の情報・詳細を定義する。表示・非表示にすることができる。
<figcaption><figure>要素の説明文を定義する。
<figure>画像やイラスト、写真などを定義する。
<footer>フッター部分を定義する。
<header>ヘッダー部分を定義する。
<main>文書の主となる部分を定義する。
<mark>マーク・ハイライトされたテキストを定義する
<nav>ナビゲーション・メニューを定義する。
<section>文書内のセクションを定義する。
<summary><details>要素の要約部分を定義する。
<time>日付や時間を定義する。

 

それではそれぞれの書き方や使い方について詳しく見ていきましょう。

スポンサーリンク

article(アーティクル)

 

article 記事

 

articleは日本語に訳すと「記事」となります。

その名の通り、記事のような役割をしてくれるセマンティック・エレメントです。

 

使用例

  • ブログの記事
  • 新聞記事
  • 雑誌の記事

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

aside(アサイド)

 
asideとは日本語で「わきへ」「余談」といった意味になります。

その名の通りページ内での位置は「わきへ」、内容としては「余談」ないしは「補足情報」としての役割を担います。

 

 asideには他の要素と間接的に関連している内容を記述する必要があります。

 

使用例

  • サイドバー
  • メインコンテンツの補足情報

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

details(ディテールズ)とsummary(サマリー)

 
detailsは詳細情報を折りたたみ式で表示することができる要素です。

summary要素と一緒に使います。

summaryは詳細情報を加えたいタイトルを囲む要素です。
 

使用例

  • 詳細情報を表示

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

figure(フィギュア)とfigcapture(フィグキャプチャ)

 
figureは画像やイラストなどを囲む要素です。

figcapturefigure要素で囲まれた画像やイラストに対する説明文を囲む要素です。

 
使用例

  • 説明文付きの画像
  • 説明文付きのイラスト

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

footer(フッター)

フッタ footer

 

footerタグとはheaderタグの反対語のようなもので、headerタグが頭部分の要素なのに対し、footerタグはページの底辺部分を担う要素です。

 

使用例

  • 著作権情報
  • サイトマップ
  • お問い合わせ

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

header(ヘッダー)

頭 ヘッダー

 

headerはその名の通りページの頭部分にくる要素です。

 

 headタグと似ていることから混同されがちですが、全く違うタグです。

 

使用例

  • サイトのロゴ
  • メニュー
  • お問い合わせ情報

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

main(メイン)

 
mainはドキュメントのメインとなるコンテンツを囲む要素です。

 

 1ドキュメントに対してmainは一度しか使用できません。

 

使用例

  • ブログの中心内容

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

mark(マーク)

 

markはテキストをハイライトする要素です。

 

使用例

  • 強調したい単語
  • 重要な文章

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

nav(ナブ)

ナビゲーション

 

navとはnavigationの略で、ナビゲーションメニューを囲む要素です。

 

memo
なお、このnavタグheaderタグ内に記載しても問題ありません。

 

使用例

  • ヘッダー内のグローバルナビ
  • フッター内のサイトマップ

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

section(セクション)

セクション

 

sectionは一つのセクション(部分)を囲む要素です。

つまりは一つの項目といったものをひとまとめにする要素です。

 

使用例

  • 章のあるブログ
  • 項目が分けられてるブログ

など。

 
このsectionの大きな特徴として、見出しを必ず入れることが勧められており、見出しがない場合はこのsectionタグを使う必要性がありません。

良い例

<section>
  <h1>タイトルをここにいれてください。</h1>
</section>

 

悪い例

<section>
  <p>タイトルがなく文章だけしか書かれていません。</p>
</section>

 

articleとの違いは?

実はこの部分は割とぼんやりしており、articlesectionのどちらかを必ず選ばなければいけないわけではないのです。

 

しかし、HTMLを開発した組織W3Cによると

 

The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.

とのことで、日本語にすると、

 

article要素は、文書やページ、アプリケーション、サイトといったものの中の文章や構成が、その要素内だけで完結している際に使用します。これらは、雑誌や学術論文、エッセイ、レポート、ブログ、その他のSNSでも利用できます。

といった内容で書かれています。

 

要は、「コンテンツがその内容だけで完成されているのであればarticleを使うのが望ましく、それ以外ではsectionを使っても大丈夫」ということです。

 

time(タイム)

 
timeは特定の時間を囲む要素です。

 

またtimeの属性でよく使用されるのがdatetimeです。
このdatetime属性を記述することで、ブラウザがユーザーのカレンダーに日付通知を設定することが可能になったりします。

 

使用例

  • 日付通知設定

など。

 

See the Pen
Untitled
by 萩原 英 (@suguru1989)
on CodePen.0

 

まとめ

いかがだったでしょうか。

たくさんあるように感じますが、それぞれの使い方をマスターし、慣れてしまえば非常に効率的かつ、SEOにも強いサイトが作れることでしょう。

ぜひ、これからのサイト作成に活用してみてください。

 

注目
下記プログラミングスクールでは完全な未経験からプログラマーとして転職できるように指導してくれます。
まずは無料相談をしてみてはいかがでしょうか。
スポンサーリンク