HTML语意标签

最新推荐文章于 2025-06-15 14:31:43 发布

原创最新推荐文章于 2025-06-15 14:31:43 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了HTML语义化的重要性及其对于提升用户体验、SEO和代码可读性的价值。文中还列举了HTML5中新增的语义化标签，并详细介绍了编写HTML代码时应遵循的最佳实践。

1、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2.写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

3、HTML5新增的语义标签：

常用布局语义标签：


<!–…–>	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义超链接。
<abbr>	定义缩写。
<acronym>	HTML 5 中不支持。定义首字母缩写。
<address>	定义地址元素。
<applet>	HTML 5 中不支持。定义 applet。
<area>	定义图像映射中的区域。
<article>	定义 article。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体文本。
<base>	定义页面中所有链接的基准 URL。
<basefont>	HTML 5 中不支持。请使用 CSS 代替。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文本显示的方向。
<big>	HTML 5 中不支持。定义大号文本。
<blockquote>	定义长的引用。
<body>	定义 body 元素。
<br>	插入换行符。
<button>	定义按钮。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	HTML 5 中不支持。定义居中的文本。
<cite>	定义引用。
<code>	定义计算机代码文本。
<col>	定义表格列的属性。
<colgroup>	定义表格列的分组。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<dd>	定义定义的描述。
<del>	定义删除文本。
<details>	定义元素的细节。
<dfn>	定义定义项目。
<dir>	HTML 5 中不支持。定义目录列表。
<div>	定义文档中的一个部分。
<dl>	定义定义列表。
<dt>	定义定义的项目。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义 fieldset。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	HTML 5 中不支持。
<footer>	定义 section 或 page 的页脚。
<form>	定义表单。
<frame>	HTML 5 中不支持。定义子窗口（框架）。
<frameset>	HTML 5 中不支持。定义框架的集。
<h1> to <h6>	定义标题 1 到标题 6。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hgroup>	定义有关文档中的 section 的信息。
<hr>	定义水平线。
<html>	定义 html 文档。
<i>	定义斜体文本。
<iframe>	定义行内的子窗口（框架）。
<img>	定义图像。
<input>	定义输入域。
<ins>	定义插入文本。
<keygen>	定义生成密钥。
<isindex>	HTML 5 中不支持。定义单行的输入域。
<kbd>	定义键盘文本。
<label>	定义表单控件的标注。
<legend>	定义 fieldset 中的标题。
<li>	定义列表的项目。
<link>	定义资源引用。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<meta>	定义元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	HTML 5 中不支持。定义 noframe 部分。
<noscript>	定义 noscript 部分。
<object>	定义嵌入对象。
<ol>	定义有序列表。
<optgroup>	定义选项组。
<option>	定义下拉列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<param>	为对象定义参数。
<pre>	定义预格式化文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	HTML 5 中不支持。定义加删除线的文本。
<samp>	定义样本计算机代码。
<script>	定义脚本。
<section>	定义 section。
<select>	定义可选列表。
<small>	将旁注 (side comments) 呈现为小型文本。
<source>	定义媒介源。
<span>	定义文档中的 section。
<strike>	HTML 5 中不支持。定义加删除线的文本。
<strong>	定义强调文本。
<style>	定义样式定义。
<sub>	定义下标文本。
<summary>	定义 details 元素的标题。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格的主体。
<td>	定义表格单元。
<textarea>	定义 textarea。
<tfoot>	定义表格的脚注。
<th>	定义表头。
<thead>	定义表头。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	HTML 5 中不支持。定义打字机文本。
<u>	HTML 5 中不支持。定义下划线文本。
<ul>	定义无序列表。
<var>	定义变量。
<video>	定义视频。
<xmp>	HTML 5 中不支持。定义预格式文本。