HTML语义化标签的核心价值在于向机器与人明确传达内容结构与用途：header、nav、main、article、footer等标签自带语义，使搜索引擎、屏幕阅读器和开发者无需依赖类名即可准确理解页面骨架，而div加class仅是视觉容器，缺乏机器可读性。
HTML语义化标签不是“更好看的写法”，而是让浏览器、搜索引擎和屏幕阅读器能直接读懂你这段内容是干什么用的。
为什么 <header> 比 <div class="header"> 更有用
两者在页面上渲染效果可能完全一样，但<header>自带结构含义：它明确告诉解析器“这是页面或区块的头部区域”，而<div class="header">只是个无意义的容器，必须靠CSS类名“猜”用途。
- 搜索引擎爬虫会把
<header>里的<h1>当作整页最高优先级标题，但对<div class="header">里的<h1>可能降权处理 - 盲人用户用屏幕阅读器时，可直接按
<header>快捷键跳转；<div class="header">需要开发者额外加role="banner"才勉强等效 - 团队协作中，新人看到
<main>立刻知道这是主体内容区，不用翻CSS或JS去查class="content-wrapper"到底包了啥
<article> 和 <section> 别乱换着用
这两个最容易混淆：它们都表示“一块内容”，但语义完全不同。
-
<article>必须是能独立存在、可被单独分发的内容单元，比如一篇博客、一条新闻、一个微博帖子——复制粘贴到别处仍成立 -
<section>是文档内部的逻辑分组，比如“产品介绍”“客户评价”“技术参数”，它本身不独立，依赖上下文才有意义 - 错误示例：
<section><h2>关于我们</h2><p>我们成立于2020年...</p></section>合理；但把整篇公司介绍包进<article>就错了——它不是可订阅/可转载的独立内容
哪些标签看似语义化，其实常被误用
HTML5新增了不少标签，但不是所有场景都适用，硬套反而破坏语义。
立即学习“前端免费学习笔记（深入）”；
-
<aside>不等于“右边栏”。它表示与主内容相关但可分离的补充信息，比如侧边引用、术语解释、作者简介；广告位或无关推荐不能用它 -
<nav>专指主要导航链接集合（如顶部菜单、页脚链接组），面包屑导航、文章内跳转锚点、分页控件都不算 -
<footer>是其父元素的尾部，不是整个页面底部。一个<article>可以有自己的<footer>（比如发布时间+作者），不必只出现在<body>最底下
真正难的不是记住标签名，而是每次写标签前问一句：“如果去掉所有CSS，仅靠这个标签名，机器和人都能准确说出这块内容在干嘛吗？” 这个判断过程比语法本身更关键。
