HTML5语义化简历结构为header→main(含多个带标题的section)→footer,aside用于辅助信息;header放身份信息,main承载核心内容,section划分主题模块,aside补充非主线信息,footer标注来源。

用 HTML5 语义化标签组织简历页面,核心是让每个板块“各司其职”,既方便人读,也利于机器(比如搜索引擎、屏幕阅读器)理解内容逻辑。不需要堆砌标签,关键是选对、用准、结构清晰。
用 header 包裹顶部身份信息
这是简历的“门面”,放姓名、职位、头像、联系方式等关键识别信息。它不是装饰性区域,而是整页或 main 内容的头部。
- 通常放在 最上方,或嵌套在
内部作为其子元素 - 可配合
标题强化语义(如
<h1>李四|全栈开发工程师</h1>) - 不建议用 div 模拟 header,否则失去语义价值
用 main 定义核心内容主体
所有实质性的简历内容——教育、经历、技能、项目——都应放在
- 一个页面只用一个
,不能嵌套或重复 - 它是语义锚点:辅助技术会优先聚焦此处,SEO 也会更重视其中文本
- 可配合 aria-label="简历主要内容" 进一步明确用途(非必需但推荐)
用 section 划分逻辑独立模块
每一块有明确主题的内容,比如“工作经历”“教育背景”“技能专长”,就用
- 每个
应带 标题(不可跳级,避免直接用 h3)
- 推荐加 class 名便于 CSS 控制,例如
<section class="experience"> - 若某模块内还含多个同类子项(如三段工作经历),可用
包裹每一段,体现其可独立存在性
用 aside 放辅助性补充信息
适合放不参与主线叙事、但有参考价值的内容,比如证书列表、语言能力等级、开源贡献链接、兴趣标签等。
- 它不属于 main 的主线流程,但和简历主题相关
- 可放在 main 旁侧(PC端布局),也可置于 main 下方(移动端堆叠)
- 不要用它放核心经历或技能,否则会弱化主次
用 footer 收尾并标注来源
放在整个页面最底部,写版权、更新时间、简历生成方式(如“本页由 HTML5 + CSS3 手写构建”)即可。
- 可包含联系邮箱或二维码图片(需加 alt 描述)
- 避免塞进社交账号列表——那些更适合放在 header 或 aside 中
这些标签组合起来,自然形成清晰骨架:
header → main(含多个 section)→ footer,aside 可灵活插入 main 内部或外部。结构干净,改样式、加响应式、做无障碍适配都更顺手。



















