前端基础：html语义化

HTML 语义化，就是使用有明确含义的 HTML 标签，来描述网页内容，而不是所有内容都用 <div>。

简单理解：让浏览器、搜索引擎、开发者都能看懂网页的结构和每部分内容的作用。

1. 举个例子

假设我们要开发一个博客页面。

❌ 不使用语义化标签：

xml 复制代码

<div class="header">我的博客</div>
<div class="nav">首页 | 文章 | 关于</div>
<div class="content">
  <div class="title">React 入门教程</div>
  <div>React 是一个前端框架...</div>
</div>
<div class="footer">版权所有</div>

虽然页面能正常显示，但是 HTML 标签本身没有表达内容的含义。

✅ 使用语义化标签：

css 复制代码

<header>我的博客</header>

<nav>首页 | 文章 | 关于</nav>

<main>
  <article>
    <h1>React 入门教程</h1>
    <p>React 是一个前端 UI 库...</p>
  </article>
</main>

<footer>版权所有</footer>

语义化 HTML 页面结构示意

2. 常见语义化标签

标签	含义
`<header>`	页面或区域头部
`<nav>`	导航菜单
`<main>`	页面主要内容
`<article>`	独立文章或内容
`<section>`	内容分区
`<aside>`	侧边栏、补充内容
`<footer>`	页面或区域底部
`<h1>` ~ `<h6>`	一级到六级标题
`<p>`	段落
`<button>`	按钮
`<form>`	表单

3. 为什么需要 HTML 语义化？

主要有四个好处：

代码可读性好：看到 <nav> 就知道这是导航区域。
SEO 更友好：搜索引擎更容易理解网页内容结构。
无障碍访问：屏幕阅读器可以利用语义化标签帮助用户理解和导航网页。
方便维护：代码结构清晰，团队协作更容易。

4. React 开发中也需要语义化吗？

当然需要。React 的 JSX 本质上也是在描述页面结构。

例如：

javascript 复制代码

function App() {
  return (
    <main>
      <h1>任务管理系统</h1>

      <section>
        <h2>任务列表</h2>
        <button onClick={() => alert("新增任务")}>
          新增任务
        </button>
      </section>
    </main>
  );
}

这里有一个特别重要的点：

不要用 <div onClick={...}> 随意代替 <button>。

因为 <button> 天然支持键盘操作、焦点管理以及按钮语义，而 <div> 默认不具备这些能力。

一句话总结：

HTML 语义化 = 用正确的标签做正确的事情。

<div> 负责通用布局，<header>、<nav>、<main> 等标签负责表达结构含义。

你学 React 的时候，记住这一点就够了：HTML 负责结构与语义，CSS 负责样式，JavaScript/React 负责交互与动态渲染。