从div到h1：HTML标签语义化与常用标签详解

前阵子带一位刚入行的实习生，让他把设计稿切成静态页面。他交上来的代码打开一看，满屏都是<div>，连标题都用<div class="title">加CSS调字号。我问他为什么不直接写<h1>，他犹豫了一下说：“怕这些标签自带样式，影响我排版。”这个回答其实代表了相当一部分入门同学的真实困惑——觉得<h1>、<h2>、<p>这些标签只是“带样式的div”，用哪个都行，甚至不用更好。

今天想把这件事说透。HTML标签不是样式工具，它最核心的价值是给内容一个准确的身份说明。浏览器、搜索引擎、读屏软件，全靠这些标签判断页面里每一块文字和图片到底是什么意思。这篇文章会从标签的底层逻辑讲起，把开发里使用频率最高的标签族逐个拆开说明，包括它们的基本写法、默认行为、常见坑和组合方式。适合刚学完HTML语法、正在写第一个完整页面的新手，也适合那些写了很久div、想重新整理标签体系的前端同学。

1. 标签的底层逻辑：它给内容一个“身份说明”，不是给一套“默认皮肤”

1.1 标签在页面里到底做了什么

很多人学HTML时第一个记住的就是“标签是成对出现的尖括号”，但很少去想尖括号包裹的内容在浏览器里发生了什么。其实标签的作用可以类比成快递盒上的面单：盒子还是那个盒子，但贴了“易碎品”就会被轻拿轻放，贴了“生鲜”就要冷藏运输。同理，<p>告诉浏览器“这是一段文字”，<h1>告诉浏览器“这是这块内容的标题”，<ul>告诉浏览器“这里是一组没有顺序的列表项”。

浏览器拿到标签后，会调用两条处理链路。第一，按照HTML规范里约定好的默认样式表，给标签套上一层基础外观，比如<h1>字号大、加粗，<a>蓝色下划线，<ul>前面带圆点。第二，在内存里构建一棵DOM树，把标签和内容组织成节点关系，方便JavaScript去查找和操作。这两条链路决定了标签同时拥有“语义”和“默认表现”两个属性，而默认表现只是语义的外在视觉结果，不是标签存在的目的。

所以当你想把一个文字放大加粗时，直接用<h1>并改它的CSS样式，这件事本身没问题；有问题的是反过来——为了得到某个字号，把一段正文包裹在<h1>里。页面视觉上可能看不出差别，但搜索引擎会把这段文字当成一个重要标题去索引，读屏软件也会按标题层级跳转，整个文档结构就被搞乱了。

1.2 我习惯把常用HTML标签分成四类

做了七八年前端，我自己心里有一个很简单的分类方法，把标签按照承担的职责分成四类。

第一类是文档骨架标签，负责搭建页面的基础框架，典型代表是<html>、<head>、<body>、<meta>、<title>。这类标签每个页面只能出现一次，而且位置基本固定，它们在DOM树的最外层，决定了页面的元信息和整体结构。

第二类是内容组织标签，负责对页面主体内容切分段落和层级，比如<h1>到<h6>、<p>、<ul>、<ol>、<table>、<div>。这类标签解决的是“内容怎么划分”的问题，它们是页面上出现次数最多的一批。

第三类是交互或媒体标签，负责让用户和页面产生互动，包括<a>、<button>、<input>、<textarea>、<select>、<img>、<video>。它们通常携带src、href、action这些特殊属性，告诉浏览器要加载什么资源、点击后跳转到哪里、提交时把数据发给谁。

第四类是语义辅助标签，不负责具体内容，而是给内容补充额外说明，比如<strong>表示强调、<em>表示语气加重、<small>表示注释性小字、<mark>表示高亮。这类标签写在内容标签里层，让一段文字的含义更精确。

理解这个分类后，再去记标签就不会觉得是死背字母表，而是知道每个标签在文档里站的位置。后面几节，我会按照这个分类一层层展开。

2. 页面骨架五件套：doctype、html、head、meta与title的搭配细节

2.1 doctype不是HTML标签，但少了它整个页面都会“降级”

