フロントエンド講習とは？
弊社OBGで毎月第2土曜日11:00〜19:00にて行われている講習です。
主にHTML、CSS、JavaScript（以下JS）を使ったWebに関する講習で、普段はオンラインでの開催になりますが、3ヶ月に1回、オフィスでのオフライン開催を実施しています。
前回の記事はこちら！
https://qiita.com/ume_work0831/items/43541df1c845b3bac345
HTML / CSS 中級
中級講座を担当させていただいている（@ume_work0831）です。
今回は、中級講座の初回に実施している内容の一部を抜粋して、ご紹介いたします！
ご紹介する内容は、セマンティックデザインについてです。
セマンティックデザインとは？
HTMLの各要素が持つ「意味」を正しく使い、
ページ構造を明確にするコーディング手法のことをいいます
※ちなみにセマンティック（semantic） は「意味」や「意味論」を指す言葉です。
単なる「div」や「span」の羅列ではなく、「何を表しているか」が分かる HTML を書くこと
(セマンティックデザインにすること）で、SEO・アクセシビリティ・保守性が格段に向上します。
なぜ、セマンティックが重要になるのか？
単純に見た目を整えるだけであれば、セマンティックを意識しなくても問題ありません。
しかし、しっかりとセマンティックを意識したデザインにすると、以下のようなメリットがあります。
1.機械(検索エンジンやAI）が理解しやすい
2.アクセシビリティが向上する
3.可読性・保守性が上がる
4.SEO効果が期待できる
例えば、「1.機械(検索エンジンやAI）が理解しやすい」はどう違うのかというと
以下のようなコードだと……
<div class="header">会社について</div>
<div class="nav">...</div>
<div class="section">サービス紹介</div>
ただの「div」の集まりで、それぞれの意味がわかりにくいです。
検索エンジンなどの機械側としても、「これは何を意味している部分なのか？」と判断しづらい状態です。
これを簡単にセマンティックにしてみると……
<header>
<h1>会社について</h1>
</header>
<nav>...</nav>
<main>
<section>
<h2>サービス紹介</h2>
</section>
</main>
<footer>...</footer>
ここは「ヘッダー」など何を表す部分なのかが明確になっているため、
機械側も理解しやすくなります。
他にも「アクセシビリティ」の点において、
ボタンとリンクを使って例をあげると、以下のような違いがあります。
<!-- NG -->
<div onclick="...">クリック</div>
<!-- OK -->
<button>クリック</button>
「button」はキーボード操作やスクリーンリーダーにも自然に対応しますが、
非セマンティックな「div」ではその恩恵が受けられません。
よく使われるHTML5以降のセマンティック要素の一覧
| タグ | 意味 |
|---|---|
<header> |
セクションの冒頭部分 |
<nav> |
ナビゲーション |
<main> |
ページの主要コンテンツ |
<article> |
独立したコンテンツの塊 |
<section> |
汎用セクション |
<aside> |
補助的な内容 |
<footer> |
フッター情報 |
いかがでしたでしょうか。
セマンティックデザインというのは、トレンドというだけではなく
Webサイト全体の品質や検索性、アクセシビリティを高める重要なものです。
意味をもったコーディングを行っていきましょう！
オブジェクティブグループでは X（旧 Twitter）の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。