HTML5结构标签怎么用_新手快速上手写网页框架技巧【教程】

表示页面或区块的引导性内容，可多次使用； 唯一且不可嵌套于 等元素内； 需有主题和标题，否则用 ； 强调内容相关性而非布局位置。

用 <header></header> 时别把它当“页眉图片容器”

很多人一看到 <header></header> 就立刻塞个 <img alt="HTML5结构标签怎么用_新手快速上手写网页框架技巧【教程】" > 或写个大标题，其实它语义重点是「页面或区块的引导性内容」。一个页面可以有多个 <header></header>，比如主区域顶部一个，<article></article> 里面还能再套一个。

• 单独用 <header></header> 不代表自动居中、加粗或有默认边距——样式得自己写
• 如果只是放 logo + 导航，<header></header> + <nav></nav> 是更准确的组合
• 不要用 <header></header> 替代 <h1></h1>：标题层级该用 heading 标签，结构标签管的是“块角色”，不是“文字级别”

<main></main> 必须且只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里

<main></main> 表示文档中与当前页面最直接相关、独一无二的主要内容。浏览器和读屏软件会据此跳转，所以规则很严格。

• 每个 HTML 文档最多一个 <main></main>，重复会导致验证失败和辅助技术误判
• 它不能是 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 的子元素
• 常见错误：<article><main>…</main></article> —— 这违反规范，应把 <main></main> 提到外层，<article></article> 放进它里面

<section></section> 和 <div> 的关键区别在“是否自带标题” <p><code><section></section> 不是视觉分组工具，而是语义分组：它必须有主题，且通常（但不强制）带一个 <h2></h2>–<h6></h6> 标题。没标题的“区块”，就该用 <div>。 <ul> <li>正确用法：<pre class="brush:php;toolbar:false;">&lt;section&gt; &lt;h2&gt;用户反馈&lt;/h2&gt; &lt;p&gt;大家说……&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1077&quot; title=&quot;海绵音乐&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680046830886.png&quot; alt=&quot;海绵音乐&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/1077&quot; title=&quot;海绵音乐&quot;&gt;海绵音乐&lt;/a&gt; &lt;p&gt;字节跳动推出的AI音乐生成工具&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1077&quot; title=&quot;海绵音乐&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;/section&gt;</pre></li> <li>错误用法：<pre class="brush:php;toolbar:false;">&lt;section&gt; &lt;div class=&quot;card&quot;&gt;…&lt;/div&gt; &lt;div class=&quot;card&quot;&gt;…&lt;/div&gt; &lt;/section&gt;</pre> → 没标题、无主题，纯样式分组，这里该用 <code><div> <li>注意：<code><section></section> 会出现在文档大纲中，影响 SEO 和屏幕阅读器导航顺序

<aside></aside> 不等于“右边栏”，而是“附属但相关的内容”

新手常把 <aside></aside> 当作 CSS 布局的右栏占位符，结果导致语义错乱。它的核心是内容关系：它里面的文字/链接/引用，应该能脱离主文独立存在，又和当前上下文有关联。

• 适合放：侧边术语解释、作者简介、相关文章链接、引用来源
• 不适合放：网站全局导航、页脚信息、广告横幅（除非广告明确关联当前文章，比如某款相机评测旁放该相机购买链接）
• 它可以出现在 <article></article> 内部（如技术文章里的代码说明框），也可以在 级作为全站侧边栏——但前提是内容确实“附属且相关”