语义化开发要求标签名准确传达内容角色，HTML5语义标签是结构骨架而非装饰；header、nav、main、article、aside各有严格适用边界；class/id命名须聚焦功能而非样式，统一用小写kebab-case。
语义化开发的核心，是让标签名本身就能准确传达内容的角色和功能，而不是靠注释或上下文去猜。HTML5 提供的语义标签不是“可选装饰”，而是结构骨架——用对了，SEO、可访问性、团队协作和后期维护都会自然受益。
哪些标签必须按角色使用，不能混用
每个语义标签有明确的适用边界，强行套用会破坏文档大纲（outline）和辅助技术识别：
- header：仅用于页面或区块的“介绍性内容”，比如网站标题、logo、主导航入口；它不等于“顶部固定栏”或“所有带标题的容器”
- nav：只包裹**主导航链接集合**，如顶部菜单、侧边全局导航；页脚的“关于我们”“联系方式”链接不属于 nav，应放在 footer 内普通 ul 中
- main：页面中与当前主题**直接相关、唯一、不可重复**的核心内容区域；一个页面只能有一个 main，且不能嵌套在 article 或 aside 内
- article：表示**独立、可分发、可复用的内容单元**，如博客文章、新闻条目、用户评论；它自带隐含的章节语义，内部应有 h1–h6 标题
- aside：内容与主文**相关但非必需**，比如侧边广告、作者简介、延伸阅读；若完全无关（如全站公告），更适合用 section + heading
class 和 id 命名要“说清它是谁”，而不是“它长什么样”
命名不是为了方便写 CSS，而是为了让人一眼看懂这个元素在业务逻辑中的身份：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- ✅ 推荐：
class="search-form"、id="user-profile-edit"、class="product-card__price"（BEM 风格）——聚焦功能、模块、层级 - ❌ 避免：
class="red-btn"、id="div3"、class="float-left"——样式变更后名不副实，且无法支撑组件化演进 - id 必须全局唯一，且只用于锚点跳转（
#contact）或 JS 精确控制（如单个弹窗、表单验证节点），不应用于样式选择器主体
命名格式统一用 kebab-case，禁用其他风格
连字符（-）是 HTML/CSS/JS 全链路最稳妥的分隔方式：
立即学习“前端免费学习笔记（深入）”；
- 正确：
class="sidebar-nav"、id="order-summary"、class="btn--primary" - 错误：
sidebar_nav（下划线在旧版 IE 中有兼容风险）、sidebarNav（驼峰易与 JS 变量混淆）、sidebarNav（大小写混用导致选择器失效） - 所有 class/id 名必须小写开头，不能数字开头，不包含空格、中文、特殊符号
结构命名要与语义标签协同，而非覆盖其本意
语义标签定义“是什么”，class 定义“属于哪个模块、处于什么状态”：
- 用
<nav class="main-nav"></nav>表明这是主导航模块，而非<div class="nav"> ——后者放弃语义，又没提供额外信息 <li>用 <code><article class="news-item"></article>强化内容类型，同时为样式和 JS 提供稳定钩子 - 避免冗余命名，比如
<header class="header"></header>或<footer class="footer"></footer>——标签本身已足够语义，class 应补充差异点（如"site-header"或"post-footer"）
