HTML5标签核心实战指南：语义化、SEO与兼容性全解析

HTML5标签这块内容，每隔一阵子就会有人问我“到底怎么学才不算白学”，而前端面试题里也总爱拿语义化、标签兼容性、meta属性这些点做文章。我做了这么多年前端，早期也经历过“满屏div+class”的时期，后来项目越做越多，才意识到HTML5标签根本不是“把div换成header”这种表面功夫，它牵涉到信息架构、可访问性、SEO、性能优化，甚至组件库设计。这篇我会把自己在实际项目中用到的标签知识、踩过的兼容性坑、以及在面试里常被问到的底层逻辑一次性梳理清楚，内容偏实战，适合刚入门的前端新人，也适合打算系统复盘标签体系的开发者。

1. 从div堆砌到语义化标签：先把信息架构搞对

1.1 语义化标签真的重要吗：SEO、无障碍和面试的三重考量

先抛一个我经常在团队评审时问的问题：你写<div id="header">和写<header>，对浏览器渲染结果来说，视觉上几乎没有任何区别。那为什么还要费劲用语义化标签？

答案在于“信息可以被机器理解”。搜索引擎爬虫、屏幕阅读器、浏览器插件，它们不靠class猜语义，而是靠标签本身。<header>、<nav>、<main>、<article>这些标签直接把页面结构暴露给了外部代理，让搜索引擎能更准确地提取正文和导航区域，这对SEO的权重判定是有实际影响的。无障碍方面，screen reader用户可以通过Landmark导航直接跳转到main区域，省去逐字朗读的煎熬。这一点在国内前端团队里经常被忽略，但如果你们的产品有海外市场或者对接过无障碍合规要求，这个坑迟早要补。

另外，前端面试里“谈谈语义化标签的理解”属于经典送分题，但很多人答成了名词解释。我会建议从三个层面答：对SEO的友好、对可访问性的提升、以及对代码可读性和维护性的改善。如果你还能顺手提到<hgroup>已被废弃、<main>只能出现一次、<aside>用于侧边栏但也能表示与主内容弱相关的补充信息，那面试官基本会认为你是真写过代码的。

1.2 内容型标签实操：header/nav/main/article/section/aside/footer怎么用才不犯错

这些标签大家每天写，但真到结构设计时经常出问题。我总结了一套自己的判断标准：

• <header>代表引导性内容，并不一定出现在页面最顶部。一个<article>内部也可以有自己的<header>，用作文章标题区。
• <nav>只放“主要导航”，不要把页脚里所有友情链接都塞进去。判断标准很简单：这段链接是否承担了站点核心导航功能，如果不是，用<ul>加普通链接就行。
• <main>在一个页面里只能出现一次，且不能放在<article>、<aside>、<header>、<footer>等标签内部。
• <article>是一个完整独立的内容块，比如一篇帖子、一条评论、一篇文章。判断标准：把它单独抽出来放到另一个页面，内容是否仍然自洽。
• <section>是带有主题的分区，通常需要有一个标题（heading）。如果只是为了样式方便而切开，那它不配叫section。
• <aside>表示与主内容只有间接关系的部分，比如侧边栏、广告位、相关阅读。
• <footer>和header同理，不一定是页面最底部，article内部也可以有自己的footer，放作者信息、发布时间、标签列表。

现在很多团队做活动页，整页都是section套div又套section，看起来“用了语义化”，实际上爬虫根本分不清主次。我的习惯是：先画信息架构图，标清楚每个区块的“独立性”和“与主内容的关系”，再动手写标签。这样做出来的页面，即使后面换框架重构，结构迁移成本也会低很多。

1.3 文本级标签盘点：从strong到mark到time的细节

文本级标签看起来简单，但有几个细节很容易翻车。<strong>表示内容重要性，<b>只是视觉加粗；<em>表示强调，<i>只是斜体。单看差别不大，可一旦涉及屏幕阅读器，<strong>和<em>会被以不同的语气朗读，而<b>和<i>不会。所以纯装饰性的样式，尽量用CSS或<b>/<i>，不要用语义标签。

<mark>标签表示“被标记/高亮”的内容，比如搜索结果里的关键词高亮。它默认带黄色背景，但实际项目里一般会覆盖样式。这里有个细节：如果页面做的是搜索词高亮，<mark>会比<span class="highlight">更合适，因为屏幕阅读器会读到“mark”的语义，辅助理解当前内容是被标记的。

<time>标签值得单独说。它有一个datetime属性，机器真正读取的是这个属性值，标签内的文字只是给人看的展示文本。比如<time datetime="2026-03-15">3月15日</time>，爬虫就知道这个“3月15日”是个明确的日期，而不是一句普通文本。很多博客平台的文章发布时间区域没做这个处理，导致搜索引擎无法精准识别文章的发布时间，这在时效性内容（比如技术教程、新闻稿）里是很可惜的。

2. 表单标签：前端开发里最容易踩坑的重灾区

2.1 input类型那么多，你真正用对过的有几个

HTML5为<input>新增了一批类型，比如email、url、tel、number、range、date、time、color、search。这些类型最大的价值不是自带样式，而是两件事：一是移动端能弹出正确的键盘，二是浏览器内置了基础校验。

举个例子，<input type="tel">在iOS上会弹出纯数字拨号键盘，如果用text替代，用户输号码时就得手动切换键盘模式，流失率马上就上来了。<input type="email">在PC端Ch