先说一个容易忽略的点：<!DOCTYPE html>不是HTML标签，它是一条文档类型声明。它的作用是告诉浏览器“请严格按照HTML5标准解析这份文档”。如果漏掉这行，浏览器会进入一种叫“怪异模式”（quirks mode）的兼容状态，用上世纪90年代的盒模型算法渲染页面。同样一个width: 100px的div，在怪异模式下padding会往里面挤，在标准模式下padding会往外撑，新手写半天样式对不上，多半都是这个原因。

HTML5的doctype写法比老版本短得多，就是<!DOCTYPE html>，大小写都行，但业界习惯统一用大写。它必须放在文件第一行，前面连注释和空行都不能有。我见过有人把doctype放在<head>后面，浏览器直接忽略，整个页面的CSS布局全线崩坏，排查了一下午才发现是doctype的位置错了。

2.2<html>标签上的lang属性，比想象中更重要

<html>是所有标签的最外层容器，官方叫法叫“文档根元素”，页面里所有其他标签都得放在它的开标签和闭标签之间。大部分教程会告诉你，<html>必须加一个lang属性，但很少说为什么。

lang="zh-CN"表示页面主要语言是简体中文。这个属性直接影响三件事：第一，浏览器翻译插件会依据它判断要不要提示翻译；第二，读屏软件会按对应的语音包朗读文字，如果你的页面是中文内容却写了lang="en"，屏幕阅读器会用英文音素读中文，出来的是一串无法听懂的乱码；第三，搜索引擎的爬虫会把语言作为一种排名信号。所以即使你打开编辑器自动生成的模板里没写lang，自己也应该补上。

2.3 head里的meta、title：SEO和兼容性的第一道关卡

<head>标签本身不展示任何页面内容，它就像一个档案袋，装着关于这个页面的元信息。所有<meta>、<title>、<link>、<style>这些标签都要放在<head>里。

<title>是每个页面必须有的，它的内容是浏览器标签页上显示的文字，也是搜索结果里那个蓝色标题。一个好的<title>应该做到两点：长度控制在30个汉字以内，核心关键词放前面。比如一个介绍CSS选择器的页面，写成“CSS选择器详解：常用选择器与优先级规则 - 某技术博客”就比“某技术博客 - CSS选择器详解”更容易让用户一眼看出页面内容。

<meta>标签里最常用的三个。第一个是<meta charset="UTF-8">，它声明文档字符编码，不写的话中文很可能显示成乱码。第二个是<meta name="viewport" content="width=device-width, initial-scale=1.0">，它保证页面在手机上按设备宽度渲染，不写的话移动端会按980px的虚拟宽度缩放，字小到看不清。第三个是<meta name="description" content="一句话描述">，它会在搜索结果里作为摘要展示，好的描述能提升点击率。

2.4 body：用户看到的一切都从这里开始

<body>是页面可见内容的唯一容器，它不需要任何特殊属性，但有两条实操经验值得记住。第一，<body>里不应该直接放零散的文本节点，所有文字和元素都应该至少被一个语义标签包裹，比如<p>或者<section>，这样DOM结构才是规整的树。第二，<body>标签本身在CSS里经常被用来设置全局背景色或字体，比如body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }，因为字体和背景色会默认继承给后代的块级元素，写在body上是最合理的全局设置方式。

3. 正文内容里最高频的六个标签族：标题、段落、列表、链接、图片、表格

3.1 标题标签<h1>~<h6>：层级就是文档大纲

标题标签是正文内容里最重要的语义标签。<h1>是页面最高级标题，<h2>是次一级的章节标题，依次递减到<h6>。它们默认的字号、粗细有差异，但不要为了视觉差异去选标签级别。正确的做法是：先想清楚内容结构，再对应到标题层级，最后用CSS覆盖默认样式。

