本笔记是HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异。
本案例部分节选了书伴网站当中的代码部分
首先，介绍一些常见的HTML语义化标签：
<header>：网页标题或页眉；
<nav>：导航菜单或导航栏；
<article>：内容块；
<section>：页面中的一组相关内容；
<footer>：网页的页脚或底部；
<main>：页面的主要内容区域；
<h1> - <h6>：标题级别，数字越大表示级别越低；
<p>：段落；
<ul>：无序列表；
<ol>：有序列表；
<li>：列表项；
<tr>：表格中的行；
<td>：表格中的单元格；
<form>：表单；
<input>：表单中的输入字段；
<button>：按钮；
<img>：图片。
与此对应的，非语义化标签有： <div>：包含内容块，可代替 <article>、<section>； <span>：文本中的一个片段，可代替 <p>、<li> 等语义化标签；<a>：创建链接，可代替 <h1>、<h2> 等标题标签； <img>：插入图片，可代替 <p>、<div> 等容器标签。
- 书伴首页标题
下为书伴首页的部分代码，其中使用语义化标签
<h1>书伴</h1>
<nav>
<ul>
<li><a href="#">列表项</a></li>
</ul>
</nav>
略
<header id="header" class="header">
<a href="/" title="你的电子书伴侣">
书伴 </a>
<nav>
<a href="/">菜单</a>
这里使用常见的语义化标签<header> <h1>网页标题</h1>
此处非语义化标签为<div id="header"> <h1>网页标题</h1>，可以看出语义化标签有助于提高网页的可读性和可访问性。
- 书伴列表项：
下为书伴首页的部分代码，其中使用语义化标签
<li id="menu-item-42571" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42571"><a href="https://bookfere.com/topics">精选专题</a></li>
这里非语义化标签代码为：
<a id="menu-item-42571" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42571" href="https://bookfere.com/topics">精选专题</a>
这里使用常见的语义化标签<li> </li>和<a>标签
此处非语义化标签代码仅使用<a> </a>，可以看出语义化标签改善了非语义化标签当中从一堆代码当中寻找语义的局面。
- 书伴首页正文内容
这里展示书伴首页的部分代码，其中使用非语义化标签展示段落
<div class="section"><p>如果你生命的终极目标是你的孩子，那你的孩子们的生命的终极目标又是什么，生养你的孙辈吗？每个人生命的终极意义难道不在于其本身吗？如果不是，那无限繁衍下去又有什么意义？</p><p>——《最好的决定》[美] 梅根·多姆</p></div>
若改为非语义化标签则如下
<main> <section> <p>如果你生命的终极目标是你的孩子，那你的孩子们的生命的终极目标又是什么，生养你的孙辈吗？每个人生命的终极意义难道不在于其本身吗？如果不是，那无限繁衍下去又有什么意义？</p><p>——《最好的决定》[美] 梅根·多姆</p> </section></main>
此处语义化标签代码改为使用<section> </section>，可以看出语义化标签使得段落用以变得更加清晰，不再是全员div的局面了。
