HTML 理论系统笔记2

语义化 HTML 学习笔记

语义化是一个自然的趋势，这是为了将真正的优化交给专门的层次做，人来更好的可读和维护我们的代码，在现代 Web 开发中，HTML 不仅仅是为了显示内容，更是传递结构与语义的语言。理解语义化 HTML，可以让我们的网页在可访问性、SEO、可维护性等方面都更出色。

所以什么是语义化（Semantic）HTML？

语义化 HTML 指的是使用能够表达内容意义的标签 来构建网页，而不是单纯用 <div> 或 <span> 包裹所有内容。举个例子，下面就是一个现代的HTML网页描述

html 复制代码

<header>
  <h1>My Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Understanding CSS</h2>
    <p>CSS is a stylesheet language used to describe the presentation of a document written in HTML.</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">HTML Basics</a></li>
      <li><a href="#">JavaScript Tips</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

在上面的代码中，每个标签都有明确的意义：

<header> 表示页眉；
<nav> 表示导航菜单；
<main> 是主体内容；
<article> 表示独立的文章块；
<aside> 是侧边栏或补充内容；
<footer> 是页脚。

这样的结构不仅让开发者一眼就能看懂，也让屏幕阅读器和搜索引擎轻松理解页面结构。

为什么要关心语义化 HTML？

当然，不光是可维护性，咱们还有很多其他实实在在的好处可以考虑。比如说

可访问性提升

屏幕阅读器和其他辅助技术依赖 HTML 的语义来理解页面。例如：

html 复制代码

<h2>最新文章</h2>
<ul>
  <li><a href="#">CSS 入门指南</a></li>
  <li><a href="#">JavaScript 异步学习</a></li>
</ul>

这里 <h2> 明确标记了"最新文章"的标题，辅助设备可以快速跳转和朗读，让视觉受限用户也能高效浏览内容。

SEO 更友好

搜索引擎通过语义标签理解页面内容：

<article> 表示独立条目；
<header> 和 <footer> 帮助区分页面结构；
<nav> 告诉搜索引擎哪些是导航链接。

可维护性与可读性

当团队协作时，语义化的 HTML 让同事更容易理解页面结构，减少注释依赖，也方便后期样式或功能扩展。

样式与结构分离

语义化 HTML 鼓励把内容结构和样式分开，通过 CSS 控制外观，而不是靠 <div> + 类名堆积样式。

良好的结构层次（Hierarchy）为何重要？

不要用 CSS 的 font-size 去模拟标题层级，语义性优先。

HTML 的标题标签 <h1>--<h6> 定义了文档的大纲（document outline）：

html 复制代码

<h1>网页设计入门</h1>
<h2>HTML 基础</h2>
<h3>标签与属性</h3>
<h2>CSS 基础</h2>
<h3>选择器与优先级</h3>

一个良好的正确的层次可以提升可读性，用户可快速扫描信息，帮助屏幕阅读器理解内容层级。避免搜索引擎抓取混乱。

呈现型 HTML vs 语义化 HTML

表现型 HTML ：关注外观或布局，过度使用 <b>, <i> 或 <div>/<span>。

html 复制代码

<div class="header">
  <div class="logo">My Site</div>
  <div class="menu">...</div>
</div>

语义化 HTML：标记表达内容意义，结构清晰：

html 复制代码

<header>
  <div class="logo">My Site</div>
  <nav>...</nav>
</header>

更多语义对比示例：

html 复制代码

<!-- 不推荐 -->
<b>重要提示</b>
<i>强调内容</i>

<!-- 推荐 -->
<strong>重要提示</strong>
<em>强调内容</em>

<strong> 与 <em> 表示语义上重要或强调；
<b> 与 <i> 仅视觉效果，无语义意义。

常用语义元素与用途

类型	常用标签	用途
文档结构	`<header>`, `<nav>`, `<main>`, `<aside>`, `<section>`, `<article>`, `<footer>`	页面或区块结构
文本语义	`<p>`, `<h1>`--`<h6>`, `<blockquote>`, `<cite>`, `<q>`, `<address>`	段落、标题、引用、联系信息
强调	`<strong>`, `<em>`, `<mark>`	重要或强调内容
列表	`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`	有序/无序列表或定义列表
媒体	`<figure>`, `<figcaption>`, `<picture>`, `<img alt="">`, `<audio>`, `<video>`	图片、音频、视频及说明
表单	`<form>`, `<label>`, `<fieldset>`, `<legend>`, `<input>`, `<button>`, `<select>`	用户输入交互
表格	`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`	数据表格