页面规划标题时有一个硬性建议：一个页面只保留一个<h1>。因为<h1>相当于整篇文章的题目，多个<h1>会让搜索引擎和读屏软件搞不清楚哪个才是主要内容的起点。如果一个页面里有多个独立板块，每个板块用<h2>做标题，板块内再细分小标题用<h3>，这样一层层嵌套下来，文档大纲就是一棵清晰有致的树。很多内容管理系统还会自动根据h1~h6生成目录，这时候标题层级是否规范，直接决定生成的目录能不能用。

3.2<p>、<br>与文本格式化标签：排版的基本单位

<p>标签包裹的是一段独立成块的文字段落。段落之间默认有空行，这是圆角舒服阅读节奏的关键之一。写HTML时要注意，一段文字里的换行应该交给CSS的white-space或者块级元素自动换行去处理，不要在<p>里硬塞十几个<br>来制造行距，那是上古时代的行为。

<br>是强制换行，它表示“在当前位置换一行继续写”，适合用在地址、诗歌这种需要精确控制断行的场景。它是少数没有内容的空标签，通常写<br>就够了，不需要<br></br>这种闭合成对写法。

文本格式化标签里，最容易被忽视的是<strong>和<b>的区别。<strong>代表“重要内容”，语义是强调；<b>只代表“外观上加粗”，不附加任何重要性。读屏软件会加重朗读<strong>里的文字，但对<b>没有任何特殊处理。所以想强调重点，请用<strong>；只是想加粗展示某个数字或标签名，用<b>也完全合理。同理，<em>表示语气强调，<i>只是斜体外观，两者不要混用。

3.3 列表标签：<ul>、<ol>、<li>与自定义列表

列表分两种：<ul>是无序列表，列表项之间是同等级、没有先后意义的，比如导航菜单、商品特性清单；<ol>是有序列表，列表项有先后顺序，比如操作步骤、排行榜。

写列表的时候，最核心的嵌套规则是：<ul>和<ol>的直接子元素只允许是<li>，不允许是其他标签。也就是说，如果你想在列表里放一个段落，也得先把段落包进<li>里。常见的错误写法是<ul><p>说明文字</p><li>项目</li></ul>，这在HTML标准里是非法的，浏览器解析时会把这个<p>强行踢出<ul>。

还有一种不太常用的自定义列表<dl>，配合<dt>和<dd>使用，专门表示“名词——描述”这样的配对关系。比如一个课程列表，课程名放<dt>，课程介绍放<dd>。它最大的价值是让“键-值”形式的内容有语义归属，比用<ul>包两行文字更准确。

3.4 链接标签<a>：href、target与锚点

<a>标签是互联网的基石，它把一个个独立页面串成一张网。最基础的用法是<a href="https://example.com">链接文字</a>。href属性控制点击后跳转的目标地址，可以是网址，也可以是相对路径，比如href="detail.html"表示当前目录下的另一个页面。

新手容易忽略的是target属性。默认情况下，点击<a>会在当前标签页跳转，如果想要新标签页打开，需要写target="_blank"。但是这里有一个安全问题：新打开的页面可以通过window.opener对象反向控制原来的页面，所以给target="_blank"的链接加上rel="noopener noreferrer"是一个好习惯。另外，站内的用户协议、条款说明这类长文档，不建议用新窗口打开，强制新开标签页会把用户对页面上下文的记忆打断。

href还可以写成href="#id名"实现页内锚点跳转。比如页面底部有个“回到顶部”的链接，href="#top"配合页面顶部某个元素的id="top"就可以实现。锚点跳转时浏览器会直接滚动到目标元素位置，但不会触发平滑滚动动画，想要丝滑过渡还需要一点CSSscroll-behavior: smooth。

3.5 图片标签<img>：alt属性比src更重要

<img>是少数没有闭合标签的元素，它通过src属性加载外部图片资源，通过alt属性提供图片的替代文本。很多新手写图片只写src，觉得alt是多余的，直到图片因为网络问题加载不出来，页面上只留下一片空白才发现连提示都没有。

