HTML是网页内容的结构语言，每个标签声明内容角色而非充当容器，如<h1>表主标题、<nav>表导航、<article>表独立内容单元，语义化确保机器可读、SEO有效与无障碍可用。
HTML 不是“网页内容架构的规范”，它本身就是网页内容的结构语言——用标签表达内容角色，而不是定义抽象架构。
HTML 标签不是容器，是语义声明
很多人误把 <div> 当成“架构单元”，但 HTML 的真实逻辑是：每个标签回答“这段内容在文档中扮演什么角色”。比如 <h1> 表示主标题，<nav> 表示导航区块，<article> 表示独立内容单元。浏览器和搜索引擎靠这些标签理解页面意图，而不是靠嵌套深度或 class 名称。
常见错误现象：
- 全页只用
<div>套<div>，再靠 CSS 强行模拟标题、段落、列表 - 把
<section>当作“视觉分块”用，实际它要求内部必须有标题（<h2>或更高级）才合法 - 在
<header>里塞广告 Banner，违背其“介绍本页/本节”的语义
HTML5 语义化标签比 class 更可靠
用 <main>、<aside>、<footer> 替代 class="main"、class="sidebar"，不只是为了“好看”，而是因为：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器能直接跳转到
<main>，盲人用户不用听完整页 DOM - 搜索引擎对
<article>内容赋予更高权重，尤其当它有<time>和<header>时 -
<picture>+<source>比 JS 判断设备再换图更轻量、更可缓存
注意：<section> 和 <div> 不是性能差异问题，而是语义缺失会导致 SEO 工具报错 “Missing heading for section”。
lang 属性和 charset 不是可选项，是基础可用性门槛
<html lang="zh-CN"> 和 <meta charset="UTF-8"> 看似简单，但漏掉会立刻触发实际问题：
- 中文乱码：服务端返回 UTF-8 字节流，但没声明 charset，Chrome 可能按 ISO-8859-1 解析，显示成
- 语音合成错误：TTS 引擎读英文单词时用中文音调，因为
lang缺失或写成lang="en"却混着中文 - 自动翻译失效：Google Translate 不敢对无
lang的页面做整页翻译，怕误判语种
真实场景中，lang 必须精确到子区域（如 zh-HK 和 zh-TW 字体渲染不同），不能笼统写 zh。
最容易被忽略的是：HTML 的语义不是“写完再加”，而是一开始就要选对标签。比如一个按钮功能，该用 <button> 就别用 <div onclick> —— 后者连空格键触发都得自己补，键盘焦点管理也得重写。
