语义化HTML是用具有明确含义的标签（如<header>、<nav>、<main>）表达内容结构，而非仅靠<div>堆砌；它提升可访问性、SEO效果和代码可维护性。

HTML结构设计不是“怎么写好看”，而是“怎么让浏览器、开发者、屏幕阅读器都一眼看懂你在表达什么”。核心就一条：用对语义化标签，别拿 <div> 当万能胶水。

用 <header>、<nav>、<main>、<footer> 替代一堆 <div class="header">

浏览器和辅助技术（比如读屏软件）靠这些标签识别页面逻辑区域。如果全用 <div> 套 <div>，等于主动屏蔽可访问性支持。

• <header> 只用于页面或 <section> 的头部，不是所有带标题的容器都该用它
• <nav> 必须包裹真正用于全局导航的链接，侧边栏里几个操作按钮不算
• <main> 在整个文档中只能出现一次，且不能嵌套在 <article> 或 <aside> 里
• 如果用了 <main>，就别再给它加 role="main" —— 属于重复声明，W3C 明确不推荐

<section> 和 <article> 别混用，关键看内容是否可独立分发

<section> 是逻辑分组，比如“产品介绍”“客户评价”；<article> 是能脱离当前页面独立存在的内容，比如一篇博客、一条新闻、一个用户评论。

• 博客列表页里每个帖子用 <article>，整个列表用 <section>
• “关于我们”页面里的“公司历史”“团队介绍”“愿景使命”适合用 <section>，因为它们共同构成一个完整主题，不可拆分发布
• 别为了“看起来像卡片”就给每个 <div> 加 <article> —— 没有独立 URL、没有发布时间、没被 RSS 抓取的内容，大概率不该用 <article>

class 名必须描述“它是什么”，而不是“它长什么样”

写 class="red-btn" 或 class="float-left" 看似省事，但一旦设计改版，这个 class 就成了技术债源头。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 按钮功能是“提交表单”，就叫 class="btn-submit"；是“删除项目”，就叫 class="btn-delete"
• 侧边栏区域叫 class="sidebar-navigation"，而不是 class="col-3" 或 class="right-panel"
• ID 应该唯一且稳定，只用于 JS hook 或锚点跳转，比如 id="contact-form"，别写成 id="form1"
• 所有 class 和 id 全小写，单词间用短横线（kebab-case），禁用下划线或驼峰

head 里几项元信息不能少，顺序也有讲究

很多团队把 <meta charset="utf-8"> 往后放，结果遇到中文乱码或 emoji 渲染失败，其实问题就出在这儿。

• <meta charset="utf-8"> 必须是 <head> 中第一个元素（除 <title> 外，但实际建议放在 <title> 前）
• <title> 必须存在，且应放在 <meta charset> 之后、其他 <meta> 之前
• 移动端必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 默认按 980px 渲染
• favicon 要用 <link rel="icon">，别只靠 /favicon.ico 自动发现 —— 现代浏览器已不保证兼容

最常被忽略的一点：语义化不是“多写几个新标签”，而是“删掉没必要的 <div>”。每加一层嵌套，都要问一句：这层有没有独立语义？能不能被屏幕阅读器感知？要不要出现在文档大纲里？