alt的核心作用是“当图片不可见时，告诉用户图片应该传达什么信息”。它的意义不只是SEO，更重要的是无障碍访问。视觉正常的用户看图片很容易，但依赖屏幕阅读器的用户只能听到alt里的文字。所以给每张有内容的图片写清楚描述性alt，比如alt="一位开发者在电脑前调试页面布局"，比不写要好得多。对于纯装饰性的图片（比如一条分割线），alt可以留空，写alt=""，这样可以告诉读屏软件“这张图没有任何信息，请跳过”。

<img>还支持width、height属性，但建议只通过CSS控制尺寸。如果HTML里直接写了固定的宽高，在响应式布局里还需要额外覆盖，不如从一开始就不写。真正值得写的是loading属性：loading="lazy"可以让屏幕外的图片延迟加载，页面首屏渲染速度会有明显提升，但要注意首页首屏的图片不要设成lazy，否则视口内的图片也要等滚动才出现，体验反而更差。

3.6 表格标签<table>：做好数据表格，别用来切页面

在HTML刚发明那些年，<table>曾被大量用于页面布局，因为它能撑起多列结构。今天的多列布局有flex和grid两种更强大的CSS方案，<table>就应该回归它最本职的场景——展示二维数据，比如成绩单、价格对比表、账单明细。

一个规范的表格结构分为三个部分：<table>里用<thead>放表头行，<tbody>放数据行，<tfoot>放汇总行。每个行标签是<tr>（table row），表头单元格用<th>，数据单元格用<td>。表头<th>默认加粗居中，且有一个隐性的scope属性可以帮助读屏软件把表头和对应数据关联起来，所以表格的表头一定不要用<td>代替。

表格有一个实际开发中经常踩的坑：单元格合并。colspan表示横向合并占几列，rowspan表示纵向合并占几行。合并之后表格整体列数要一致，否则会出现错位。我以前排查过一个bug，一个列数缺失的表格在Chrome里看起来正常，换到Safari就多出一条空白列，查了很久才发现是对应行里少了一个<td>。

4. 表单标签：前端交互的入口，也是最容易出细节问题的区域

4.1<form>的action与method决定了数据去哪

表单的作用是收集用户输入并提交给服务器。<form>标签本身并不会在页面上画出一个框，但只要用户点击提交按钮，浏览器就会把表单内所有带name属性的字段收集起来，按照method指定的方式发给action指定的地址。

method="get"会把数据拼在URL后面发送，比如search?keyword=前端&page=1，适合搜索这种不敏感且需要可收藏可分享的请求。method="post"会把数据放在请求体里发送，适合登录、注册、提交订单这类不希望数据直接暴露在URL上的场景。如果是纯前端项目，只用JavaScript拦截处理表单数据，不交给后端，那action和method也可以不写，但一定要记得给<form>加一个onsubmit处理函数，或者用preventDefault阻止默认提交，否则点击提交按钮页面会刷新，这是新手最常见的一个表单坑。

4.2<input>的type类型绝不是只有文本框

<input>是表单里最灵活的标签，它的核心属性是type，决定控件长什么样、接受什么格式的数据、移动端会弹出什么键盘。

基础的几个：type="text"是单行文本框；type="password"输入内容会显示成圆点；type="email"会在移动端弹出带@键的键盘，并在部分浏览器里自动做格式校验；type="number"只允许输入数字，但要注意它校验的是数字格式而不是范围，想要限制输入范围还需配合min、max属性；type="checkbox"生成复选框；type="radio"生成单选框；type="file"生成文件选择控件，配合accept属性可以限制可选择的文件类型。

还有一个很容易被低估的type="date"，它直接调起系统级日期选择器，省去写日历组件的麻烦。不过它的显示格式受浏览器语言环境影响，不同操作系统下长相不一致，如果产品要求风格统一，还是得用前端组件库的日期选择器。

4.3<textarea>、<select>、<button>的正确打开方式

<textarea>是多行文本输入框，它的内容写在标签体内部而不是value属性里，这是它和<input>最大的差异点。比如<textarea>请输入留言内容</textarea>，这个默认提示文字可以被用户编辑，如果想做预设值又允许用户清空后提交，需要配合JavaScript处理。

