こんにちは。
普段WEBディレクター兼マークアップエンジニアをしている佐藤です。

当ブログでの連載をすることになりました。
私のプロフィールは以前にWANTEDLYに記載したのでそちらも併せてご覧ください。

• ■プロフィール
• 氏名：佐藤明義
• 年齢：27歳
• 経歴：数学修士号取得後、2017年に新卒でSAKURUGにジョイン。
• ジョイン後は、営業⇒社内SE⇒WEBディレクターと様々な範囲を担当させていただきました！
  その他、新人研修、高校生向けインターンシップの企画運営、SDGs社内周知活動、社内ツール選定、 人事評価制度設定など社会に少しでも貢献したいという思いから活動の幅を広げております。

概念

セマンティクス（semantics）とは「意味論」という意味です。
HTMLにはそれぞれ意味を持ったタグで構成されます。
それを正しく使いましょうといったのがセマンティックなHTMLであると私は解釈してます。

さて、ここで一つ疑問です。
「正しいマークアップ」の定義は何でしょうか。
それはWHATWGという組織が発行している「HTML Living Standard」にまとめられています。
他にW3Cという組織もあるのですが、少し前に両者のドキュメントの矛盾点などがあってどちらが優先されるべきか議論もありました。
現在のHTML5は上記の「HTML Living Standard」を優先することが合意されてます。

※参考：https://www.w3.org/blog/news/archives/7753

divタグやspanタグを使ってスタイルをつけていくことで表示上で見出しのように見せることもできます。
しかし、HTMLは人間だけでなく機械も読んでもらうことを前提として記述されます。

利点

Mozilla社が提供するドキュメントにセマンティックなマークアップの利点として下記のようにまとめられています。

検索エンジンが内容を重要なキーワードとして理解し、
ページの検索ランキングを上げる (SEO を参照)
読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々とdivの中を検索するより明らかに簡単である
開発者に目立たせるデータの種類を提案することができる
セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する

ランキング上位を狙う必要ないよという方も一定数はいるでしょう。
その場合でも、「WEBのアクセシビリティ」の観点からどんな方でも適切に情報が受け取れるように構築すべきです。
この「アクセシビリティ」は追求すればマークアップの難易度も上がってくるのでまた別の機会にお話することにします。

例

標準仕様では推奨されないマークアップなどの記述もあるのでHTMLを使用するものは目を通すべきでしょう。
セマンティックなマークアップをする上での注意点を示す具体例をいくつか紹介します。

<article>
  <h1>セマンティックなマークアップについて</h1>
  <p>.....</p>
  <section>
<h2>概要</h2>
<p>...</p>
  </section>
  <section>
<h2>利点</h2>
<p>...</p>
  </section>
  <section>
<h2>例</h2>
<p>...</p>
  </section>
</article>

<h2>Profile</h2>
<dl>
  <dt>name</dt>
  <dd>sato</dd>
  <dt>age</dt>
  <dd>27</dd>
  <dt>career</dt>
  <dd>...</dd>
</dl>

<main>メインコンテンツです</main>  
<main hidden>ここは非表示１</main>  
<main hidden>ここは非表示２</main>