职位详情页应使用包裹全部核心内容，其仅含职位标识信息，仅含职位相关操作，职责等模块用带标题的划分，辅助信息用与同级的。

用 包裹单个职位信息，别套

或

招聘网站的职位详情页本质是「一篇独立、可复用、可分发的内容」， 正是为此设计的。搜索引擎和屏幕阅读器会据此识别这是完整语义单元；RSS 抓取、分享到社交平台时也更可能提取出正确标题和摘要。

常见错误：把整个页面当一个

，或全用 套娃，导致结构扁平、语义丢失。

• 应直接包裹职位标题、公司信息、职责、要求、福利等全部核心内容
• 不要嵌套在另一个 里（除非是「推荐相似职位」列表中的子项）
• 如果页面含多个职位（如「该司其他职位」横向卡片），每个卡片用独立 ，外层用
  或 标注上下文

和 只负责本 的头尾，不是整页导航

很多人误把页面顶部 logo、主导航塞进职位 的

，这违背语义——那些属于整页结构，应放在 下的全局

中。

职位自身的

应只包含该职位的标识性信息：

立即学习“前端免费学习笔记（深入）”；

• 职位名称（
  ，注意：整页只能有一个
  ，所以此处用
  更稳妥）
• 公司名 + 公司 logo（ 加 alt）
• 发布时间、工作地点、薪资范围等元数据（可用
  或
  ，不强制用 ，但 6月15日发布 更利于机器解析）

同理，职位

适合放「更新时间」「收藏按钮」「分享组件」，而不是「关于我们」「联系我们」这类站点级链接。

职责、要求、福利用

划分，别用 + class 模拟

这些模块具备明确主题边界，且常被 JS 动态展开/收起或锚点跳转，

提供原生语义支持，比纯 CSS 类更可靠。

注意三点：

• 每个
  必须有
  ～
  级标题（哪怕视觉上隐藏，也要保留，保障可访问性）
• 避免无意义嵌套：比如
  ...
  —— 直接让内容成为
  子元素即可
• 若某模块含多个并列小项（如「岗位职责」下 5 条 bullet point），用
  或
  ，别用
  +


公司介绍、团队风采等补充内容优先用 ，而非主流程

用户打开职位页的核心目标是判断「我能不能投、值不值得投」，公司文化、办公环境、团队合影等属于增强信任的辅助信息，语义上不属于职位主体逻辑流。

把它们放进 有实际好处：

• 屏幕阅读器可选择跳过，提升主内容获取效率
• 打印样式表中可设 aside { display: none; }，避免干扰简历投递场景
• 响应式布局中更容易抽离为侧边栏或折叠面板

注意： 必须与主 同级（即都在同一父容器内），不能写成 ... —— 这会让辅助技术误判其从属关系。

  

    
高级前端工程师
    
XX科技有限公司
    

      
工作地点
北京·朝阳区
      
发布时间
6月15日发布
    
  

  

    
岗位职责
    

      
负责核心业务模块前端架构设计与实现
      
推动组件化与工程化落地
    
  

  

    
任职要求
    

      
3 年以上 React 实际项目经验
      
熟悉 Webpack/Vite 原理与优化手段
    
  

  
    
关于我们
    
我们是一支 20 人的远程优先技术团队…
  

语义标签不是装饰，浏览器不会因用了 就自动提升 SEO 排名，但当结构混乱导致爬虫无法准确提取职位标题、薪资、地点时，招聘页的实际曝光就会受损。最常被忽略的是

/ 的作用域范围，以及 必须与 并列这一条硬约束。