htmlは見た目だけ整えれば良い訳では無いという話

htmlを学んでいる中でアクセシビリティとセマンティクスについて学んだのでメモ。
参考URLは下記。

メモ：このようなドキュメントは往々にして冗長であり、読むのに少々時間がかかることが多い。

セマンティクス

セマンティクス (semantics)：「意味論」
すなわち、見た目だけ整った「ぐちゃぐちゃな」コード（スパゲティコード）では、下記点から不利である。

開発しにくい
buttonで囲むべきところをdivで囲んでしまうと、本来htmlで得られるbuttonの機能を失ってしまう。
javascript等でdivにbuttonの機能を強制的に付与することは可能だが、ページの読み込み・動作を遅延させるだけであり、スマートなコードとは言えない。
モバイル機器へのアクセシビリティ
セマンティックに書かれたコードはファイルサイズの点でほぼ間違いなく軽量、レスポンシブにするのも簡単。
SEO
検索エンジンのクローラーは、非意味的なdivなどに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせてデータ収集している。
よって、セマンティックに書くことでドキュメントがより顧客に見つけてもらいやすくなる。

セマンティックに書く（実例）

セマンティックに書かない場合

index.html

<!-- セマンティックに書かない場合 -->
<div class="article">
    <h1 class = "section-title">セマンティックに書く事の優位性</h1>
    <p>～～本文～～</p>
    <h1 class = "section-title">セマンティックに書かないと…？</h1>
    <p>～～本文～～</p>
</div>

セマンティックに書く場合(HTML5)

index.html

<!-- セマンティックに書く場合 -->
<article>
    <section>
    <h1 class = "title">セマンティックに書く事の優位性</h1>
    <p>～～本文～～</p>
    </section>

    <section>
    <h1 class = "title">セマンティックに書かないと…？</h1>
    <p>～～本文～～</p>
    </section>
</article>

ここで使用したarticleとsectionについては下記URLが詳しい。

https://www.cyber-bridge.jp/cbmedia/webdesign/html-article-section/
https://web-camp.io/magazine/archives/85309

下記ドキュメントもあるが、若干わかりづらい

https://developer.mozilla.org/ja/docs/Web/HTML/Element/article