一、为什么要使用语义化标签？
- 代码可读性：标签名称直接表达内容结构。
- SEO 优化：搜索引擎更容易理解页面内容。
- 维护性：结构清晰，减少嵌套混乱。
二、常用语义化标签及用途
| 标签 | 描述 |
|---|---|
<header> | 页面或区块的头部（如标题、导航栏） |
<nav> | 导航链接的容器（主菜单、侧边栏导航） |
<main> | 页面主要内容区域（每个页面仅一个） |
<article> | 独立的内容块（如博客文章、新闻） |
<section> | 文档中的逻辑分区（如章节、标签页） |
<aside> | 与主内容相关但独立的部分（如侧边栏、广告） |
<footer> | 页面或区块的页脚（如版权信息、联系方式） |
<figure> | 自包含内容（如图片、图表、代码块） |
<figcaption> | 为 <figure> 添加标题或说明 |
<time> | 表示时间或日期（如发布日期） |
<address> | 联系信息（通常放在 <footer> 内） |
三、示例对比：<div> vs 语义化标签
传统 <div> 写法
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
<div class="section">...</div>
</div>
<div class="footer">...</div>语义化标签写法
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<section>...</section>
</main>
<footer>...</footer>四、语义化标签使用场景
1. 页面布局
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption>图片说明</figcaption>
</figure>
</article>
<aside>
<h3>相关链接</h3>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2023 网站名称</p>
<address>联系邮箱：marimo@example.com</address>
</footer>
</body>2. 内容区块
<section>
<h2>用户评论</h2>
<article class="comment">
<h3>用户A</h3>
<p>评论内容...</p>
<time datetime="2023-10-01">2023年10月1日</time>
</article>
</section>五、注意事项
避免滥用：仅在需要明确语义时使用，例如：
- 用
<nav>包裹主要导航，而非所有链接。 - 用
<article>表示独立内容，而非普通文本块。
- 用
- 兼容性：所有现代浏览器均支持 HTML5 语义标签，无需额外处理。
- 结合 ARIA 角色：复杂组件可补充
role属性（如role="search"）增强可访问性。
实践建议：在项目中逐步替换 <div>，优先使用语义化标签，并通过 W3C HTML 验证工具 检查结构合理性。
评论 (0)