语义化HTML

语义化HTML是指使用恰当的HTML标签来表达内容的含义，而不仅仅是为了样式。

为什么要使用语义化HTML？

可访问性：屏幕阅读器可以更好地理解页面结构
SEO：搜索引擎可以更准确地解析内容
可维护性：代码更易读、易维护
跨设备兼容性：在不同设备上都能良好显示

常用语义化标签

html

<header> <!-- 页面或区域头部 -->
<nav> <!-- 导航链接 -->
<main> <!-- 主要内容 -->
<article> <!-- 独立内容块 -->
<section> <!-- 内容分区 -->
<aside> <!-- 侧边栏或补充内容 -->
<footer> <!-- 页面或区域底部 -->
<figure> <!-- 媒体内容及其标题 -->
<figcaption> <!-- 媒体内容的标题 -->
<time> <!-- 日期或时间 -->
<mark> <!-- 高亮文本 -->
<address> <!-- 联系信息 -->

语义化页面结构示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>语义化页面示例</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <header>
        <h2>文章标题</h2>
        <time datetime="2026-02-06">2026年2月6日</time>
      </header>
      <p>文章内容...</p>
      <figure>
        <img src="image.jpg" alt="示例图片">
        <figcaption>图片说明</figcaption>
      </figure>
      <footer>
        <p>作者：张三</p>
      </footer>
    </article>
    
    <aside>
      <h3>相关文章</h3>
      <ul>
        <li><a href="#">相关文章1</a></li>
        <li><a href="#">相关文章2</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2026 网站名称 版权所有</p>
    <address>
      联系地址：北京市朝阳区<br>
      电话：010-12345678
    </address>
  </footer>
</body>
</html>