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

公開日 : 2021.06.15 最終更新日 : 2022.10.05

コーディング

はじめに

こんにちは！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 や span など汎用的なものも存在しますが。

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

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

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

『コンピュータが理解できるような文書の意味づけを適切な<タグ> を用いてコードを記述する』事が、マークアップということになります。コンピュータに正しく情報を伝えようね！って感じですね。

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

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

ではなぜセマンティックなマークアップが必要なのか。

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

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

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

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

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