Semantic HTML nghĩa là dùng các element mô tả ý nghĩa nội dung của chúng, chứ không chỉ vẻ ngoài. Một <nav> nói "đây là phần điều hướng"; một <button> nói "đây là thứ có thể click" — trong khi một <div> không nói lên điều gì cả.
Home
Home
Cả hai có thể được style giống hệt nhau, nhưng chỉ cái thứ hai mới được hiểu bởi trình duyệt, screen reader và công cụ tìm kiếm.
<header>, <nav>, <main>, <footer>, cho phép người dùng nhảy giữa các vùng. Một mớ <div> thì không cho họ gì cả.<h1>, <article>, <main> và hiểu được cấu trúc trang.<button> có thể nhận focus, kích hoạt được bằng bàn phím (Enter/Space) và được thông báo là một button — một <div onclick> không có gì trong số đó trừ khi bạn tự thêm lại tất cả bằng tay.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Nguyên tắc cơ bản: chọn element có ý nghĩa đúng với ý định của bạn, và chỉ dùng <div>/<span> làm container để style khi không có semantic element nào phù hợp.
Đó là cách dễ nhất để cải thiện accessibility và SEO mà bạn có thể làm.