构建语义化清晰的HTML5 Web应用：结构设计原则-H5教程-PHP中文网

html5语义化核心是用对标签、理清层级、服务真实需求：header/nav/main/article/aside/footer等非装饰而是结构声明，main唯一且不嵌套于header/footer，nav仅用于主导航，article须可独立分发，section需有主题，aside须与主内容附属关联，避免语义漂移与扁平化滥用。

构建语义化清晰的html5 web应用：结构设计原则

构建语义化清晰的HTML5 Web应用，核心不在堆砌新标签，而在于用对标签、理清层级、服务真实需求。结构设计不是为了“看起来更标准”，而是让内容可读、可维护、可访问、可被机器理解。

用对语义标签，代替无意义的div

HTML5新增的<header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>等标签，不是装饰，是结构声明。它们明确告诉浏览器、搜索引擎和辅助技术：“这部分内容的功能是什么”。

<nav></nav>只包裹主导航链接，不用于页脚链接或侧边栏分类列表
<main></main>必须且只能出现一次，代表页面唯一主体内容区域
<article></article>适用于能独立分发、复用的内容（如博客文章、新闻条目），不是每个卡片都该用
避免“语义漂移”：比如用<section></section>包住单个按钮，或把广告位硬塞进<aside></aside>——<aside></aside>应与主内容存在附属关系，而非单纯位置在侧边

保持逻辑嵌套，拒绝扁平化滥用

语义结构的价值，依赖于合理的嵌套关系。错误的嵌套会削弱语义，甚至影响可访问性。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<header></header>应位于内，或作为<article></article>/<section></section>的直接子元素，而非随意放在<div>里 <li> <code><h1>–<h6></h6> </h1>需按层级递进，不能跳级（如<h2></h2>后直接<h4></h4>），也不能在<footer></footer>中放<h1></h1>
<main></main>内部不应再嵌套<header></header>或<footer></footer>（除非是文章自身的头尾），避免语义冲突
用<ol></ol>或<ul></ul>组织导航菜单，比纯<div>+<code><span></span>更利于屏幕阅读器识别列表结构
以内容功能为起点，而非视觉样式

结构设计的第一问永远是：“这段内容在整站中承担什么角色？”，而不是“它看起来像不像一个导航栏？”。
- 页脚中的“关于我们”“联系方式”“法律声明”若属于全站通用信息，就属于<footer></footer>；若是某篇文章末尾的作者信息，则更适合放在<article></article>内的<footer></footer>
- 侧边栏显示当前分类下的相关文章，属于<aside></aside>；若只是广告横幅或推广链接，没有内容关联性，用<div role="complementary">更准确 <li>搜索框放在<code><header></header>中是常见做法，但前提是它服务于全站检索；若仅用于当前文章内关键词查找，更适合置于<article></article>内部