セマンティックHTML とは、見た目ではなく、コンテンツの意味を説明する要素を使用することです。<nav> は「これはナビゲーション」と言い、<button> は「これはクリック可能」と言う — 一方、<div> は何も言いません。
html
Home
Home
両方を同じようにスタイルすることはできますが、ブラウザ、スクリーンリーダー、検索エンジンが理解できるのは2番目のものだけです。
<header>、<nav>、<main>、<footer> からランドマークマップを構築し、ユーザーがリージョン間をジャンプできるようにします。<div> の塊はユーザーに何も提供しません。<h1>、<article>、<main> のコンテンツに重み付けし、ページ構造を理解します。<button> はフォーカス可能、キーボード操作可能（Enter/Space）、ボタンとしてアナウンスされます — <div onclick> は、すべてを手動で再度追加しない限り、これらのいずれでもありません。<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
経験則：意図を表す要素を選びなさい、そしてセマンティック要素が当てはまらない場合にのみ、スタイリングコンテナとして <div>/<span> を使用してください。
これはあなたが得られるアクセシビリティとSEOの最も安い改善です。