HTML5引入了一系列专门用于描述文档结构的语义元素，这些元素让我们的网页像一本结构清晰的书，而不是一堆杂乱无章的文字。让我们一起来认识这些构建现代网页的"基石"。
核心结构元素全家福
HTML5为我们提供了一组专门用于构建页面结构的标签，它们各自都有明确的语义用途：
- <header> - 网站的"门面"通常包含网站标志、主导航和搜索框等可以用在页面顶部，也可以用在文章或章节的头部一个页面可以有多个<header>元素
<header>
<h1>我的个人博客</h1>
<p>分享前端开发心得</p>
</header>- <nav> - 导航的专属区域专门用于包裹导航链接组通常包含网站的主导航、侧边栏导航或页脚导航不是所有链接组都需要放在<nav>里，主要导航才需要
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系我</a></li>
</ul>
</nav>- <main> - 内容的中心舞台包裹页面的主要内容，每个页面应该只有一个不包括重复内容(如页眉、页脚、侧边栏)帮助辅助技术快速定位主要内容
<main>
<h1>最新文章</h1>
<article>...</article>
<article>...</article>
</main>- <article> - 独立的内容单元表示可以独立分发或重复使用的内容如博客文章、新闻故事、论坛帖子、评论等通常包含自己的标题(<h1>-<h6>)和内容
<article>
<h2>HTML5语义化指南</h2>
<p>语义化HTML是现代前端开发的基础...</p>
</article>- <section> - 内容的分段标记用于对相关内容进行分组通常包含一个标题与<article>不同，<section>的内容不一定是独立可分配的
<section>
<h2>用户评价</h2>
<p>以下是我们用户的真实反馈...</p>
</section>- <aside> - 相关内容补充表示与周围内容相关但不是主要内容的部分常用于侧边栏、引文、广告或相关链接组在文章内使用时，可以用于解释专业术语等
<aside>
<h3>相关阅读</h3>
<ul>
<li><a href="#">CSS选择器指南</a></li>
</ul>
</aside>- <footer> - 页面的"落款"通常包含版权信息、联系方式、相关链接等可以用在页面底部，也可以用在文章或章节的结尾一个页面可以有多个<footer>元素
<footer>
<p>© 2023 我的网站. 保留所有权利.</p>
</footer>结构元素使用指南
- 嵌套规则：这些结构元素可以合理嵌套，如<header>中可以包含<nav><article>中可以包含多个<section><section>中也可以包含<article>(当该段包含多个独立内容时)
- 避免过度使用：不是每个<div>都需要替换成语义元素只有在确实有语义价值时才使用这些元素对于纯粹的样式包装，<div>仍然合适
- 浏览器兼容性：所有现代浏览器都支持这些元素在旧版IE中可能需要添加JavaScript垫片(如html5shiv)
实际页面结构示例
<body>
<header>
<h1>网站标题</h1>
<nav>...</nav>
</header>
<main>
<article>
<header>
<h2>文章标题</h2>
<p>作者信息</p>
</header>
<section>
<h3>第一部分</h3>
<p>内容...</p>
</section>
<footer>
<p>发布时间</p>
</footer>
</article>
<aside>
<h2>相关推荐</h2>
<ul>...</ul>
</aside>
</main>
<footer>
<p>版权信息</p>
<nav>...</nav>
</footer>
</body>记住：使用这些结构元素不是为了时髦，而是为了创造更有意义、更易访问的网页。在下一节中，我们将探讨更多内容级别的语义元素，让你的HTML真正"言之有物"。