<figure>-媒体内容组合

HTML5的figure标签是用于包裹独立媒体内容及其标题的语义化容器 典型应用包括图片代码视频和图表等内容展示 基本结构由媒体元素和可选的figcaption标题组成 支持多内容组合与响应式设计 通过CSS可以自定义样式和布局 JavaScript可实现交互功能 强调无障碍访问需注意alt文本和键盘导航 相比div等通用容器更具语义优势 有利于SEO优化和阅读器识别 所有现代浏览器均良好支持 对于旧版IE需添加特定CSS声明 实际应用场景涵盖博客插图和产品展示等 语义化特性使其成为结构化媒体内容的理想选择

<aside>-侧边内容

HTML5的aside标签是语义化标签用于定义页面非主要内容通常表现为侧边栏或补充内容它适合展示广告引用注释等辅助信息基本用法是双标签包裹文本图像等元素需CSS自定义样式核心价值在于语义化明确标识与主内容相关但独立的部分典型应用场景包括侧边栏导航文章附加信息和广告区域布局实现依赖CSS可通过flex等方案创建响应式设计需注意与div的语义区别应优先使用aside提升可访问性建议配合aria属性使用浏览器兼容性良好现代浏览器均支持可与其他语义标签如mainarticle等协同使用打印时可隐藏非必要内容

<section>-文档章节

HTML5的section标签是语义化标签用于定义文档中的独立章节或区块包含相关内容如文章章节或功能模块与div不同section具有明确语义提升可读性和SEO效果基本用法是将内容包裹在section标签内通常搭配标题使用section适合划分逻辑独立的内容区块与article不同article用于完整独立内容section用于文档章节section可嵌套使用表达复杂结构适用于文章章节功能区块或标签页等内容使用时避免滥用需搭配标题不要替代article可通过CSS自定义样式其语义化特性有助于提升可访问性可结合ARIA属性进一步优化

<article>-独立内容块

HTML5的article标签用于定义独立自包含的内容块如新闻文章或博客帖子其内容脱离上下文仍能保持完整性与通用容器div不同它具有明确的语义价值适合增强文档结构和可访问性article内部可包含多个section并支持嵌套使用如评论回复场景每个article应包含标题元素以提升可访问性实际应用包括新闻聚合页面和电商产品列表结合Schemaorg标记可优化SEO效果动态内容加载时可通过JavaScript插入article元素浏览器默认将其渲染为块级元素响应式设计中可与CSSGrid配合使用也可作为Web组件ShadowDOM的容器使用article标签能有效提升网页语义化和机器可读性

<main>-文档主要内容

HTML5的main标签用于定义文档主要内容帮助识别页面核心提升无障碍访问每个文档应只有一个main标签不应嵌套在article等标签内它与body不同仅聚焦核心内容常与article等标签配合使用在博客电商等场景有实际应用需要注意无障碍访问如添加跳过链接浏览器兼容性良好旧版IE需polyfill可通过JavaScript动态更新内容默认是块级元素可进行样式化在ReactVue等框架中也有特定使用方式

<nav>-导航链接

HTML5的nav标签是专门用于定义导航链接的语义化标签它能提升网页可访问性和SEO效果nav通常包含主导航菜单面包屑导航或页脚导航等基本用法是在nav内放置无序列表或直接链接与传统div实现相比nav具有更强的语义价值使用时应注意主要导航场景避免过度使用增强可访问性可通过ARIA标签和键盘导航支持响应式设计可结合汉堡菜单实现移动端适配高级用法包括下拉菜单和粘性导航栏需注意避免嵌套过深和忽略无障碍等常见错误所有现代浏览器都支持nav标签性能优化可减少DOM节点和使用CSS精灵图SEO方面建议使用结构化数据和描述性链接文本实际案例展示了电商网站和单页应用的导航实现方式

<footer>-页脚或区块尾

HTML5中的footer标签用于定义文档或区块尾部包含版权信息作者信息联系方式等内容它既能提升代码可读性又能帮助搜索引擎理解页面结构footer可以出现在bodyarticle等标签内作用域取决于位置直接放在body内表示整个文档页脚嵌套在其他标签内则表示该部分页脚常见内容包括版权信息联系方式和相关链接等通过CSS可以自定义样式设计SEO方面应避免关键词堆砌保持链接相关性可添加结构化数据增强语义在SPA中需特殊处理确保位置正确浏览器兼容性良好所有现代浏览器均支持创意用法包括作为模态框底部或卡片组件底部还可为打印页面优化显示

<header>-页眉或区块头

HTML5的header标签是语义化标签用于定义文档或区块的页眉部分通常包含标题导航LOGO等内容相比传统div它能更清晰表达结构意图提升可访问性和SEO效果header既可作为整个页面的页眉也可作为独立区块的头部使用时需注意嵌套规则和层级关系通过CSS可以轻松为header添加样式实现响应式设计header默认具有ARIA语义可进一步优化增强可访问性实际应用中常见于电商网站页眉和博客文章头部使用时需避免滥用保持唯一性并注意历史兼容性问题header常与navh1h6figure等标签配合使用也可通过JavaScript动态修改内容实现交互效果

<time>-日期/时间表示

HTML5的time标签是用于标记日期时间的语义化元素通过datetime属性提供机器可读的标准格式同时显示人类可读内容它支持多种时间格式包括纯日期纯时间日期时间组合以及时区表示实际应用场景包括新闻发布时间活动倒计时历史事件时间轴等time标签可与微数据结合增强SEO效果也能通过CSS进行样式定制虽然现代浏览器都支持但旧版IE需要兼容处理相比data和span标签time具有明确的时间语义还能通过JavaScript实现动态时间更新和国际化时间处理文章最后展示了日历事件的完整示例演示时区转换功能

<sup>-上标文本

HTML中的sup标签用于定义上标文本使其以较小字号显示在基线之上主要应用于数学公式化学式和脚注标记等场景该标签为双标签所有主流浏览器均支持典型应用包括数学幂运算化学原子数量日期序数和学术参考文献标记可通过CSS自定义样式与sub标签下标形成对比支持嵌套其他HTML标签响应式设计需考虑移动端适配屏幕阅读器能正常识别但复杂数学公式建议使用MathML实际案例展示复杂公式多级上标和动画效果浏览器默认样式为垂直对齐上标和较小字号也可在SVG和Canvas中使用历史版本从HTML20开始支持性能影响较小语义上优于纯CSS实现