职位详情页应使用<article>包裹全部核心内容，其<header>仅含职位标识信息，<footer>仅含职位相关操作，职责等模块用带标题的<section>划分，辅助信息用与<article>同级的<aside>。
用 <article> 包裹单个职位信息，别套 <section> 或 <div>
招聘网站的职位详情页本质是「一篇独立、可复用、可分发的内容」，<article> 正是为此设计的。搜索引擎和屏幕阅读器会据此识别这是完整语义单元；RSS 抓取、分享到社交平台时也更可能提取出正确标题和摘要。
常见错误：把整个页面当一个 <section>，或全用 <div> 套娃，导致结构扁平、语义丢失。
-
<article>应直接包裹职位标题、公司信息、职责、要求、福利等全部核心内容 - 不要嵌套在另一个
<article>里（除非是「推荐相似职位」列表中的子项） - 如果页面含多个职位（如「该司其他职位」横向卡片），每个卡片用独立
<article>，外层用<section>或<aside>标注上下文
<header> 和 <footer> 只负责本 <article> 的头尾，不是整页导航
很多人误把页面顶部 logo、主导航塞进职位 <article> 的 <header>，这违背语义——那些属于整页结构，应放在 <body> 下的全局 <header> 中。
职位自身的 <header> 应只包含该职位的标识性信息：
立即学习“前端免费学习笔记（深入）”；
- 职位名称（
<h1>，注意：整页只能有一个<h1>，所以此处用<h2>更稳妥） - 公司名 + 公司 logo（
<img>加alt） - 发布时间、工作地点、薪资范围等元数据（可用
<dl>或<ul>，不强制用<time>，但<time datetime="2024-06-15">6月15日发布</time>更利于机器解析）
同理，职位 <footer> 适合放「更新时间」「收藏按钮」「分享组件」，而不是「关于我们」「联系我们」这类站点级链接。
职责、要求、福利用 <section> 划分，别用 <div> + class 模拟
这些模块具备明确主题边界，且常被 JS 动态展开/收起或锚点跳转，<section> 提供原生语义支持，比纯 CSS 类更可靠。
注意三点：
- 每个
<section>必须有<h2>～<h6>级标题（哪怕视觉上隐藏，也要保留，保障可访问性） - 避免无意义嵌套：比如
<section><div class="content">...</div></section>—— 直接让内容成为<section>子元素即可 - 若某模块含多个并列小项（如「岗位职责」下 5 条 bullet point），用
<ul>或<ol>，别用<p>+<br>
公司介绍、团队风采等补充内容优先用 <aside>，而非主流程
用户打开职位页的核心目标是判断「我能不能投、值不值得投」，公司文化、办公环境、团队合影等属于增强信任的辅助信息，语义上不属于职位主体逻辑流。
把它们放进 <aside> 有实际好处：
注意：<aside> 必须与主 <article> 同级（即都在同一父容器内），不能写成 <article><aside>...</aside></article> —— 这会让辅助技术误判其从属关系。
<article>
<header>
<h2>高级前端工程师</h2>
<p><strong>XX科技有限公司</strong></p>
<dl>
<dt>工作地点</dt><dd>北京·朝阳区</dd>
<dt>发布时间</dt><dd><time datetime="2024-06-15">6月15日发布</time></dd>
</dl>
</header>
<section>
<h3>岗位职责</h3>
<ul>
<li>负责核心业务模块前端架构设计与实现</li>
<li>推动组件化与工程化落地</li>
</ul>
</section>
<section>
<h3>任职要求</h3>
<ul>
<li>3 年以上 React 实际项目经验</li>
<li>熟悉 Webpack/Vite 原理与优化手段</li>
</ul>
</section>
<aside>
<h3>关于我们</h3>
<p>我们是一支 20 人的远程优先技术团队…</p>
</aside>
</article>
语义标签不是装饰，浏览器不会因用了 <article> 就自动提升 SEO 排名，但当结构混乱导致爬虫无法准确提取职位标题、薪资、地点时，招聘页的实际曝光就会受损。最常被忽略的是 <header>/<footer> 的作用域范围，以及 <aside> 必须与 <article> 并列这一条硬约束。 
