社交动态流应使用语义化HTML：每条动态用<article>包裹，发布时间用<time datetime>，评论区作为<section>从属于<article>，功能区块用<section>并配<h2>标题，避免滥用<div>或错误嵌套。
用 <article> 包裹每条动态，别用 <div> 硬套
社交动态流本质是独立、可复用、可分发的内容单元，<article> 的语义正好匹配：它表示“可独立发布、可被订阅、可单独存档”的内容。浏览器和读屏器能据此识别内容边界，SEO 也能更好提取标题、发布时间等结构化数据。
常见错误是全用 <div class="post">，导致机器无法判断哪段是主体、哪段是评论区、哪段属于作者信息。
- 每条动态（含文字、图片、视频、发布时间、点赞数）应包裹在单个
<article>内 - 如果动态里嵌了转发来源，那个来源也应是另一个
<article>（嵌套合法，且语义清晰） - 避免把用户头像、昵称、操作按钮这些「非内容主体」强行塞进
<article>的顶层——它们更适合放在<header>或<aside>中
<section> 用来切分功能区块，不是给「样式容器」找借口
很多人把 <section> 当成“带语义的 <div>”，结果写成 <section class="feed-container">，这违背了它的本意：<section> 应代表逻辑上自成一体的主题段落，比如「好友动态」「热门推荐」「广告位」这三个区域。
关键判断标准：这个区块能不能单独加一个 <h2> 标题？如果能，且标题能准确概括其内容主题，那它就适合用 <section>。
立即学习“前端免费学习笔记（深入）”；
- 动态流主列表用
<section aria-labelledby="feed-title">，配合<h2 id="feed-title">新鲜事</h2> - 侧边栏的「你可能感兴趣的人」是一个独立主题，用
<section>；但「加载更多」按钮只是交互控件，不属于内容主题，不要单独包一层<section> - 不要为实现栅格布局（如 flex / grid 容器）而滥用
<section>——用<div>更合适
时间线要用 <time>，别只靠 CSS 类名或 data 属性
动态发布时间不是装饰性文本，而是关键元数据。仅用 <span class="timestamp">2 小时前</span> 会让辅助技术丢失时间语义，也无法被搜索引擎索引为有效日期。
<time> 的 datetime 属性必须是机器可解析的格式（如 2024-06-15T14:23:00+08:00），前端可在此基础上用 JS 渲染成「刚刚」「2 小时前」等人话格式，但原始结构不能丢。
- 动态卡片中发布时间必须用
<time datetime="2024-06-15T14:23:00+08:00">2 小时前</time> - 不要写
<time datetime="2 小时前">2 小时前</time>——datetime值无效，等于没用 - 服务端渲染时优先输出完整 ISO 时间戳；客户端 JS 可监听
<time>元素做相对时间更新，但不能删掉原始datetime
评论区用 <aside> 还是 <section>？看它是否从属当前动态
评论是当前动态的附属内容，不是独立主题，也不具备跨上下文复用性，所以它不属于 <section>（那是为并列主题准备的）。但评论又不是纯装饰或辅助说明，它有结构、有作者、有时序，所以也不适合用 <aside>（<aside> 更偏向“补充说明”类内容，比如百科侧栏、作者简介浮层）。
更稳妥的做法：评论区整体作为 <article> 的子部分，用 <section> 包裹，并加 aria-labelledby 指向动态标题，表明其从属关系。
- 不要把整个评论区提级到和动态平级的
<section>，否则破坏内容层级 - 每条评论本身也是微型内容单元，可用
<article>或<li>（若用<ol>列表组织） - 回复某条评论的嵌套评论，建议用
<blockquote>+<cite>明确引用关系，比纯缩进更语义化
<article>
<header>
<h3>今天加班到凌晨</h3>
<time datetime="2024-06-15T01:45:00+08:00">1 小时前</time>
</header>
<p>咖啡喝到心慌…</p>
<section aria-labelledby="comments-of-123">
<h4 id="comments-of-123">评论（3）</h4>
<ul>
<li><strong>张三</strong>：抱抱～</li>
<li><strong>李四</strong>：<blockquote cite="#comment-456"><cite>张三</cite>：抱抱～</blockquote>同抱！</li>
</ul>
</section>
</article>
最常被忽略的一点：结构标签不解决样式问题，但一旦结构错乱，CSS Grid / Flex 布局、无障碍焦点流、服务端预渲染的语义提取，全都会悄悄出问题——而且很难定位。