<select>是下拉选择框，每个可选项用<option>标签包裹。<select name="city"><option value="shanghai">上海</option><option value="beijing" selected>北京</option></select>，其中selected属性表示默认选中的选项。选项的实际提交值是value里的内容，而不是用户看到的文字，这个设计让前后端可以解耦：用户看到的是中文城市名，后端收到的是稳定编码。

<button>标签尽量用type属性显式声明类型。在<form>里不写type的<button>默认就是type="submit"，点击会触发表单提交。如果想做一个只触发JavaScript事件而不提交表单的按钮，必须写成<button type="button">，这是我被追问过最多的问题之一。

4.4<label>和name：看似不起眼，却决定表单的可用性

<label>标签用来把文字说明和表单项绑定起来，写法是<label for="username">用户名</label><input id="username" type="text">，或者直接把<input>嵌在<label>内部。绑定的价值在于：点击文字说明时，对应输入框会自动聚焦，这在PC端鼠标操作和移动端触控操作中都大幅提升了可点击区域。

name属性则是表单提交时的字段名。没有name的<input>根本不会被浏览器放进提交数据里，哪怕用户填了内容也不会发给后端。所以写表单的一个自查动作就是：每个需要传值的控件，都必须确保有name。复选框和单选框还有一个小细节：同一组选项的name必须相同，这样浏览器才会把它们视为一组，实现单选互斥或复选分组。

5. 语义化标签与无语义标签：什么时候用div，什么时候用header

5.1<div>和<span>没有语义，但也不是不能用

<div>是最典型的无语义块级标签，<span>是最典型的无语义行内标签。它们存在的意义就是作为“万能容器”布局和样式定位。前端基本功不在于“不用div”，而在于“不滥用div”。

判断标准很简单：如果一段内容有一个现成的语义标签能表达，就不要用div。比如文章标题就该用<h1>，导航用<nav>，独立的内容单元用<article>。只有当一个容器纯粹是为了CSS布局分组或者JavaScript操作定位而存在时，才该轮到<div>出场。同样的，<span>一般只用于对单个词、数字做样式微调，比如给价格数字换个颜色，或者给某段关键词加背景高亮。

5.2 语义化标签组：header、nav、main、article、section、aside、footer

HTML5新增了一批带有明确页面区域含义的语义标签，它们让页面结构从“一堆div”变成“一眼看懂的大纲”。

<header>放在页面的顶部区域，通常包含网站Logo、主导航、搜索框；它也可以用在<article>内部，表示文章的开头标题区。<nav>专门包裹导航链接集合，一个页面可以有多组导航，但主要导航应该都收在<nav>里。<main>是整个页面独一无二的主体内容区，一个页面只能有一个<main>，像侧边栏、页脚都不应该放在里面。<article>表示一个完整的、可独立分发的内容块，比如一篇博客、一条新闻、一个商品卡片。<section>表示对内容按主题进行分组的区块，通常会带上一个小小的标题。<aside>放与主体相关但非必要的旁支内容，比如广告、相关推荐。<footer>是页脚，放版权信息、联系方式、备案号这些收尾内容。

这些标签的默认样式几乎没有，所以不会像大家担心的那样“影响我排版”。它们的价值在于，任何人看到一份HTML源码，不需要读内容就能理解哪块是导航、哪块是正文、哪块是版权区。

5.3 常见语义标签速查表

为了让你更清楚记忆，我把最常用的一批标签整理成一张表：

使用这些标签时最重要的是沿线组合。可以说<header>里嵌套<nav>，<main>里嵌套<article>，<article>里再嵌套自己的<header>和<footer>，这种嵌套是语义化结构的常态，完全合法。

5.4 一个改造案例：从div堆砌到语义化

我见过太多新手写出的页面长这样：“<div class="header">、<div class="content">、<div class="left">、<div class="right">、<div class="footer">”。视觉上没问题，但搜索引擎无法理解这个页面的结构层次。我给一个最简单的改造对应关系：

• <div class="header">→<header>
• <div class="nav">→<nav>
• <div class="main-content">→<main>
• <div class="sidebar">→<aside>
• <div class="footer">→<footer>

