フロントエンド講習とは？

弊社OBGで毎月第2土曜日11:00〜19:00にて行われている講習です。
主にHTML、CSS、JavaScript（以下JS）を使ったWebに関する講習で、普段はオンラインでの開催になりますが、3ヶ月に1回、オフィスでのオフライン開催を実施しています。

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」ではその恩恵が受けられません。

いかがでしたでしょうか。
セマンティックデザインというのは、トレンドというだけではなく
Webサイト全体の品質や検索性、アクセシビリティを高める重要なものです。
意味をもったコーディングを行っていきましょう！

オブジェクティブグループでは X（旧 Twitter）の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。