语义化html是用具有明确含义的标签（如、、）表达内容结构，而非仅靠堆砌；它提升可访问性、seo效果和代码可维护性。
HTML结构设计不是“怎么写好看”，而是“怎么让浏览器、开发者、屏幕阅读器都一眼看懂你在表达什么”。核心就一条：用对语义化标签，别拿 <div> 当万能胶水。
<h3>用 <code><header></header>、<nav></nav>、<main></main>、<footer></footer> 替代一堆 <div class="header">
<p>浏览器和辅助技术（比如读屏软件）靠这些标签识别页面逻辑区域。如果全用 <code><div> 套 <code><div>，等于主动屏蔽可访问性支持。
<ul>
<li>
<code><header></header> 只用于页面或 <section></section> 的头部，不是所有带标题的容器都该用它
<nav></nav> 必须包裹真正用于全局导航的链接，侧边栏里几个操作按钮不算<main></main> 在整个文档中只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里<main></main>，就别再给它加 role="main" —— 属于重复声明，W3C 明确不推荐
<section></section> 和 <article></article> 别混用，关键看内容是否可独立分发
<section></section> 是逻辑分组，比如“产品介绍”“客户评价”；<article></article> 是能脱离当前页面独立存在的内容，比如一篇博客、一条新闻、一个用户评论。
- 博客列表页里每个帖子用
<article></article>，整个列表用<section></section> - “关于我们”页面里的“公司历史”“团队介绍”“愿景使命”适合用
<section></section>，因为它们共同构成一个完整主题，不可拆分发布 - 别为了“看起来像卡片”就给每个
<div> 加 <code><article></article>—— 没有独立 URL、没有发布时间、没被 RSS 抓取的内容，大概率不该用<article></article>class 名必须描述“它是什么”，而不是“它长什么样”
写
class="red-btn"或class="float-left"看似省事，但一旦设计改版，这个 class 就成了技术债源头。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮功能是“提交表单”，就叫
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">必须是中第一个元素（除<title></title>外，但实际建议放在<title></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>”。每加一层嵌套，都要问一句：这层有没有独立语义？能不能被屏幕阅读器感知？要不要出现在文档大纲里？</div> - 按钮功能是“提交表单”，就叫
