Search K
Appearance
5.2 结构性语义标签
关键词: HTML5结构性语义标签, header标签, nav标签, main标签, article标签, section标签, aside标签, footer标签, 页面结构
学习目标
- 掌握HTML5核心结构性语义标签的使用
- 理解每个语义标签的语义含义和适用场景
- 学会合理组织页面结构和内容层次
- 掌握结构性标签的嵌套规则和最佳实践
- 了解结构性标签对SEO和可访问性的影响
5.2.1 HTML5结构性语义标签概览
HTML5引入了一系列结构性语义标签，用于明确定义页面的不同区域和内容类型。
核心结构性标签
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 结构性语义标签详解</title>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
line-height: 1.6;
}
.demo-container {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 25px;
}
.demo-container h3 {
color: #333;
margin-bottom: 20px;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.semantic-layout {
border: 2px solid #007bff;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
background: #f8f9ff;
}
.semantic-element {
margin: 10px 0;
padding: 15px;
border-radius: 8px;
border: 2px solid;
transition: all 0.3s ease;
}
.semantic-element:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.element-header {
background-color: #e3f2fd;
border-color: #2196f3;
}
.element-nav {
background-color: #f3e5f5;
border-color: #9c27b0;
}
.element-main {
background-color: #e8f5e8;
border-color: #4caf50;
}
.element-article {
background-color: #fff3e0;
border-color: #ff9800;
}
.element-section {
background-color: #fce4ec;
border-color: #e91e63;
}
.element-aside {
background-color: #e0f2f1;
border-color: #009688;
}
.element-footer {
background-color: #f1f8e9;
border-color: #8bc34a;
}
.element-info {
font-size: 14px;
color: #666;
margin-top: 10px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 5px;
}
.code-example {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin: 15px 0;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
overflow-x: auto;
}
.interactive-demo {
border: 2px solid #007bff;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
background: white;
}
.demo-controls {
margin-bottom: 20px;
}
.demo-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s;
}
.demo-button:hover {
background-color: #0056b3;
}
.demo-button.active {
background-color: #28a745;
}
.layout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.layout-example {
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
background: #f8f9fa;
}
.layout-example h4 {
margin-top: 0;
color: #495057;
}
.nested-structure {
margin-left: 20px;
border-left: 3px solid #007bff;
padding-left: 15px;
}
.structure-visualization {
font-family: monospace;
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.structure-level-1 { color: #007bff; font-weight: bold; }
.structure-level-2 { color: #28a745; margin-left: 20px; }
.structure-level-3 { color: #ffc107; margin-left: 40px; }
.structure-level-4 { color: #dc3545; margin-left: 60px; }
.best-practices {
background-color: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.worst-practices {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.real-world-example {
border: 2px solid #17a2b8;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
background: #f8fcff;
}
.seo-info {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.accessibility-info {
background-color: #cff4fc;
border: 1px solid #9eeaf9;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.element-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.showcase-item {
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
background: white;
}
.showcase-item h4 {
margin-top: 0;
color: #333;
}
.usage-example {
background-color: #e9ecef;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
}
@media (max-width: 768px) {
.layout-grid {
grid-template-columns: 1fr;
}
.element-showcase {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>HTML5 结构性语义标签详解</h1>
<!-- 结构性标签概览 -->
<div class="demo-container">
<h3>1. 结构性语义标签概览</h3>
<div class="semantic-layout">
<div class="semantic-element element-header">
<strong><header></strong> - 页面或区域头部
<div class="element-info">
包含标题、导航、介绍性内容等
</div>
</div>
<div class="semantic-element element-nav">
<strong><nav></strong> - 导航区域
<div class="element-info">
包含导航链接、菜单等
</div>
</div>
<div class="semantic-element element-main">
<strong><main></strong> - 主要内容区域
<div class="element-info">
页面的主要内容，每个页面只能有一个
</div>
</div>
<div class="semantic-element element-article">
<strong><article></strong> - 独立文章
<div class="element-info">
可以独立存在的内容，如文章、博客等
</div>
</div>
<div class="semantic-element element-section">
<strong><section></strong> - 内容区块
<div class="element-info">
相关内容的分组，通常有标题
</div>
</div>
<div class="semantic-element element-aside">
<strong><aside></strong> - 侧边栏
<div class="element-info">
与主内容相关的补充信息
</div>
</div>
<div class="semantic-element element-footer">
<strong><footer></strong> - 页面或区域底部
<div class="element-info">
包含版权信息、联系方式等
</div>
</div>
</div>
</div>
<!-- 交互式结构演示 -->
<div class="demo-container">
<h3>2. 交互式页面结构演示</h3>
<div class="interactive-demo">
<div class="demo-controls">
<button class="demo-button active" onclick="showStructure('complete')">完整结构</button>
<button class="demo-button" onclick="showStructure('minimal')">最小结构</button>
<button class="demo-button" onclick="showStructure('blog')">博客结构</button>
<button class="demo-button" onclick="showStructure('news')">新闻结构</button>
</div>
<div id="structureDemo">
<!-- 动态内容将在这里显示 -->
</div>
</div>
</div>
<!-- header元素详解 -->
<div class="demo-container">
<h3>3. <header> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>基本用法</h4>
<div class="code-example">
<header>
<h1>网站标题</h1>
<p>网站描述</p>
</header>
</div>
</div>
<div class="showcase-item">
<h4>页面头部</h4>
<div class="code-example">
<header>
<img src="logo.png" alt="公司logo">
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
</div>
</div>
<div class="showcase-item">
<h4>文章头部</h4>
<div class="code-example">
<article>
<header>
<h2>文章标题</h2>
<p>作者：张三</p>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<p>文章内容...</p>
</article>
</div>
</div>
<div class="showcase-item">
<h4>区块头部</h4>
<div class="code-example">
<section>
<header>
<h3>产品特性</h3>
<p>了解我们产品的核心特性</p>
</header>
<div>特性内容...</div>
</section>
</div>
</div>
</div>
<div class="seo-info">
<h4>🔍 SEO优势</h4>
<ul>
<li>搜索引擎能识别页面头部信息</li>
<li>提高网站品牌识别度</li>
<li>有助于生成网站摘要</li>
</ul>
</div>
<div class="accessibility-info">
<h4>♿ 可访问性</h4>
<ul>
<li>屏幕阅读器能识别页面头部</li>
<li>提供页面结构导航</li>
<li>支持跳转到主要内容</li>
</ul>
</div>
</div>
<!-- nav元素详解 -->
<div class="demo-container">
<h3>4. <nav> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>主导航</h4>
<div class="code-example">
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</div>
</div>
<div class="showcase-item">
<h4>面包屑导航</h4>
<div class="code-example">
<nav aria-label="面包屑导航">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li aria-current="page">产品详情</li>
</ol>
</nav>
</div>
</div>
<div class="showcase-item">
<h4>分页导航</h4>
<div class="code-example">
<nav aria-label="分页导航">
<a href="/page/1">上一页</a>
<a href="/page/1">1</a>
<a href="/page/2" aria-current="page">2</a>
<a href="/page/3">3</a>
<a href="/page/3">下一页</a>
</nav>
</div>
</div>
<div class="showcase-item">
<h4>内容导航</h4>
<div class="code-example">
<nav aria-label="文章目录">
<h4>目录</h4>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#features">特性</a></li>
<li><a href="#conclusion">结论</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="best-practices">
<h4>✅ 最佳实践</h4>
<ul>
<li>使用aria-label描述导航用途</li>
<li>在复杂页面中使用多个nav元素</li>
<li>使用有序或无序列表组织导航项</li>
<li>为当前页面添加aria-current="page"</li>
</ul>
</div>
<div class="worst-practices">
<h4>❌ 避免做法</h4>
<ul>
<li>将所有链接都放在nav中</li>
<li>在nav中包含非导航内容</li>
<li>忽略键盘导航支持</li>
<li>缺少视觉指示当前位置</li>
</ul>
</div>
</div>
<!-- main元素详解 -->
<div class="demo-container">
<h3>5. <main> 元素详解</h3>
<div class="code-example">
<!-- 正确使用main元素 -->
<body>
<header>
<h1>网站标题</h1>
<nav>...</nav>
</header>
<main>
<h2>页面主要内容</h2>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
</main>
<aside>
<h3>侧边栏</h3>
<p>相关链接...</p>
</aside>
<footer>
<p>版权信息</p>
</footer>
</body>
</div>
<div class="real-world-example">
<h4>实际应用示例</h4>
<div class="layout-grid">
<div class="layout-example">
<h4>博客首页</h4>
<div class="code-example">
<main>
<section>
<h2>最新文章</h2>
<article>...</article>
<article>...</article>
</section>
<section>
<h2>热门文章</h2>
<article>...</article>
</section>
</main>
</div>
</div>
<div class="layout-example">
<h4>商品详情页</h4>
<div class="code-example">
<main>
<article>
<h2>商品名称</h2>
<section>
<h3>商品描述</h3>
<p>详细描述...</p>
</section>
<section>
<h3>规格参数</h3>
<table>...</table>
</section>
</article>
</main>
</div>
</div>
</div>
</div>
<div class="seo-info">
<h4>🔍 SEO重要性</h4>
<ul>
<li>搜索引擎优先索引main中的内容</li>
<li>提高页面主要内容的权重</li>
<li>有助于移动优先索引</li>
<li>改善页面结构理解</li>
</ul>
</div>
<div class="accessibility-info">
<h4>♿ 可访问性特性</h4>
<ul>
<li>屏幕阅读器可直接跳转到主要内容</li>
<li>提供"跳转到主要内容"链接的目标</li>
<li>改善页面导航体验</li>
<li>符合WCAG 2.1 A级标准</li>
</ul>
</div>
</div>
<!-- article元素详解 -->
<div class="demo-container">
<h3>6. <article> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>博客文章</h4>
<div class="code-example">
<article>
<header>
<h2>文章标题</h2>
<p>发布于 <time datetime="2024-01-01">2024年1月1日</time></p>
<p>作者：<address>张三</address></p>
</header>
<section>
<h3>简介</h3>
<p>文章内容...</p>
</section>
<footer>
<p>标签：<a href="/tag/html">HTML</a></p>
</footer>
</article>
</div>
</div>
<div class="showcase-item">
<h4>产品卡片</h4>
<div class="code-example">
<article>
<header>
<h3>产品名称</h3>
<p>价格：￥999</p>
</header>
<figure>
<img src="product.jpg" alt="产品图片">
<figcaption>产品展示</figcaption>
</figure>
<section>
<h4>产品特性</h4>
<ul>
<li>特性1</li>
<li>特性2</li>
</ul>
</section>
</article>
</div>
</div>
<div class="showcase-item">
<h4>评论条目</h4>
<div class="code-example">
<article>
<header>
<h4>用户评论</h4>
<p>评论者：李四</p>
<time datetime="2024-01-02">2024年1月2日</time>
</header>
<p>这是一条用户评论内容...</p>
<footer>
<p>评分：⭐⭐⭐⭐⭐</p>
</footer>
</article>
</div>
</div>
<div class="showcase-item">
<h4>新闻条目</h4>
<div class="code-example">
<article>
<header>
<h2>新闻标题</h2>
<p>来源：新闻网</p>
<time datetime="2024-01-03">2024年1月3日</time>
</header>
<p>新闻摘要...</p>
<section>
<h3>详细报道</h3>
<p>新闻内容...</p>
</section>
</article>
</div>
</div>
</div>
<div class="best-practices">
<h4>✅ 使用准则</h4>
<ul>
<li>内容必须是独立的、完整的</li>
<li>可以单独分发或重用</li>
<li>通常包含标题和发布信息</li>
<li>可以嵌套使用（如评论中的回复）</li>
</ul>
</div>
</div>
<!-- section元素详解 -->
<div class="demo-container">
<h3>7. <section> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>内容分组</h4>
<div class="code-example">
<section>
<h2>产品特性</h2>
<p>了解我们产品的核心特性</p>
<section>
<h3>性能特性</h3>
<p>高性能处理能力...</p>
</section>
<section>
<h3>安全特性</h3>
<p>企业级安全保障...</p>
</section>
</section>
</div>
</div>
<div class="showcase-item">
<h4>章节划分</h4>
<div class="code-example">
<article>
<h1>用户手册</h1>
<section>
<h2>第一章：安装指南</h2>
<p>安装步骤...</p>
</section>
<section>
<h2>第二章：使用教程</h2>
<p>使用方法...</p>
</section>
</article>
</div>
</div>
<div class="showcase-item">
<h4>主题区域</h4>
<div class="code-example">
<main>
<section>
<h2>最新动态</h2>
<article>新闻1</article>
<article>新闻2</article>
</section>
<section>
<h2>热门话题</h2>
<article>话题1</article>
<article>话题2</article>
</section>
</main>
</div>
</div>
<div class="showcase-item">
<h4>表单分组</h4>
<div class="code-example">
<form>
<section>
<h3>基本信息</h3>
<input type="text" placeholder="姓名">
<input type="email" placeholder="邮箱">
</section>
<section>
<h3>联系信息</h3>
<input type="tel" placeholder="电话">
<textarea placeholder="地址"></textarea>
</section>
</form>
</div>
</div>
</div>
<div class="seo-info">
<h4>🔍 SEO价值</h4>
<ul>
<li>帮助搜索引擎理解内容结构</li>
<li>提供清晰的内容层次</li>
<li>支持结构化数据标记</li>
<li>改善内容的可索引性</li>
</ul>
</div>
</div>
<!-- aside元素详解 -->
<div class="demo-container">
<h3>8. <aside> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>侧边栏</h4>
<div class="code-example">
<aside>
<section>
<h3>相关链接</h3>
<ul>
<li><a href="/related1">相关文章1</a></li>
<li><a href="/related2">相关文章2</a></li>
</ul>
</section>
<section>
<h3>广告位</h3>
<div>广告内容</div>
</section>
</aside>
</div>
</div>
<div class="showcase-item">
<h4>文章相关内容</h4>
<div class="code-example">
<article>
<h2>主要文章内容</h2>
<p>文章正文...</p>
<aside>
<h3>相关术语</h3>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
</aside>
</article>
</div>
</div>
<div class="showcase-item">
<h4>引用内容</h4>
<div class="code-example">
<main>
<h2>技术发展</h2>
<p>技术发展的历程...</p>
<aside>
<blockquote>
<p>"技术的进步改变了我们的生活方式"</p>
<footer>— 技术专家</footer>
</blockquote>
</aside>
</main>
</div>
</div>
<div class="showcase-item">
<h4>作者信息</h4>
<div class="code-example">
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<aside>
<h3>关于作者</h3>
<img src="author.jpg" alt="作者头像">
<p>作者简介...</p>
<p>联系方式：<a href="mailto:author@example.com">邮箱</a></p>
</aside>
</article>
</div>
</div>
</div>
<div class="accessibility-info">
<h4>♿ 可访问性考虑</h4>
<ul>
<li>使用aria-label描述侧边栏用途</li>
<li>确保内容对屏幕阅读器友好</li>
<li>提供跳过侧边栏内容的选项</li>
<li>保持与主内容的逻辑关系</li>
</ul>
</div>
</div>
<!-- footer元素详解 -->
<div class="demo-container">
<h3>9. <footer> 元素详解</h3>
<div class="element-showcase">
<div class="showcase-item">
<h4>页面底部</h4>
<div class="code-example">
<footer>
<section>
<h3>联系我们</h3>
<address>
<p>电话：123-456-7890</p>
<p>邮箱：info@example.com</p>
<p>地址：北京市朝阳区</p>
</address>
</section>
<section>
<h3>友情链接</h3>
<ul>
<li><a href="/partner1">合作伙伴1</a></li>
<li><a href="/partner2">合作伙伴2</a></li>
</ul>
</section>
<p>&copy; 2024 公司名称. 保留所有权利.</p>
</footer>
</div>
</div>
<div class="showcase-item">
<h4>文章底部</h4>
<div class="code-example">
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<footer>
<p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p>
<p>标签：
<a href="/tag/html">HTML</a>
<a href="/tag/css">CSS</a>
</p>
<p>分享：
<a href="/share/twitter">Twitter</a>
<a href="/share/facebook">Facebook</a>
</p>
</footer>
</article>
</div>
</div>
<div class="showcase-item">
<h4>区块底部</h4>
<div class="code-example">
<section>
<h2>用户评论</h2>
<article>评论1</article>
<article>评论2</article>
<footer>
<p>共有 25 条评论</p>
<nav>
<a href="/comments/page/1">第一页</a>
<a href="/comments/page/2">第二页</a>
</nav>
</footer>
</section>
</div>
</div>
<div class="showcase-item">
<h4>复杂页脚</h4>
<div class="code-example">
<footer>
<div>
<section>
<h3>产品</h3>
<ul>
<li><a href="/product1">产品1</a></li>
<li><a href="/product2">产品2</a></li>
</ul>
</section>
<section>
<h3>服务</h3>
<ul>
<li><a href="/service1">服务1</a></li>
<li><a href="/service2">服务2</a></li>
</ul>
</section>
</div>
<hr>
<p>&copy; 2024 公司名称. 保留所有权利.</p>
<p>
<a href="/privacy">隐私政策</a> |
<a href="/terms">服务条款</a>
</p>
</footer>
</div>
</div>
</div>
</div>
<!-- 综合实例 -->
<div class="demo-container">
<h3>10. 综合实例：完整页面结构</h3>
<div class="real-world-example">
<h4>博客网站完整结构</h4>
<div class="code-example">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<article>
<header>
<h3>文章标题1</h3>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<p>文章摘要...</p>
<footer>
<p>标签：<a href="/tag/html">HTML</a></p>
</footer>
</article>
<article>
<header>
<h3>文章标题2</h3>
<time datetime="2024-01-02">2024年1月2日</time>
</header>
<p>文章摘要...</p>
<footer>
<p>标签：<a href="/tag/css">CSS</a></p>
</footer>
</article>
</section>
<nav aria-label="分页导航">
<a href="/page/1">上一页</a>
<a href="/page/2">下一页</a>
</nav>
</main>
<aside>
<section>
<h2>热门文章</h2>
<ul>
<li><a href="/popular1">热门文章1</a></li>
<li><a href="/popular2">热门文章2</a></li>
</ul>
</section>
<section>
<h2>标签云</h2>
<div>
<a href="/tag/html">HTML</a>
<a href="/tag/css">CSS</a>
<a href="/tag/javascript">JavaScript</a>
</div>
</section>
</aside>
<footer>
<section>
<h2>联系信息</h2>
<address>
<p>邮箱：blog@example.com</p>
<p>微信：myblog_official</p>
</address>
</section>
<p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>
</body>
</html>
</div>
</div>
<div class="structure-visualization">
<h4>页面结构可视化</h4>
<div class="structure-level-1">html</div>
<div class="structure-level-2">├── head</div>
<div class="structure-level-2">└── body</div>
<div class="structure-level-3"> ├── header</div>
<div class="structure-level-4"> │ ├── h1</div>
<div class="structure-level-4"> │ └── nav</div>
<div class="structure-level-3"> ├── main</div>
<div class="structure-level-4"> │ ├── section</div>
<div class="structure-level-4"> │ │ ├── h2</div>
<div class="structure-level-4"> │ │ ├── article</div>
<div class="structure-level-4"> │ │ └── article</div>
<div class="structure-level-4"> │ └── nav (分页)</div>
<div class="structure-level-3"> ├── aside</div>
<div class="structure-level-4"> │ ├── section</div>
<div class="structure-level-4"> │ └── section</div>
<div class="structure-level-3"> └── footer</div>
<div class="structure-level-4"> ├── section</div>
<div class="structure-level-4"> └── p</div>
</div>
</div>
<script>
// 结构性语义标签演示脚本
// 显示不同类型的页面结构
function showStructure(type) {
const demoDiv = document.getElementById('structureDemo');
// 移除所有按钮的active类
document.querySelectorAll('.demo-button').forEach(btn => {
btn.classList.remove('active');
});
// 添加当前按钮的active类
event.target.classList.add('active');
let structureHTML = '';
switch(type) {
case 'complete':
structureHTML = `
<div class="structure-visualization">
<h4>完整页面结构</h4>
<div class="semantic-element element-header">
<strong><header></strong> - 页面头部
<div class="nested-structure">
<div class="semantic-element element-nav">
<strong><nav></strong> - 主导航
</div>
</div>
</div>
<div class="semantic-element element-main">
<strong><main></strong> - 主要内容
<div class="nested-structure">
<div class="semantic-element element-section">
<strong><section></strong> - 内容区块
<div class="nested-structure">
<div class="semantic-element element-article">
<strong><article></strong> - 文章内容
</div>
</div>
</div>
</div>
</div>
<div class="semantic-element element-aside">
<strong><aside></strong> - 侧边栏
</div>
<div class="semantic-element element-footer">
<strong><footer></strong> - 页面底部
</div>
</div>
`;
break;
case 'minimal':
structureHTML = `
<div class="structure-visualization">
<h4>最小页面结构</h4>
<div class="semantic-element element-header">
<strong><header></strong> - 页面头部
</div>
<div class="semantic-element element-main">
<strong><main></strong> - 主要内容
</div>
<div class="semantic-element element-footer">
<strong><footer></strong> - 页面底部
</div>
</div>
`;
break;
case 'blog':
structureHTML = `
<div class="structure-visualization">
<h4>博客页面结构</h4>
<div class="semantic-element element-header">
<strong><header></strong> - 博客头部
<div class="nested-structure">
<div class="semantic-element element-nav">
<strong><nav></strong> - 分类导航
</div>
</div>
</div>
<div class="semantic-element element-main">
<strong><main></strong> - 文章列表
<div class="nested-structure">
<div class="semantic-element element-article">
<strong><article></strong> - 博客文章1
</div>
<div class="semantic-element element-article">
<strong><article></strong> - 博客文章2
</div>
</div>
</div>
<div class="semantic-element element-aside">
<strong><aside></strong> - 标签云、热门文章
</div>
<div class="semantic-element element-footer">
<strong><footer></strong> - 版权信息
</div>
</div>
`;
break;
case 'news':
structureHTML = `
<div class="structure-visualization">
<h4>新闻网站结构</h4>
<div class="semantic-element element-header">
<strong><header></strong> - 新闻头部
<div class="nested-structure">
<div class="semantic-element element-nav">
<strong><nav></strong> - 新闻分类
</div>
</div>
</div>
<div class="semantic-element element-main">
<strong><main></strong> - 新闻内容
<div class="nested-structure">
<div class="semantic-element element-section">
<strong><section></strong> - 头条新闻
</div>
<div class="semantic-element element-section">
<strong><section></strong> - 分类新闻
<div class="nested-structure">
<div class="semantic-element element-article">
<strong><article></strong> - 新闻条目
</div>
</div>
</div>
</div>
</div>
<div class="semantic-element element-aside">
<strong><aside></strong> - 热点新闻、广告
</div>
<div class="semantic-element element-footer">
<strong><footer></strong> - 联系方式、友情链接
</div>
</div>
`;
break;
}
demoDiv.innerHTML = structureHTML;
}
// 页面加载时显示完整结构
document.addEventListener('DOMContentLoaded', function() {
showStructure('complete');
});
</script>
</body>
</html>5.2.2 标签嵌套规则和最佳实践
嵌套规则
html
<!-- 正确的嵌套关系 -->
<body>
<header>
<h1>站点标题</h1>
<nav>导航菜单</nav>
</header>
<main>
<section>
<h2>区块标题</h2>
<article>
<header>
<h3>文章标题</h3>
</header>
<p>文章内容</p>
<footer>
<p>文章元信息</p>
</footer>
</article>
</section>
</main>
<aside>
<section>
<h2>侧边栏标题</h2>
<p>侧边栏内容</p>
</section>
</aside>
<footer>
<p>页面底部信息</p>
</footer>
</body>使用指南
javascript
// 结构性标签使用指南
const semanticGuide = {
header: {
purpose: "表示页面或区域的头部",
canContain: ["h1-h6", "nav", "p", "div", "section"],
cannotContain: ["header", "footer", "main"],
multipleAllowed: true,
commonUse: ["页面头部", "文章头部", "区块头部"]
},
nav: {
purpose: "表示导航链接区域",
canContain: ["ul", "ol", "li", "a", "div"],
cannotContain: ["main"],
multipleAllowed: true,
commonUse: ["主导航", "面包屑", "分页", "目录"]
},
main: {
purpose: "表示文档的主要内容",
canContain: ["section", "article", "div", "p", "h1-h6"],
cannotContain: ["header", "footer", "nav", "aside"],
multipleAllowed: false,
commonUse: ["页面主要内容区域"]
},
article: {
purpose: "表示独立的文章内容",
canContain: ["header", "footer", "section", "p", "h1-h6"],
cannotContain: ["main"],
multipleAllowed: true,
commonUse: ["博客文章", "新闻", "评论", "产品"]
},
section: {
purpose: "表示文档的区域或章节",
canContain: ["header", "footer", "h1-h6", "p", "div"],
cannotContain: ["main"],
multipleAllowed: true,
commonUse: ["章节", "主题区域", "内容分组"]
},
aside: {
purpose: "表示与主内容相关的补充信息",
canContain: ["section", "nav", "p", "h1-h6"],
cannotContain: ["main"],
multipleAllowed: true,
commonUse: ["侧边栏", "相关链接", "广告", "作者信息"]
},
footer: {
purpose: "表示页面或区域的底部",
canContain: ["section", "nav", "p", "div", "address"],
cannotContain: ["header", "footer", "main"],
multipleAllowed: true,
commonUse: ["页面底部", "文章底部", "区块底部"]
}
};5.2.3 实际应用案例
电商网站结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电商网站</title>
</head>
<body>
<header>
<h1>电商网站</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/cart">购物车</a></li>
<li><a href="/account">账户</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门产品</h2>
<div class="product-grid">
<article>
<header>
<h3>产品名称</h3>
<p>价格：￥999</p>
</header>
<figure>
<img src="product.jpg" alt="产品图片">
<figcaption>产品展示</figcaption>
</figure>
<section>
<h4>产品描述</h4>
<p>产品详细介绍...</p>
</section>
<footer>
<button>添加到购物车</button>
</footer>
</article>
</div>
</section>
<section>
<h2>用户评价</h2>
<article>
<header>
<h3>用户评价</h3>
<p>评价者：用户A</p>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<p>产品质量很好，非常满意！</p>
<footer>
<p>评分：⭐⭐⭐⭐⭐</p>
</footer>
</article>
</section>
</main>
<aside>
<section>
<h2>推荐产品</h2>
<ul>
<li><a href="/product1">推荐产品1</a></li>
<li><a href="/product2">推荐产品2</a></li>
</ul>
</section>
<section>
<h2>购物指南</h2>
<ul>
<li><a href="/guide/payment">支付方式</a></li>
<li><a href="/guide/shipping">配送说明</a></li>
<li><a href="/guide/return">退换货政策</a></li>
</ul>
</section>
</aside>
<footer>
<section>
<h2>客户服务</h2>
<address>
<p>客服电话：400-123-4567</p>
<p>客服邮箱：service@example.com</p>
<p>工作时间：周一至周五 9:00-18:00</p>
</address>
</section>
<section>
<h2>关于我们</h2>
<ul>
<li><a href="/about">公司简介</a></li>
<li><a href="/careers">招聘信息</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</section>
<p>© 2024 电商网站. 保留所有权利.</p>
</footer>
</body>
</html>企业网站结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>企业网站</title>
</head>
<body>
<header>
<img src="logo.png" alt="公司Logo">
<h1>公司名称</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/news">新闻</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h2>公司简介</h2>
<p>了解我们的历史和使命</p>
</header>
<p>公司成立于2010年，致力于提供优质的服务...</p>
</section>
<section>
<header>
<h2>我们的服务</h2>
<p>专业的解决方案</p>
</header>
<article>
<header>
<h3>服务项目A</h3>
</header>
<p>服务描述...</p>
<footer>
<p><a href="/service/a">了解更多</a></p>
</footer>
</article>
<article>
<header>
<h3>服务项目B</h3>
</header>
<p>服务描述...</p>
<footer>
<p><a href="/service/b">了解更多</a></p>
</footer>
</article>
</section>
<section>
<header>
<h2>最新动态</h2>
<p>关注我们的最新消息</p>
</header>
<article>
<header>
<h3>新闻标题</h3>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<p>新闻内容摘要...</p>
<footer>
<p><a href="/news/1">阅读全文</a></p>
</footer>
</article>
</section>
</main>
<aside>
<section>
<h2>快速链接</h2>
<ul>
<li><a href="/download">资料下载</a></li>
<li><a href="/faq">常见问题</a></li>
<li><a href="/support">技术支持</a></li>
</ul>
</section>
<section>
<h2>联系信息</h2>
<address>
<p>电话：010-12345678</p>
<p>邮箱：info@company.com</p>
<p>地址：北京市朝阳区XXX街道</p>
</address>
</section>
</aside>
<footer>
<section>
<h2>友情链接</h2>
<ul>
<li><a href="/partner1">合作伙伴1</a></li>
<li><a href="/partner2">合作伙伴2</a></li>
</ul>
</section>
<p>© 2024 公司名称. 保留所有权利.</p>
<p>
<a href="/privacy">隐私政策</a> |
<a href="/terms">服务条款</a>
</p>
</footer>
</body>
</html>本节要点回顾
- header元素：标识页面或区域头部，包含标题、导航和重要信息
- nav元素：标识导航区域，包含主要的导航链接和菜单
- main元素：标识主要内容区域，每个页面只能有一个main元素
- article元素：标识独立的文章内容，可以单独存在和分发
- section元素：标识内容区块，用于组织相关的内容
- aside元素：标识侧边栏内容，与主内容相关的补充信息
- footer元素：标识页面或区域底部，包含元信息和链接
相关学习资源
常见问题FAQ
Q: 一个页面可以有多个header和footer吗？
A: 可以，页面可以有多个header和footer，它们可以属于不同的section或article。
Q: main元素和div元素有什么区别？
A: main元素具有语义含义，表示页面的主要内容，而div是通用容器。每页只能有一个main元素。
Q: 何时使用section而不是div？
A: 当内容有明确的主题和标题时使用section，纯粹用于样式目的时使用div。
Q: article和section如何区分使用？
A: article适用于独立的、可分发的内容（如博客文章），section适用于主题相关的内容分组。
下一节预览：第5章第3节 - 内容语义标签 - 学习HTML5内容语义标签的使用