改完之后，CSS类名可以完全不改变，因为语义标签可以用相同的类名和样式。真正改掉的只是标签本身，而这段代码的可读性和无障碍性立刻提升一个档位。如果你正在做一个内容型产品，比如博客或新闻网站，这种语义化改造非常值得做，因为它直接影响搜索引擎如何识别页面重点。

6. 标签属性与嵌套规则的避坑清单

6.1 布尔属性的真假：不是所有属性都要写值

HTML里有一类叫“布尔属性”的属性，它们只要出现在标签上，就表示开启该功能，不需要写具体值。最常见的有disabled、checked、selected、readonly、required、multiple。

比如<input type="checkbox" checked>和<input type="checkbox" checked="checked">效果完全一样。但从可维护的角度，我建议在团队项目中还是写完整值，因为一些代码格式化工具和旧版语法检查器对简写支持不一致。容易出错的是条件渲染场景，比如动态生成的表单里，用JavaScript控制属性时写el.disabled = true否则写el.disabled = false，千万不能用“删掉属性”来代表false，因为只要事件里有任何遗留的逻辑残留，属性一旦出现就意味着true。

6.2 属性值引号与大小写：统一是降低心智负担的最好方式

HTML属性值通常用双引号包裹，比如class="item"。单引号也是合法的，但如果你在项目里混用，当className和字符串拼接时很容易陷入转义地狱。我的习惯是：HTML里永远用双引号，只有在JavaScript的模板字符串里需要写动态HTML时，才用单引号包属性值。

标签名和属性名大小写不敏感，浏览器都能识别，但HTML规范建议全部小写。实际开发中，由于现代构建工具会统一转换，大多数人不会碰到大小写问题。真正值得注意的是属性值的空格：class="item active"表示两个类名，class="itemactive"是完全不同的一个类名，写class时不要随手加多余空格，也不要忘掉应有的空格。

6.3 标签嵌套的硬性规则

HTML嵌套有一些“红线”，违反了浏览器会默默修正，但修正结果往往不是你想要的。

第一，<p>标签内不能嵌套块级元素，比如<p><div>文字</div></p>，浏览器会自动把</p>提前结束，结果开闭标签错乱。文本段落里想要局部结构调整，可以用<span>、<strong>、<a>这类行内元素。第二，<ul>和<ol>的直接子元素必须全是<li>，不能直接放<div>或者<p>。第三，块级元素里嵌套行内元素是允许的，但行内元素里不能嵌套块级元素，比如<a>标签里放一个<div>，这在HTML5中默认合法但会有微妙访问性问题，一般不建议。第四，表单标签<form>不能嵌套在另一个<form>里，浏览器只认最外层那个。

还有一个很多新手会问的：<a>能包<img>吗？当然可以，图片也可以做成链接，写法是<a href="..."><img src="..." alt="..."></a>。<a>能包<div>吗？在HTML5支持，但要注意这会让可点击区域大幅扩大，容易误点，所以除非有明确的整卡可点击交互，否则还是优先给具体文字和按钮加链接。

6.4 面向新手的自查方法

写完一个页面后，不要急着打开浏览器截图看样式，先做三件事。

第一，打开浏览器开发者工具（F12），在Elements标签页检查DOM树是否和预期结构一致，重点看标签开闭是否匹配、嵌套是否合理。第二，用自己的眼睛“朗读”一遍HTML源码，如果光看标签不看内容就能说出“这是标题、这是导航、这是正文、这是版权区”，说明结构是清晰的。第三，可以使用在线的HTML校验器，把代码贴进去做一次标准校验，它会明确标出漏写的闭标签、不该嵌套的元素、缺失的alt这类问题。

最后分享一个我个人比较受用的习惯：每次写新页面时，我会先在纸上画一画内容区块的层级图，然后用语义标签把骨架搭好，最后才去填充细节样式。这样做出来的页面，无论对浏览器、搜索引擎，还是对后续维护的同事，都是最友好的。HTML标签这件事，说到底是“在正确的位置写正确的标签”，规则并不难，难的是在每一次落笔时都保持这种意识。