HTML5语义标签的核心是让内容被机器与人共同理解：header、nav、main、article、section、aside、footer各司其职，须严格遵循嵌套规则与使用场景，配合标题层级、time、alt等细节才完整。
HTML5结构标签不是为了“好看”，而是为了让页面真正“被理解”——浏览器、搜索引擎、屏幕阅读器和开发者，都能一眼看懂哪部分是导航、哪部分是正文、哪部分是补充信息。用对标签，比写对样式更关键。
核心语义标签各司其职
每个标签都有不可替代的逻辑角色，不能凭感觉替换：
- <header>：表示一个“区块的头部”，可以出现在页面顶部，也可以出现在每篇<article>里（比如文章标题+作者+时间）；一个页面可有多个，但每个都应与其父容器内容直接相关。
- <nav>：只包裹真正起导航跳转作用的链接集合；按钮、图标、搜索框若不提供页面级导航，就不该放进<nav>。
- <main>：全页唯一，且不能嵌套在<article>、<aside>、<header>、<nav>或<footer>内部；它是整个文档中“用户最想看的内容”的容器。
- <article>：用于能独立存在、可被单独分发或复用的内容，如博客正文、新闻条目、论坛帖子；它自带隐含的语义边界。
- <section>：按主题组织的一组内容，比如“产品介绍”“客户评价”“技术参数”，需配有标题（h1–h6），否则语义不完整。
- <aside>：与主内容相关但非核心的旁注信息，如侧边栏推荐、作者简介、术语解释；不是所有“在右边的东西”都叫aside。
- <footer>：对应其父元素的尾部，可以是页面级页脚，也可以是某篇文章底部的版权或评论入口。
基础页面骨架要稳
从外到内、按内容流顺序搭建，避免靠CSS强行“挪位置”：
- 第一行必须是
<!DOCTYPE html>，且<html>带lang属性（如lang="zh-CN"）； - <body>内按自然阅读顺序排列：
<header>→<nav>→<main>→<aside>（如有）→<footer>； - <nav>可放在<header>内部（常见于顶部主导航），也可独立存在（如文章内目录）；
- <main>内部不要直接堆砌段落，而应根据内容粒度使用<article>或<section>进一步分组。
嵌套规则不能踩坑
语义层级错乱会削弱标签价值，甚至影响无障碍支持：
立即学习“前端免费学习笔记（深入）”；
- <main>绝不能作为<article>或<aside>的子元素；两者是同级关系，不是包含关系；
- <header>和<footer>可以多层出现，但每层都要有明确归属——例如<article>里的<header>描述的是这篇文章，不是整个网页；
- 避免连续四层以上语义标签嵌套（如<main> <section> <article> <section>），会让结构难读、维护困难；
- 所有语义标签必须严格闭合，不用自闭合写法（如
<header />是无效的）。
配合其他语义细节才完整
结构标签只是起点，搭配细节才能真正“会说话”：
- 每页确保只有一个<h1>（通常在<main>或首篇<article>中），用<h2>–<h6>体现内容层级；
- 日期用<time datetime="YYYY-MM-DD">2024年5月20日</time>，让机器可解析；
- 图片必须带
alt属性，图标类图片可为空（alt=""），但不能省略； - 能用<button>实现交互，就别用<div onclick>；能用<input type="email">，就别用普通<input>。
