新人プログラマーがセマンティック・マークアップを学習してわかったこと。

公開日 : 2021.06.15

コーディング

はじめに

こんにちは！AndHA新人コーダーのタイガです！

Webコーダーとして働き始めて一ヶ月、コーダーとしての課題が見えてきた今日この頃、、、
プチパニックの連続で挫けそうになりながらも日々精進しています。

そんな私が「働く前にちゃんと意識して勉強すればよかった！」と後悔、反省した事例の一つ
セマンティックなマークアップについて今回は書いていこうと思います！

同じ境遇の皆さん、現在絶賛勉強中の皆さん！これからやるぞー！って方
「HTML/CSSでただコードを書いてデザインする」ことから私と一緒に卒業しましょう！

セマンティックとは？

まず最初にセマンティック(セマンティクス)とはなんぞや？ですよね。
勉強中の方であればなんとなく知っている方もいると思いますが念のため

Semantics (セマンティクス)

プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)

引用元：MDN Web Docs 用語集

つまり、なんとなく使ってたHTML要素(タグ)にはちゃんと意味があって、使い時がある！
でも、ソースコードなんて別に見えないじゃん。別にいいじゃん。なんとなくでよくね？

ポイント

見てるんですよ。見られてるんですよ。コンピュータに、、、これについては後ほど

マークアップとは？

前提として、HTML(HyperText Markup Language)とは名前の通りマークアップ言語です。
プログラミング言語ではありません。

マークアップ言語は<タグ>を使用して文書に意味づけをする言語のことです。

<h1>見出しだよ</h1>
<p>段落だよ</p>
<ul>
    <li>順序なしリストだよ</li>
    <li>順序なしリストだよ</li>
    <li>順序なしリストだよ</li>
</ul>
<ol>
    <li>順序ありリストだよ</li>
    <li>順序ありリストだよ</li>
    <li>順序ありリストだよ</li>
</ol>

一つ一つの<タグ>にはちゃんと意味があります。
例外として

<div></div>

<span></span>

など汎用的なものも存在します。

先程、セマンティックとは？で最後に述べた

「見てるんですよ。見られてるんですよ。コンピュータに、、、」

そうです。コンピュータが見ています。なので

ポイント

コンピュータが理解できるような文書の意味づけを適切な<タグ> を用いてコードを記述する

事がマークアップということになります。コンピュータに正しく情報を伝えようね！って感じ

Webフロントエンジニアにとってとても大切な要素です！

なぜ、セマンティックなマークアップが必要なのか？

じゃあ、なぜセマンティックなマークアップが必要なのか。

ブラウザや、検索エンジンのクローラーや、スクリーンリーダー（音声読み上げブラウザ）といった、コンピュータのプログラムがHTMLの内容を機械的に読み取って解釈し、情報を伝えるということが日々行われているのです。
HTMLの役割の本質は、人だけでなくコンピュータに対しても情報を正しく伝えることであり、そのためには適切に意味づけされたセマンティックなマークアップが欠かせないのです。

引用元：Progateが教えてくれない、マークアップの考え方

コンピュータが理解できる言葉で適切に伝える事が重要で、それがSEO(検索エンジン最適化)やアクセシビリティに繋がっていくということになります。

ポイント

きちんと適切なタグと構造で書かれたHTML はコンピュータだけでなく、人間にもわかりやすくメンテナンスもしやすいなど、メリットまみれです！

下記におすすめ記事のリンクを貼っています！ぜひ読んで見てください！