HTML 语义化标签
学习 header/nav/main/article/footer 等语义标签 · 难度：入门 · +10XP
HTML 语义化标签
语义化标签自带含义——不仅让代码更易读，还帮助搜索引擎和屏幕阅读器理解页面结构。
常见语义标签
| 标签 | 含义 | 替代的div写法 |
|---|---|---|
<header> | 页头 | <div class="header"> |
<nav> | 导航栏 | <div class="nav"> |
<main> | 主内容 | <div class="main"> |
<article> | 独立文章 | <div class="article"> |
<section> | 页面分区 | <div class="section"> |
<aside> | 侧边栏 | <div class="sidebar"> |
<footer> | 页脚 | <div class="footer"> |
完整页面结构
<body>
<header>网站Logo和标题</header>
<nav>导航菜单</nav>
<main>
<article>主要内容</article>
<aside>侧边栏</aside>
</main>
<footer>版权信息</footer>
</body>为什么重要？
- SEO：搜索引擎更容易理解页面结构和内容重点
- 可访问性：屏幕阅读器可以根据语义标签跳转导航
- 代码可读性：<header>比<div class="header">更直观
???? 练习
- 用语义标签搭建一个博客页面框架
- 将现有的一堆div替换为语义标签