HTML5语义化标签提升网页结构清晰度，header、footer定义页眉页脚，nav用于主导航，main标识唯一主体内容，article包裹独立内容，section划分主题区块，aside表示侧边信息，figure与figcaption实现图文语义化组合，合理使用有助于可读性、可维护性及无障碍访问。
HTML语义化标签让网页结构更清晰，提升可读性、可维护性和无障碍访问能力。HTML5引入了多个语义化标签，帮助开发者明确页面不同部分的用途，而不是依赖无意义的div。下面解析常用语义化标签及其使用场景。
header 和 footer：定义页眉与页脚
这两个标签用于标识页面或区块的头部和尾部信息。
- header 通常包含网站标题、导航菜单、搜索框等顶部内容，可用于整个页面，也可用于文章或章节的头部。
- footer 常见于页面底部，放置版权信息、联系方式、相关链接等，也可用在文章末尾标注作者或发布时间。
注意：header 和 footer 可在一个页面中多次出现，比如每个 article 都可以有自己的 header 和 footer。
nav：定义主导航区域
专门用于包裹主要的导航链接组。
立即学习“前端免费学习笔记（深入）”；
- 适合放置网站主导航栏、侧边栏导航、分页链接等。
- 不是所有链接都需要放在 nav 中，仅用于主要导航区域。
- 屏幕阅读器可通过 nav 快速跳转到导航区，提升无障碍体验。
main：标识页面核心内容
main 标签代表页面主体内容，且每个页面只能有一个。
- 包含对当前页面唯一且核心的信息，如文章正文、产品列表等。
- 不应包含导航、页眉、页脚、版权信息等重复内容。
- 配合 ARIA 角色使用，能进一步提升辅助技术识别能力。
article 与 section：组织独立内容模块
两者都用于划分内容区块，但语义略有不同。
eMart 网店系统
下载
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
- article 表示可独立分发的内容，如博客文章、新闻条目、用户评论等，可被聚合、复用。
- section 更强调“章节”概念，用于主题上相关的区块划分，比如文章中的不同小节。
- 一个 article 内可包含多个 section，反之则不常见。
例如，一个新闻页面可以用 article 包裹整篇报道，内部用 section 分为引言、正文、结语。
aside：表示侧边内容或附加信息
aside 用于与主内容相关但可独立存在的旁注或补充内容。
- 常见于侧边栏，如广告、作者简介、相关文章推荐等。
- 也可嵌入在 article 中，表示引用来源或术语解释。
- 内容应与上下文有关联，不能是完全无关的堆砌。
figure 与 figcaption：图文组合语义化
用于标记插图、图表、代码片段等内容，并提供说明文字。
- figure 包裹图像、图表、视频等媒体元素。
- figcaption 作为其子元素，提供标题或描述，可置于顶部或底部。
- 即使图片有 alt 属性，figcaption 仍可用于补充上下文信息。
例如，在技术文档中展示一段代码示例时，可用 figure 包裹代码块，用 figcaption 注明功能说明。
基本上就这些。合理使用HTML5语义化标签，不仅让代码更易理解，也利于SEO和无障碍访问，是现代前端开发的基本要求。
