开发符合标准 HTML5 语义化布局的组件化流程

开发HTML5语义化组件的关键在于让标签真实反映内容角色并融合生命周期与复用逻辑：依功能选article、nav、section、aside；用含短横线的Custom Elements封装；严守嵌套边界；强化time、strong、figure等细节语义。

开发符合标准的 HTML5 语义化组件，关键不在“堆标签”，而在让每个标签真实反映内容角色，并与组件生命周期、复用逻辑自然融合。它不是先写样式再套语义，而是从结构意图出发，把模块功能、内容边界和交互职责一次性对齐。

明确组件的内容角色，再选语义标签

每个组件在页面中承担什么逻辑角色，决定了它的顶层语义容器：

1. 如果是一个可独立分发、RSS 订阅或打印时仍完整的单元（如新闻卡片、博客条目），用 article 作为根元素
2. 如果是纯导航入口集合（如顶部菜单、侧边分类导航），必须包裹在 nav 内，不混入搜索框、按钮或广告链接
3. 若组件是主内容区的子模块（如“服务流程”“关于我们”），无独立传播价值，就用 section，且内部需带

   –

   标题

4. 侧边推荐、作者简介、相关广告等与主内容关联但非必需的信息，统一用 aside，不因视觉靠右就默认归为 aside

用 Custom Elements 封装语义结构，而非 class 命名模拟

避免写 <div class="card"><div class="card-header">... 这类纯视觉命名。应注册真正能被 DOM 识别的语义化自定义标签：

1. 标签名必须含短横线，如 <news-card> 或 <site-nav>
2. 类定义继承 HTMLElement，在 connectedCallback() 中注入语义骨架（例如自动插入 <header><h3>标题</h3><time datetime="..."></time></header>）
3. 通过 static get observedAttributes() 监听 title、date 等属性，驱动内部 <time> 或 <strong> 的更新

嵌套必须守边界，结构不能越权

语义标签有严格职责边界，跨层级嵌套会破坏机器可读性：

1. main 必须是全局唯一，且不能出现在 <article>、<section> 或 <header> 内部
2. article 可以嵌套自身（如评论作为子 article），但不能包裹 <nav> 或 <aside> —— 后者应属于 article 的父级上下文
3. footer 是归属型标签：文章 footer 放在 article 内，页面 footer 放在 body 直接子级；两者可共存，但不可混淆作用域
4. 所有 heading（<h1>–<h6>）必须按逻辑递进，<article> 内首标题通常为 <h2>（除非它是页面唯一主体）

增强机器可读细节，让语义落地到数据层

真正的语义化不止于容器标签，还体现在内容粒度的表达上：

1. 发布时间一律用 <time datetime="2026-06-23">今天</time>，而非纯文本或 class="date"
2. 强调关键信息用 <strong>（权重高），语气变化用 <em>（非样式替代）
3. 图文组合必须用 <figure><img><figcaption>说明文字</figcaption></figure>，figcaption 不可省略或外置
4. 交互控件优先用原生语义标签：<button> 替代 <div role="button">，<input type="email"> 启用原生校验