HTML语义化
HTML语义化是指使用恰当语义的HTML标签，使页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。HTML5引入了许多新的语义化标签，如<header>、<nav>、<article>、<section>、<aside>和<footer>等，这些标签能够更清晰地表达文档结构。
HTML5新增的一些语义化标签列举如下：
<article>：定义独立的、自包含的内容，例如博客文章或新闻报道。<aside>：定义与主要内容相关但可独立于主要内容的部分，例如侧边栏或拉出式广告。<details>：定义用户可以查看或隐藏的额外细节。<figcaption>：定义<figure>元素的标题。<figure>：定义独立的流内容，例如图像、图表或代码片段。<footer>：定义文档或节的页脚。<header>：定义文档或节的页头。<main>：定义文档的主要内容。<mark>：定义需要突出显示的文本。<nav>：定义导航链接。<section>：定义文档中的节。<summary>：定义<details>元素的标题。<time>：定义日期或时间
首页标题
非语义化示例：
<div class="header">
<span class="title">Welcome to our website</span>
</div>
语义化示例：
<header>
<h1>Welcome to our website</h1>
</header>
导航菜单
非语义化示例：
<div class="nav">
<div class="item"><a href="/">Home</a></div>
<div class="item"><a href="/about">About</a></div>
<div class="item"><a href="/contact">Contact</a></div>
</div>
语义化示例中使用了<nav>标签表示导航菜单，并用<ul>和<li>标签表示列表项，以及<a>标签表示链接。这样的结构更具语义化，有利于屏幕阅读器和搜索引擎理解导航结构。
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
主要内容
非语义化示例：
<div class="main-content">
<div class="section">
<h3 class="sub-title">Section 1</h3>
<p>Content of section 1...</p>
</div>
<div class="section">
<h3 class="sub-title">Section 2</h3>
<p>Content of section 2...</p>
</div>
</div>
语义化示例：
语义化示例中使用了<main>标签表示页面的主要内容区域，并用<section>标签表示每个章节，使用<h2>标签表示每个章节的标题。这样的结构更清晰地表达了页面内容的层次结构。
<main>
<section>
<h2>Section 1</h2>
<p>Content of section 1...</p>
</section>
<section>
<h2>Section 2</h2>
<p>Content of section 2...</p>
</section>
</main>
脚注
非语义化示例：
<div class="footer">
<div class="info">All rights reserved.</div>
<div class="contact">Contact us at info@example.com</div>
</div>
语义化示例：
语义化示例中使用了<footer>标签表示页面的脚注部分，并用<p>标签表示段落内容。同时，使用<a>标签并添加href属性来创建可点击的链接。这样更有语义化，且有利于用户和搜索引擎的理解。
<footer>
<p>All rights reserved.</p>
<p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
</footer>
