CSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？
susan すーさんのweblog
【HTML5】最新のセマンティックウェブの書き方や使い方をわかりやすく解説
susan
記事内に商品プロモーションを含む場合があります
セマンティックウェブとは、HTML5より導入された新たな概念で、検索エンジン最適化（SEO）からアクセシビリティの改善まで、現代のWebサイトにおいてはとても重要なものとなっています。
セマンティックウェブを使いこなすことで、コードの可読性が上がったりSEO対策にもなるのでぜひマスターしておきましょう。
本記事ではそのセマンティックウェブの概要から使い方まで詳しく解説していますのでぜひ最後までお読みいただけたらと思います。
エンジニアにおすすめのパソコンはこちら！
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選
フリーランスエンジニアにおすすめのエージェント
レバテックフリーランス
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
| 案件数 | 50,000件以上 |
| リモート | ○ （半分くらいがリモート対応） |
| 単価 | 45万 〜 195万円 |
| 稼働日数 | 週5日が多め |
| 福利厚生 | ◎ |
| 運営会社 | レバテック株式会社 |
フリーランスエンジニア向けのおすすめのエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介してますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較
Contents
HTML5とは？
セマンティックウェブの説明に入る前にまずはざっとHTML5について。
HTML5は、Webページの構造を記述するためのマークアップ言語であるHTML（HyperText Markup Language）の第5バージョンです。
2014年にW3C（World Wide Web Consortium）によって公式に標準化されました。
HTML5は、以前のバージョンと比較して多くの新しい機能と改善点を持っています。
具体的には以下の機能が追加されました。
HTML5で追加された主な機能
- マルチメディアの統合
- セマンティック要素
- フォームの強化
- CanvasとSVG
- Geolocation API
- Web Storage
- WebSockets
- モバイル対応
マルチメディアの統合
<video> および <audio> タグなどの新しい要素により、Flashなどのプラグインなしで動画や音声を埋め込むことができるようになりました。
セマンティック要素
以前のバージョンよりも、より意味的なマークアップが可能になりました。
例として、<header>, <footer>, <section>, <article> などの要素が追加されました。
フォームの強化
より強化されたフォームコントロールとバリデーションが追加されました。
CanvasとSVG
グラフィックの描画や操作が容易になりました。
Geolocation API
ユーザーの地理的な位置情報を取得することが可能になりました。
Web Storage
ブラウザにデータを保存するための手段として、localStorageやsessionStorageが導入されました。
WebSockets
サーバーとの双方向通信を可能にするWebSocketsも導入されました。
モバイル対応
モバイルデバイスでの表示と操作が向上しました。
HTMLとCSS学習におすすめの書籍
セマンティックウェブとは
セマンティックウェブとは、HTML要素を適切に使用して、ページ構造の意味をコンテンツと一緒に伝える方法のことを指します。
これにより、検索エンジンやスクリーンリーダーなどのユーザーエージェントはページの意味を理解しやすくなります。
セマンティックとは英語でsemanticと書き「意味の」、「意味論の」と言った意味があります。
HTML内で
- どこがヘッダーか
- どこがフッターか
- どこがメニューか
- どこが記事か
- どこがサイドバーか
といったことが分かりやすくなるように、HTMLのタグ自体に意味をもたせることです。
例えば、ヘッダーだったら<header>タグ、フッターだったら<footer>タグといった具合に、HTMLタグ自体に名前があり、「あ、これがヘッダーでこれがフッターか」と一目見ただけでわかるようにしようというのがセマンティックウェブです。
なぜセマンティックウェブが重要なのか？
セマンティックウェブは、以下の理由から重要だと考えられます。
セマンティックウェブが重要だと言われる理由
- 検索エンジン最適化（SEO）
- アクセシビリティ
- コードの可読性と保守性
検索エンジン最適化（SEO）
セマンティックHTMLを使用すると、検索エンジンはサイトの構造とコンテンツの意味をより正確に理解できます。
これにより、検索結果のランキングが改善される可能性があります。
アクセシビリティ
スクリーンリーダーやキーボードナビゲーションなどを使用するユーザーも、セマンティックHTMLによってページ構造を理解しやすくなります。
コードの可読性と保守性
適切な要素を使用することで、コードはより読みやすく、保守しやすくなります。
HTMLとCSS学習におすすめの書籍
HTML5のセマンティック要素
それではまずセマンティック・エレメントの種類についてですが、HTML5より導入されたものは下記になります。
HTML5より導入されたセマンティック要素
- <header>
- <nav>
- <main>
- <article>
- <section>
- <aside>
- <details>
- <summary>
- <figure>
- <figcapture>
- <mark>
- <time>
- <footer>
では、具体的にどのようにセマンティックHTMLを書くのか見ていきましょう。
header(ヘッダー)
1<header>ここがヘッダーの中身</header>headerは導入情報やナビゲーションリンクなどを囲むために使用します。
これはウェブページ全体のヘッダーに使用することも、個々の記事やセクションのヘッダーに使用することもできます。
使用例
- サイトのロゴ
- メニュー
- お問い合わせ情報
nav(ナブ)
1<nav>
2 <ul>
3 <li><a href="#about">About</a></li>
4 <li><a href="#contact">Contact</a></li>
5 </ul>
6</nav>navはページ内またはページ間の主要なナビゲーションリンクを包含するセクションを示します。
navは通常、サイトのヘッダー、フッター、サイドバーなどに配置されます。
使用例
- ヘッダー内のグローバルナビ
- フッター内のサイトマップ
main(メイン)
1 <main>
2 <article>
3 <h2>My First Blog Post</h2>
4 <p>This is the content of my first blog post.</p>
5 </article>
6 <article>
7 <h2>My Second Blog Post</h2>
8 <p>This is the content of my second blog post.</p>
9 </article>
10</main>mainは文書のメインコンテンツを表すために使用されます。
これは、ページの一意で独立した部分（つまり、サイト全体にわたるサイトヘッダー、フッター、ナビゲーションメニュー、サイドバーから直接関連しないコンテンツ）を囲むために使われます。
使用例
- ブログの中心内容
article(アーティクル)
1<article>
2 <h2>My First Blog Post</h2>
3 <p>This is the content of my first blog post.</p>
4</article>articleはページ内で独立して再配布や引用が可能なセクションを表現します。
たとえば、ブログ投稿、ニュースストーリー、コメントなどがこれに該当します。
使用例
- ブログの投稿
- ニュースストーリー
- コメント
section(セクション)
1<section>
2 <h2>My Second Blog Post</h2>
3 <p>This is the content of my second blog post.</p>
4</section>sectionは一連のコンテンツが一緒に一つのセクションを形成する場合に使用します。
このタグを使うことで、文書の構造を明示的に示すことができ、それによりアクセシビリティの向上やSEO対策につながります。
使用例
- 章のあるブログ
- 項目が分けられてるブログ
このsectionの大きな特徴として、見出しを必ず入れることが勧められており、見出しがない場合はこのsectionタグを使う必要性がなくdivタグで問題ない。
ー良い例
1<section>
2 <h1>タイトル</h1>
3</section>ー悪い例
1<section>
2 <p>タイトルがなく文章だけしか書かれていません。</p>
3</section>article(アーティクル)との違いは？
実はこの部分は割とぼんやりしており、articleかsectionのどちらかを必ず選ばなければいけないわけではないのです。
しかし、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.
ソース元：W3C
とのことで、日本語にすると、
“article要素は、文書やページ、アプリケーション、サイトといったものの中の文章や構成が、その要素内だけで完結している際に使用します。これらは、雑誌や学術論文、エッセイ、レポート、ブログ、その他のSNSでも利用できます。“
といった内容で書かれています。
要は、「コンテンツがその内容だけで完成されているのであればarticleを使うのが望ましく、それ以外ではsectionを使っても大丈夫」ということです。
aside(アサイド)
1<aside>
2 <h3>About Me</h3>
3 <p>I am a blogger who loves web development.</p>
4</aside>メインコンテンツとは別の補足情報を表します。サイドバーや注釈に使用します。
使用例
- サイドバー
- メインコンテンツの補足情報
details(ディテールズ)とsummary(サマリー)
1<details>
2 <summary>Click to expand</summary>
3 <p>This is additional detailed information that was hidden before clicking the summary. It could include explanations, background info, or any other relevant info that doesn't need to be displayed initially.</p>
4</details>detailsは情報の詳細部分や補足情報を格納するのに使われます。
この要素は通常、ユーザーがクリックまたはタップすると展開し、その詳細な情報を表示します。
summaryは、detailsがまだ開かれていない時にユーザーに表示されるテキストまたは要素を格納します。
ユーザーがsummaryをクリックすると、detailsが開き、その中に含まれる他の内容（この場合は<p>要素）が表示されます。
使用例
- 詳細情報を表示
figure(フィギュア)とfigcapture(フィグキャプチャ)
1<figure>
2 <img src="flower.jpg" alt="A beautiful flower">
3 <figcaption>A close up of a beautiful flower</figcaption>
4</figure>figureは図表や画像、コードブロックなどの独立したコンテンツをマークアップするのに使われます。
figureタグで囲まれたコンテンツは主要なコンテンツから独立していて、取り除かれてもその主要なコンテンツは流れを失わないとされます。
figcaption要素はfigure要素の子として使用され、図表や画像にキャプションを提供します。
使用例
- 説明文付きの画像
- 説明文付きのイラスト
mark(マーク)
1<p>I love to walk in the <mark>park</mark> on sunny days.</p>markはテキストの中から特定の部分をハイライトするために使います。
これは検索結果でクエリの一致する部分を強調表示する、あるいはテキスト中で特に重要な部分を強調するために使用できます。
使用例
- 強調したい単語
- 重要な文章
time(タイム)
timeは日付や時間を人間が読みやすい形で書きつつ、マシンリーダブルな形式でも情報を提供します。
timeのdatetime属性は、マシンリーダブルな日付や時間を示すために使用されます。
ー日付の指定：
1<p>The concert took place on <time datetime="2023-07-18">July 18, 2023</time>.</p>この例では、コンサートが2023年7月18日に行われたことを示しています。
日付は人間が読みやすい形式（”July 18, 2023″）で書かれていますが、datetime属性はISO 8601形式（”2023-07-18″）の日付を提供しています。
ー時間の指定：
1<p>The train departs at <time datetime="14:30">2:30 PM</time>.</p>この例では、列車が午後2時30分に出発することを示しています。
時間は人間が読みやすい形式（”2:30 PM”）で書かれていますが、datetime属性は24時間制の時間（”14:30″）を提供しています。
timeを使用すると、検索エンジンや他のウェブサービスが日付や時間の情報を正確に理解でき、これによりSEOやデータ解析が改善されます。
使用例
- 日付通知設定
- 時間通知設定
footer(フッター)
1<footer>
2 <p>Copyright © 2023 My Blog</p>
3</footer>footerは文書やセクションのフッターを定義します。
通常、フッターには著者の情報、著作権情報、関連ドキュメントへのリンクなどが含まれます。
使用例
- 著作権情報
- サイトマップ
- お問い合わせ
HTMLとCSS学習におすすめの書籍
セマンティックマークアップまとめ
以下、よく使用するセマンティック要素をまとめたもの。
1<html lang="ja">
2<head>
3 <meta charset="UTF-8">
4 <title>My Blog</title>
5</head>
6<body>
7 <header>
8 <h1>My Blog</h1>
9 <nav>
10 <ul>
11 <li><a href="#about">About</a></li>
12 <li><a href="#contact">Contact</a></li>
13 </ul>
14 </nav>
15 </header>
16 <main>
17 <article>
18 <h2>My First Blog Post</h2>
19 <p>This is the content of my first blog post.</p>
20 </article>
21 <article>
22 <h2>My Second Blog Post</h2>
23 <p>This is the content of my second blog post.</p>
24 </article>
25 </main>
26 <aside>
27 <h3>About Me</h3>
28 <p>I am a blogger who loves web development.</p>
29 </aside>
30 <footer>
31 <p>Copyright © 2023 My Blog</p>
32 </footer>
33</body>
34</html>
35
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
まとめ
いかがだったでしょうか。
セマンティックウェブは、Web開発者の必須スキルの一つです。
HTML5の新しいセマンティック要素を使用して、ウェブサイトの意味と構造を明確に表現しましょう。
これにより、SEOの改善、アクセシビリティの向上、そしてより効率的なコードの保守性が実現します。
ぜひ、これからのサイト作成に活用してみてください。
エンジニアにおすすめのパソコンはこちら！
コーディングやプログラミングを勉強したい方はこちらの記事がおすすめ
レンタルサーバーをお探しの方はこちらの記事がおすすめ
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
