HTML5标准文档结构需依次使用<header>、<main>、<article>/<section>、<aside>和<footer>标签:header含h1和nav;main唯一且不嵌套;article用于独立内容,section按主题分组并配标题;aside放附属信息;footer含版权及导航。

如果您正在构建一个符合现代标准的网页,HTML5 提供了专门用于定义文档结构的语义化标签,这些标签能明确标识页面中不同区域的功能与层级关系。以下是为 HTML5 页面添加标准文档结构标签的具体操作步骤:
一、使用 <header> 定义页眉区域
<header> 标签用于封装页面或章节的头部内容,通常包含网站标题、导航栏或标志等。它有助于搜索引擎识别页面主标题及顶部功能区块。
1、在 <body> 标签内部起始位置插入 <header> 开始标签。
2、在 <header> 内部添加 <h1> 标签并填入站点主标题文本,例如 <h1>我的网站</h1>。
立即学习“前端免费学习笔记(深入)”;
3、如需加入导航链接,在 <header> 中嵌套 <nav> 标签,并在其中使用 <ul> 和 <li> 列出菜单项。
二、使用 <main> 标识主体内容区域
<main> 标签表示文档中与当前页面主题直接相关且唯一的核心内容,每个页面仅应出现一次,不可嵌套于 <article>、<aside> 或 <nav> 内部。
1、在 <header> 闭合之后、<footer> 之前的位置插入 <main> 开始标签。
2、将文章正文、产品列表、表单等主要信息内容全部置于 <main> 标签内部。
3、确保 <main> 中不包含重复出现在其他区域(如侧边栏或页脚)的内容,浏览器会忽略多次出现的 <main> 标签中的后几个实例。
三、使用 <article> 和 <section> 组织内容模块
<article> 表示可独立分发或复用的内容单元(如博客条目、新闻稿),而 <section> 则用于对主题相关的内容进行逻辑分组,二者均支持嵌套使用但语义不同。
1、在 <main> 内部,对每篇独立发布的文章使用 <article> 包裹其标题、摘要和正文。
2、若某篇文章内含多个子主题(例如“背景”“方法”“结果”),则分别用 <section> 标签划分各部分。
3、每个 <section> 应配有 <h2> 至 <h6> 级标题以表明层级,避免在 <section> 内部省略标题导致语义断裂。
四、使用 <aside> 添加附属信息
<aside> 标签适用于与主内容相关但非核心的信息,例如侧边栏广告、作者简介、术语解释框或相关链接列表。
1、将 <aside> 放置在 <main> 外部且同级位置(常见于 <main> 右侧或下方),或嵌套在 <article> 内部作为该文章的补充说明。
2、在 <aside> 中可使用 <p>、<ul>、<blockquote> 等标签组织附属内容。
3、若 <aside> 内容与特定段落强关联,应在其中添加 <h3> 标题明确其作用,不得将主导航菜单放入 <aside>。
五、使用 <footer> 定义页脚区域
<footer> 标签用于封装页面或章节的尾部信息,常见内容包括版权申明、联系方式、备案号、返回顶部链接等。
1、在 <body> 结束前、所有其他结构标签闭合后插入 <footer> 开始标签。
2、在 <footer> 内部添加 <p> 标签并填入版权信息,例如 <p>© 2024 我的网站. 保留所有权利.</p>。
3、如需添加多组信息(如“关于我们”“帮助中心”“法律条款”),可用 <nav> 嵌套于 <footer> 中,并以无序列表形式呈现,每个链接应指向有效 URL,避免空 href 属性。











