1. 什么是HTML语义化？
HTML语义化是指使用具有语义的HTML标签来组织内容，以便更好地表达文档的结构和意义。这种实践有以下优势：
- 提高代码可读性：开发者和维护者能快速理解页面结构。
- 增强可访问性：屏幕阅读器等辅助技术能更好地解析内容。
- 利于SEO优化：搜索引擎更容易理解页面内容的层次。
例如，使用 <header> 而非 <div> 来表示页眉区域，能清晰表达该部分的功能。
2. HTML中常用的语义化标签
页面结构标签
这些标签定义页面的主要结构区域，明确各部分的功能：
<header>：定义文档或区域的头部，通常包含导航链接或标题。<footer>：定义文档或区域的尾部，通常包含版权声明、联系信息等。<main>：定义文档的主要内容部分。<nav>：定义页面的导航部分，通常用于放置导航菜单。<aside>：定义侧边内容，如边栏、广告等，与主要内容相关但独立。<section>：定义文档中的一个主题区块，通常包含标题。<article>：定义独立的内容单元，如博客文章、新闻等。
文本内容标签
这些标签用于定义文档中的文本结构：
<h1>到<h6>：定义标题，<h1>为最高级标题，<h6>为最低级。<p>：定义段落。<blockquote>：定义块引用，用于引用较长的文字。<q>：定义行内引用，用于短引用。<strong>：表示重要内容，通常以粗体呈现。<em>：表示强调内容，通常以斜体呈现。<mark>：高亮显示的内容，表示重要或需要注意的内容。<abbr>：定义缩写，通常可以提供全称（通过title属性）。<time>：表示日期和时间。
列表标签
语义化的列表标签有助于清晰表达分组信息：
-
<ul>：无序列表。 -
<ol>：有序列表。 -
<li>：列表项，配合<ul>或<ol>使用。 -
<dl>：定义列表，用于描述术语。<dt>：定义列表中的术语。<dd>：定义术语的描述内容。
表格标签
用于组织和显示表格数据：
<table>：定义表格。<thead>：定义表格头部。<tbody>：定义表格主体。<tfoot>：定义表格底部。<tr>：定义表格行。<th>：定义表格头单元格，通常用于列标题或行标题。<td>：定义表格数据单元格。<caption>：为表格添加标题。
媒体标签
这些标签定义文档中的多媒体内容：
<figure>：定义独立的多媒体内容（如图像、图表），通常配合<figcaption>使用。<figcaption>：为<figure>提供描述或标题。<audio>：嵌入音频内容。<video>：嵌入视频内容。<source>：为<audio>或<video>提供多个媒体资源。<track>：为<video>或<audio>提供字幕或说明。
表单标签
这些标签为表单内容提供语义化支持：
<form>：定义表单，用于用户输入数据。<fieldset>：对表单中的元素进行分组。<legend>：为<fieldset>提供标题。<label>：定义表单控件的标签。<input>：定义用户输入控件。<textarea>：定义多行文本输入控件。<button>：定义按钮。<select>：定义下拉列表。<option>：定义下拉列表中的选项。
其他语义化标签
<address>：定义联系信息。<code>：定义一段代码内容。<pre>：定义预格式化文本，保留空格和换行符。<samp>：定义计算机输出内容。<kbd>：定义键盘输入内容。
3. 案例分析步骤
案例准备
- 分析 前端开发者 常常需要查阅的一个网站Mozilla Developer Network (MDNP)
分析内容
- 结构层次对比：查看是否使用了
<header>,<footer>,<article>,<section>等语义化标签。 - 内容组织：分析是否有内容区域使用
<div>或<span>来代替语义化标签。 - 可访问性对比：观察辅助工具（如屏幕阅读器）如何处理页面内容。
- SEO表现：对比两者的内容在HTML结构中的权重是否合适。
3. 实际案例
以下是案例分析示例：
特点分析：
- 清晰的结构：
<header>,<main>,<footer>等明确分隔了页面的功能区域。 - 内容组织：
<article>和<section>明确描述了文档内容层次。 - 可访问性：搜索引擎和辅助工具可以快速理解文档意义。
5.总结
5.1 语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- EG：有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
5.2 谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
5.3 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
5.4 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
5.5 建议
- 用对，勿要用错
- 理解HTML语义化的核心原则：一定要充分理解每个标签的属性及其含义
- 学会识别和改进非语义化的HTML结构
- 在实际项目中更高效地编写和维护HTML代码
