语义化标签的核心价值在于明确代码边界与职责，提升可维护性；通过使用<header><main><nav>等标签替代div、规范lang属性、按内容本质选标签、严格区分id/class用途，可降低协作成本、增强可访问性并支持自动化校验。
用对语义化标签，不是为了“看起来更规范”，而是让每次改代码都有明确边界、每次加功能都有清晰入口。维护成本高，往往不是因为代码多，而是因为结构模糊、职责不清、改一处牵全身。
用语义标签代替 div + class 做结构划分
把 <div class="header"> 换成 <header>，把 <div id="main-content"> 换成 <main>，这不是文字游戏——它直接锁定了元素的用途和作用域：
-
浏览器和辅助技术能自动识别角色，比如屏幕阅读器会把
<nav>当作导航区跳过，<main>是唯一可设为“主区域”的标签，误用会导致逻辑混乱 - 团队协作时无需再猜“这个 div 到底是 header 还是 banner”，命名冲突、重复定义、样式覆盖等问题大幅减少
-
工具链能做语义校验：htmlhint 可配置规则禁止
<main>出现多次，axe-cli 能报出<section>缺少标题（<h2>及以上）的问题，提前拦截结构缺陷
每个含文本的语义标签都显式声明 lang 属性
只在 <html lang="zh-Hans"> 上设语言，对实际文本渲染和翻译毫无作用。浏览器、屏幕阅读器、字体回退机制，全靠每个元素自身的 lang 属性判断：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<h1 lang="zh-Hans">产品介绍</h1>和<p lang="en">Version 2.4 released</p>可共存，标点间距、语音朗读、字体切换各自生效 -
<pre lang="bash">、<code lang="sql">等保留原值，属于合法混排；但<img alt="用户头像" lang="zh-Hans">必须补上，否则 i18n 工具无法定位替换 - 动态插入的 DOM（如弹窗、分页新行）必须手动触发翻译函数，不能依赖初始加载——因为
data-i18n只是标记，不是执行指令
按内容本质选标签，不按视觉效果套用
语义化不是“把 div 换成 section 就完事”，关键看内容是否满足该标签的 W3C 定义：
立即学习“前端免费学习笔记（深入）”；
-
<article>用于独立、完整、可分发的内容（如一篇博客、一条评论），它应有自己完整的标题、作者、时间，脱离页面也能被理解 -
<aside>不等于“侧边栏”，而是与当前上下文相关但可独立存在的补充信息（如术语解释、引用来源），放在<main>内或外都合理 -
<figure> + <figcaption>专用于媒体及其说明，且<figcaption>必须是其第一个或最后一个子元素，这是机器可解析的图文关系 - 避免
<section>套<section>再套<section>：没有标题的嵌套<section>会让结构失去意义，不如用<div>更诚实
id 和 class 的使用必须严格区分场景
语义化不只是标签的事，属性同样承担结构责任：
-
id全局唯一，仅用于锚点跳转、<label for="...">关联表单控件、<fieldset>分组等有明确 DOM 交互需求的场景 -
class必须语义化命名，如search-input、user-avatar、error-message，禁用red-box、left-col等纯样式或布局描述 - 所有 class 名需在项目级命名规范中登记，确保新增组件时可查、可溯、可复用，避免“三个按钮用四个 class”导致样式断裂
