写网页别只会用 div：5 个 HTML 标签，让页面更清晰、更易维护

HTML 不只是让文字显示在网页上的工具，它还负责描述内容的组织方式。与其把页面做成一堆看不出区别的容器，不如从一开始就用合适的标签表达每个区域的作用。

一、什么是语义化 HTML？

语义化 HTML，就是根据内容的实际含义选择标签，而不是单纯为了改变外观。

例如，文章标题应该使用标题标签，导航区域应该使用导航标签，独立文章则可以使用文章标签。

两种写法都可能显示出相似的页面，但表达的意思不同：

<div class="title">我的旅行日记</div>

<h1>我的旅行日记</h1>

第一种写法只表示一个普通容器；第二种则明确告诉浏览器，这是页面的一级标题。

语义化标签不会自动让网页变漂亮，但能帮助辅助技术识别页面结构，也有利于搜索引擎理解内容。MDN 的 HTML 指南也建议根据标签的语义选择元素，而不是仅仅考虑默认样式。

二、认识 5 个常用标签

1. <header>：页面或区域的头部

通常放置网站标志、标题或介绍信息。它既可以用于整个页面，也可以用于某篇文章的头部。

2. <nav>：导航区域

用来组织网站的主要导航链接，例如首页、教程、关于我们等。并非所有链接都必须放进导航标签。

3. <main>：页面主要内容

用来包围当前页面的核心内容。普通网页通常应有一个主要的 <main> 区域。

4. <article>：独立的内容单元

适合博客文章、新闻报道或能够独立阅读和分发的内容。

5. <section>：主题内容分区

用于组织围绕同一主题的内容，通常可以配合标题使用，例如“学习指南”或“常见问题”。

三、动手练习：写一个简单的博客首页

创建一个名为 index.html 的文本文件，将下面的代码复制进去，然后用浏览器打开。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>我的技术博客</title>
</head>
<body>
  <header>
    <h1>我的技术博客</h1>
    <p>记录每天学到的小知识。</p>
  </header>

  <nav aria-label="主导航">
    <a href="#home">首页</a>
    <a href="#guide">学习指南</a>
  </nav>

  <main id="home">
    <article>
      <h2>今天学习 HTML</h2>
      <p>语义化标签能让网页结构更加清晰。</p>

      <section id="guide">
        <h3>学习建议</h3>
        <p>先理解标签的含义，再学习 CSS 样式。</p>
      </section>
    </article>
  </main>
</body>
</html>

这个例子不需要安装框架，也不需要服务器，保存后就可以直接查看。

其中，lang="zh-CN" 用来声明页面语言，字符编码设置为 UTF-8 可以帮助正确显示中文；viewport 则有助于移动设备按预期设置页面视口。

四、初学者最容易犯的 3 个错误

错误一：所有区域都用 <div>。

<div> 本身没有问题，它适合在没有更合适语义标签时充当通用容器。但如果每个区域都只用它，代码就不容易一眼看出页面结构。

错误二：把 <section> 当成万能容器。

如果只是为了布局或添加 CSS 样式，<div> 往往更合适。<section> 更适合表示一个有明确主题的内容分区。

错误三：为了外观选择标签。

例如，不要因为 <h1> 默认字体较大，就把它用于所有需要大字显示的地方。标题层级应反映内容结构，外观则交给 CSS 控制。

另外，语义化并不能自动保证网站完全符合无障碍要求。图片替代文本、键盘操作、颜色对比度等问题仍需要单独检查。

五、下一步可以学什么？

完成这个小练习后，可以继续尝试：

• 给导航链接添加简单的 CSS 样式。
• 为文章补充 <footer>，展示作者和更新时间。
• 使用 <ul> 和 <li> 创建学习任务清单。
• 检查标题层级是否清楚，避免随意跳过标题级别。

总结： 写 HTML 时，先用合适的标签表达内容的含义，再通过 CSS 控制外观，是建立良好网页结构最简单也最值得坚持的习惯。