语义化标签是零基础学html必须跨过的首要门槛，因等标签自带含义，能提升可访问性、seo和代码可维护性，而仅是无意义容器，跳过语义化将导致后续css、js及无障碍调试反复踩坑。
零基础自学HTML，语义化标签不是“加分项”，而是你绕不开的第一道门槛——跳过它，后面学CSS布局、JS交互、甚至调试无障碍问题，都会反复踩坑。
为什么<header></header>比<div class="header">更值得优先学
<p>初学者常以为“能显示出来就行”，于是所有模块都用<code><div>堆砌。但真实开发中，浏览器和工具会基于语义标签做判断：比如<code><main></main>是页面唯一核心内容区，屏幕阅读器默认跳转到这里；而<div class="main">对机器来说只是个无意义的盒子。不学语义化，等于主动放弃调试可访问性、SEO预览、甚至DevTools结构树的直观性。
<p>实操建议：</p>
<ul><li>写第一个静态页时，强制自己只用<code><header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>这6个标签，禁用<div>（除嵌套在<code><article></article>内需分组时）
<main></main>没被识别为“main landmark”，说明漏写了或嵌套错了<header></header>→<nav></nav>→<main></main>→<footer></footer>顺序聚焦，这是语义结构正确的最简验证
<section></section>和<article></article>的区别，直接决定你能否读懂别人代码
很多教程说“<section></section>是区块，<article></article>是文章”，但零基础容易混淆：比如一个商品列表页，每个商品卡片该用哪个？答案是<article></article>——因为它能独立存在、可被RSS抓取、有自己完整的标题/时间/作者信息；而整个“热门商品”区域才是<section></section>。混淆会导致后续用CSS写article h2选择器时样式错乱，或JS遍历document.querySelectorAll('article')拿不到预期节点。
常见错误现象：
- 把整页内容包在一个
<section></section>里，结果搜索引擎认为“这页没有独立内容”，降权 - 在
<nav></nav>里用<section></section>包裹菜单项，其实<nav></nav>本身已是语义化导航容器，多余 -
<article></article>里又嵌套<section></section>没问题，但反过来——<section></section>里塞多个<article></article>才符合逻辑（如博客首页）
不写<main></main>会触发哪些真实报错
现代浏览器不会报错，但工具链会亮红灯：axe-core扫描提示“Page must have a main landmark”，Lighthouse SEO评分直接扣分，React/Vue项目里用react-aria等库做无障碍增强时，<main></main>缺失会导致焦点管理失效。更隐蔽的问题是：某些CSS重置样式（如Normalize.css）会给<main></main>设display: block，而<div>没这个保障，导致Flex/Grid布局在老版本Safari中错位。
<p>参数差异与兼容性注意：</p>
<ul>
<li>
<code><main></main>在整个文档中只能出现一次，重复会导致辅助技术混乱（不是警告，是行为异常）
<main></main>，但加一句document.createElement('main')就能兼容，没必要为它换回<div>
<li>别给<code><main></main>加role="main"——这是画蛇添足，HTML5已内置该role最容易被忽略的点：语义化不是贴标签，而是建关系。比如<nav></nav>必须包含链接，<aside></aside>里的内容得和相邻<article></article>或<section></section>有关联性。写完检查一遍“删掉所有CSS后，仅靠标签名能否复述出页面逻辑？”——通不过，就还没真正入门。
