html5结构设计核心是准确表达内容关系而非排版。语义标签需按职能选用，如表主导航、表唯一核心内容、表关联补充信息；只能出现一次且不嵌套于其他结构标签内；文档开头须用和等规范声明。
HTML5结构设计的核心不是“怎么排版”，而是“怎么表达内容关系”。语义原则的本质，是让每个标签都成为一句准确的陈述——比如<nav></nav>说的是“这是一组主要导航链接”，<main></main>说的是“这是页面唯一不可替代的核心内容”。只要标签用得准，文档流自然清晰，无需额外注释也能被开发者、搜索引擎和屏幕阅读器一致理解。
按内容职能选标签，不按视觉位置
语义标签描述的是“它是什么”，不是“它在哪”或“它长什么样”。例如：
-
<header></header>可以出现在页面顶部，也可以出现在<article></article>内部——只要它承载的是该区块的标题性内容（如文章标题+作者+时间）； -
<aside></aside>不等于“右边那栏”，而是指与当前<article></article>或<section></section>相关但可独立存在的补充信息（如术语解释、延伸阅读）； -
<section></section>必须有主题，且通常带<h2></h2>–<h6></h6>标题；若只是视觉分隔而无逻辑分组意图，用<div>更合适。 <h3>保持主干唯一，避免嵌套污染</h3> <p>文档主干结构要干净、可识别。关键约束有三：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code><main></main>在整个页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<header></header>、<nav></nav>或<footer></footer>内部； -
<nav></nav>只包裹真正起导航作用的链接（如主导航菜单），页脚的“隐私政策”“关于我们”等次要链接一般不用<nav></nav>； -
<footer></footer>应归属其直接父级：页面级<footer></footer>放在末尾，文章级<footer></footer>则放在<article></article>内部，用于署名或评论入口。
嵌套体现逻辑归属，而非布局需要
语义嵌套的目标是回答“这段内容属于谁？”而不是“我要把它塞进右边那个框里”。典型做法包括：
- 在
<main></main>中，用<article></article>包裹每篇博客，再用<section></section>把同类文章（如“CSS技巧”专栏）归为一组，并配<h2></h2>标题； -
<figure></figure>和<figcaption></figcaption>必须成对出现，图与说明构成一个完整语义单元； - 不要为了实现侧边栏效果，把广告、推荐链接硬塞进
<aside></aside>——若它们与当前<main></main>无实质关联，就该用<div>加语义化class（如<code>class="ad-banner"）明确其用途。结构即沟通，从第一行开始写清楚
语义化从文档开头就已启动：
- 第一行必须是
，无空格、无引号、大小写规范； -
声明语言，帮助辅助技术正确发音； -
中仅保留元信息（<title></title>、<meta charset>、<meta name="viewport">），不放样式或脚本； - 所有语义标签严格闭合，不写
<header></header>这类自闭合形式，避免解析歧义。
- 第一行必须是
