html5语义标签是web组件的结构锚点，为自定义元素提供可预测的宿主环境与上下文；组件应嵌入语义容器（如）而非取代它们，并复用等子标签，配合确保语义一致性。
HTML5语义标签本身不是Web组件，但它是构建健壮UI架构的底层基石——它提供清晰的内容角色与结构契约，让自定义元素（如<my-header></my-header>、<product-card></product-card>）能自然嵌入、准确表达意图，而非游离于文档逻辑之外。
语义标签是Web组件的“结构锚点”
Web组件（Custom Elements + Shadow DOM + HTML Templates）强调封装与复用，但若外层容器仍用一堆
堆砌，组件就失去了上下文。语义标签为组件提供了可预测的宿主环境：
-
<main></main>告诉组件：“你当前处于核心内容流中”，便于内部逻辑判断是否需启用懒加载或焦点管理 -
<article></article>包裹<blog-post></blog-post>时，搜索引擎和屏幕阅读器立刻识别该组件代表一篇独立可分发的内容 -
<aside></aside>内嵌<related-links></related-links>，比<div class="sidebar-widget">更明确地传达其辅助性、非主线地位<h3>避免语义真空：组件不能替代语义结构</h3> <p>常见误区是用一个自定义标签包揽全部结构，例如：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <font color="#666"><app-layout><br> <header-slot></header-slot><br> <nav-slot></nav-slot><br> <main-slot></main-slot><br></app-layout></font><p>这种写法虽灵活，却丢失了原生语义。正确做法是让组件在语义框架内工作：</p> <ul> <li>组件应作为语义容器的子元素存在，而非取代它们。例如<code><nav><site-nav></site-nav></nav> - 组件内部若需结构化内容，优先复用
<h2></h2>、<time></time>、<figure></figure>等语义子标签，而非全用<div> <li>对外暴露<code>role或aria-*属性时，应与父级语义一致。比如<article><comment-thread></comment-thread></article>中，<comment-thread></comment-thread>不应擅自设role="application"破坏文章语义流 - 用
<template></template>预定义符合语义规范的片段，如带<header><h3></h3></header>的卡片标题区，再由组件实例化，确保每次渲染都保持语义一致性 - 通过具名
<slot name="header"></slot>接收外部传入的<header></header>内容，而不是要求使用者传入纯字符串，把结构控制权交还给语义逻辑 - 配合
<dialog></dialog>等新语义元素使用Web组件时，组件可直接继承其无障碍行为（如自动聚焦、aria-modal管理），无需重复实现 - 制定团队语义规范：明确哪些场景必须用
<main></main>、哪些区块必须包裹在<section></section>中，再允许组件在其内填充 - 组件库文档中标注“期望父容器”和“推荐子元素”，例如
<news-list></news-list>注明“建议置于<main></main>或<section></section>内，子项应为<article></article>” - 用Lighthouse或axe工具定期扫描，检查语义层级是否被组件无意破坏（如
<main></main>缺失、<nav></nav>内无链接等）
与HTML模板协作提升可维护性
HTML5的<template></template>和<slot></slot>机制天然适配语义结构：
实际落地建议
在项目中推进语义化+组件化双轨策略：
