按语义功能分组记忆HTML5标签更高效：页面结构类（header/main/footer/nav）、内容组织类（article/section/aside）、内联功能类（time/mark/figure-details）；须区分section（需标题的主题区块）与article（可独立分发的内容）。
直接按语义功能分组记，比死背所有标签高效得多。重点掌握每类里最常用、浏览器支持稳定、实际开发高频出现的那几个。
页面整体结构类（宏观骨架）
这类标签定义网页最顶层的分区，一个页面通常只用1次，且有明确嵌套逻辑：
-
：页眉，放网站名、主导航、Logo；可出现在下，也可放在 或 内部当局部标题区 -
ain> ：页面唯一主体内容区，不能嵌套另一个，搜索引擎和辅助技术特别关注它 - ：页脚，放版权、联系方式、次要链接；同样可出现在页面级或文章级容器内
- ：专用于导航链接集合（如顶部菜单、侧边栏导航），不是所有链接都该放这里，仅限主要跳转路径
内容组织与语义区块类（中观分块）
它们不决定页面位置，而是表达内容的逻辑关系，对SEO和无障碍访问很关键：
- ：能独立存在、可被单独分发的内容块，比如一篇博客、一条新闻、一个论坛帖子；可嵌套自身（如评论作为子article）
-
：同一主题下的内容分组，必须有标题（
–
），比如“产品介绍”“用户评价”“技术参数”各为一个section
-
：与主内容相关但可分离的补充信息，如侧边栏广告、作者简介、延伸阅读；在
里用，表示该文的附属内容
内联语义与功能标签（微观表达）
这些不形成区块，但赋予文字特定含义或行为，替代纯
+class的模糊写法：
立即学习“前端免费学习笔记（深入）”；
- ：精确标记时间，datetime属性供机器读取，显示文本可自定义
- ：高亮标注关键词（如搜索结果中的匹配词），有默认黄色背景
-
& ：组合使用，包裹图片/图表+其标题，语义上表明图文一体关系 -
&：实现可折叠内容，点击summary展开details内部内容，原生支持，无需JS
别混淆的两个易错点
记牢区别，避免语义误用：
- 是无语义通用容器， 是有主题、需配标题的语义区块 —— 没标题就别用section
- 强调独立性（RSS可抓取、可转载）， 强调主题聚合（离不开上下文） —— 一篇教程里的“安装步骤”“配置说明”适合用section，整篇教程本身才是article
