语义化 HTML 是指使用能描述其内容含义的元素，而不仅仅描述其外观。<nav> 表示"这是导航"；<button> 表示"这是可点击的"——而 <div> 什么也不表示。
html
Home
Home
两者可以拥有完全相同的样式，但只有第二种能被浏览器、屏幕阅读器和搜索引擎理解。
<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 优化。