HTML 语义化的案例分析｜青训营

什么是语义化？

HTML 语义化是指在编写 HTML 代码时，使用合适的标签来描述页面的结构和内容，以便更好地向浏览器、开发者和搜索引擎解释页面的含义和结构。它强调使用具有明确含义的标签来包裹不同类型的内容，而不仅仅是使用样式化标签或没有明确含义的标签。

为什么要语义化？

语义化的HTML代码有以下几个优点：

可读性更好：使用语义化的标签可以使代码更易于阅读和理解，不仅对开发者有帮助，也方便其他人阅读和维护代码。
提升可访问性：语义化的HTML可以提高网站的可访问性，使得使用辅助技术的用户（如屏幕阅读器用户）能够更好地理解页面内容。
支持搜索引擎优化（SEO）：搜索引擎可以通过分析语义化的HTML代码更好地理解页面的结构和内容，从而提高网站在搜索结果中的排名。
设备兼容性更好：语义化的HTML可以使得网页在不同设备和浏览器上的兼容性更好，因为不同设备和浏览器可以根据标签的语义来正确地解析和显示页面。
代码维护更容易：使用语义化的HTML可以使得对网页结构和样式的修改更加容易，因为代码的结构和意图更清晰明确。

在实践中，语义化的HTML可以通过使用合适的标签（如<header>、<nav>、<section>、<article>等）来描述页面的不同部分和内容，以及正确使用属性（如alt属性用于图像的替代文本）来增加代码的语义性。

案例分析

接下来看一看实际应用中语义化是怎么做的。打开京东首页，查看其 HTML 源码，我们可以发现其页面上只有一个h1标签，也就是京东的LOGO

再来到知乎，我们可以看到一个 header，它包括了知乎的 LOGO，几个导航链接，搜索框，头像等等，

其中导航栏是用无序列表 ul 来做的。导航条本身是个列表，这样做是没问题的，而且即使当浏览器不支持 CSS 时，导航链接仍然能用。

再然后是搜索框，一个 form 和一个 button 做的， form 里面是 input 。也是很符合语义化的要求，

其实网页上许多东西都是用 div 和 span 配合 CSS 就能搞出来的，但是一些网站还是专门使用了相应的语义化标签来强调作用。

常见的语义化标签:

em：斜体，强调语气
aside：侧边栏，具有导航性质的模块内容
nav：一般为给当前页面内容提供导航链接、目录、索引等
article：表示独立的结构，或者可复用的内容
abbr：表示缩写，title属性为完整内容
header：通常表示网页的头部内容，包括搜索框、logo、标题组等
hgroup：对网页或者区段（section）的标题组合
hr：表示故事走向的转换或者话题的转换时的水平分割线，如果是普通的水平线页面效果，用css呈现
blockquote：段落级的引述，内部包含左右缩进和内边距
q：表示行内应用，对内容自动加引号
cite：表示作品名的引述
main：表示页面的主要内容，一个页面只能出现一次
footer：表示页面或文档的页脚，一般包含作者、版权、联系地址等
figure：表示与主文章相关的图像、插图、图表、代码片段等
figcaption：表示figure的说明
strong：表示强调，和em的差别有：em表现为斜体，strong为加粗，em为强调内容，strong为语气更强的强调内容
pre：表示内容我们已经经过特殊排版了，不希望浏览器帮我们自动排版
samp：表示实例输出
code：表示内容为代码
time：表示日期或时间，有datetime属性表示内容的日期或者时间，如果没写datetime，在内容中一定要有日期时间
dfn：表示对特殊术语的定义

写语义化代码时，可以注意以下几点：

使用合适的标签：选择适当的HTML标签来包裹内容，以描述其含义和结构。例如，使用<header>标签表示页面的页眉，使用<nav>标签表示导航栏，使用<section>标签表示页面的独立部分等。
避免滥用<div>和<span>：尽量避免将所有内容都用<div>和<span>标签包裹，因为它们本身没有明确的语义含义。使用具有更明确含义的标签来替代，使代码更易读和理解。
使用标题标签：使用<h1>到<h6>标签来表示标题的层级结构，其中<h1>表示最高级标题，<h2>表示次级标题，以此类推。这样有助于搜索引擎和屏幕阅读器正确地理解页面的结构。
提供替代文本：对于图像、视频、音频等媒体元素，使用alt属性来提供替代文本，以便于屏幕阅读器和搜索引擎理解内容。同时，也可以使用<figure>和<figcaption>标签来包裹相关的图像和说明文本。
使用有意义的链接文本：在使用链接时，尽量使用描述性的文本作为链接的锚文本，而不是简单的"点击这里"或无意义的文本。这样不仅对用户友好，也有助于搜索引擎理解链接的目的。
使用表格标签：对于表格数据，使用<table>、<thead>、<tbody>、<th>和<td>等标签来正确表示表格的结构和语义。
标记引用和引用源：使用<blockquote>标签表示长篇引用内容，使用<q>标签表示短引用内容，同时使用<cite>标签来标记引用的来源。
使用语义化的表单元素：对于表单元素，使用合适的标签（如<input>、<select>、<textarea>等）以及相关的属性和标签（如<label>、<fieldset>等）来增加表单的语义性和可访问性。