问答社区页面应使用语义化标签构建结构：提问用<article>包裹，含<header><h2><p><footer>；回答用<ol>/<ul>包裹，每条为<li>内嵌<article>；采纳答案添加aria-label；补充内容放<aside>；全页仅一个<main>。
规划问答社区页面的提问与回答结构，核心是用语义化标签清晰表达内容层级和角色关系，同时兼顾可访问性、SEO 和后续交互扩展。重点不是堆砌样式，而是让机器（爬虫、屏幕阅读器）和人一眼看懂“谁在问、问题是什么、谁在答、答案是否被采纳”。
提问区域：用 包裹完整问题单元
每个提问应视为一个独立、可分发的内容实体，必须使用 <article> 标签包裹，不能只用 <div> 或 <section>。
- 内部包含：<header>（含提问者信息、时间、标签）、<h2>（问题标题）、<p> 或 <div>（问题正文）、<footer>（操作区：编辑、分享、收藏）
- 提问者信息建议用 <address> 标签，例如：
<address><a href="https://www.php.cn/link/2864c252715c01e09de3dac606f6872c">张三</a><time datetime="2026-07-28T14:22">昨天</time></address> - 问题发布时间必须用 <time>，提供 machine-readable 时间戳，利于结构化数据提取
回答列表：用 <ol> 或 <ul> 组织，每条回答为一个 <li> 内嵌 <article>
回答是有明确排序逻辑（如按投票数、时间）的内容集合，适合用有序列表 <ol>；若不强调顺序，可用 <ul>。每条回答本身也是一则独立内容，因此每个 <li> 内部应再嵌套一个 <article>。
- <article> 内部结构类似提问：<header>（答主+时间）、<div>（回答正文）、<footer>（投票按钮、评论入口、采纳按钮）
- 若某回答被采纳，给对应 <article> 添加 aria-label="已采纳的答案"，并用 CSS 视觉强化（如徽章图标），避免仅靠颜色区分
- 投票控件建议用 <button> 而非 <span> + JS，确保键盘可聚焦、屏幕阅读器可识别动作
互动与辅助信息：用语义容器隔离，不混入主干内容
相关问题、热门标签、侧边推荐等属于补充内容，应放在 <aside> 中，与 <main> 严格分离。
立即学习“前端免费学习笔记（深入）”；
- <main> 只包含提问主体 + 回答列表，不得塞入广告、推荐或导航
- 用户提问表单应置于提问区域上方或下方，用 <form> 包裹，字段含 <textarea>（问题描述）、<select>（分类）、<button type="submit"> 提交
- FAQ 折叠区块可用 <details><summary> 实现，无需额外 JS，天然支持无障碍展开/收起
整体页面骨架：保持单一 <main>，避免嵌套污染
整个问答页必须只有一个 <main> 元素，且它只包裹提问块和回答列表。<header> 放网站全局导航，<footer> 放版权信息，<aside> 放侧边模块——三者都与 <main> 并列，不可嵌套其中。
- 错误示例：
<main><header>...</header><article>...</article></main>（<header> 属于页面级，不应在 <main> 内） - 正确结构：
<body><header>...</header><main><article>...</article><ol>...</ol></main><aside>...</aside><footer>...</footer></body> - 所有文本内容必须有明确的标题层级（h1–h3），例如页面 h1 是“提问：XXX”，问题标题用 h2，回答标题不用 h3（除非回答内含子章节）
