这篇笔记方向是HTML语义化。语义化HTML，用合适的标签来表达网页内容的意思。这样做的好处很多，比如让屏幕阅读器更好地理解网页内容，帮助搜索引擎更好地抓取信息，让代码看起来更清晰，方便我们自己维护。（其实前端还没有接触特别多，可能下面说的会比较浅显，不过也检索了一些资料）之前有临摹Yandex首页的HTML就以Yandex和Wikipedia为例了。
Yandex和Wikipedia的HTML结构对比
Yandex网站
Yandex的首页，用了很多语义化的标签。比如：
<header>：这个标签用来包裹网站的头部，里面包含了logo和搜索框，一看就知道是网站的头部区域。<nav>：这个标签用来标记导航栏，里面放的是网站的主导航链接。<section>：这个标签用来划分页面的不同部分，比如搜索结果、广告等。<article>：这个标签用来标记独立的、可以单独分发的内容，比如新闻或博客文章。<footer>：这个标签用来包裹页脚，里面包含了版权信息和网站地图链接。
Wikipedia网站
Wikipedia的页面，也是用了挺多语义化标签的。比如：
<header>：这个标签包含了页面的标题和搜索框。<nav>：这个标签提供了页面内的导航，比如目录跳转。<main>：这个标签包含了页面的主要内容，比如词条的解释。<article>：这个标签用来标记单个词条的独立内容。<footer>：这个标签包含了版权信息和页面贡献者名单。
非语义化标签对比
如果我们不用语义化标签，而是用<div>和<span>来构建页面，可能会是这样：
<div class="header">
<!-- 标题和搜索框 -->
</div>
<div class="navigation">
<!-- 页面内导航 -->
</div>
<div class="content">
<!-- 页面主要内容 -->
</div>
<div class="footer">
<!-- 版权信息 -->
</div>
这样的代码，虽然也能实现布局，但是它没有传达出任何关于内容的信息。对于屏幕阅读器或者搜索引擎来说，理解起来就比较困难。
语义化与非语义化的差异
- 可读性：语义化标签让代码更易读，一看就知道每个部分是干嘛的。非语义化标签就得靠类名和结构来猜，阅读起来比较费劲。
- SEO：搜索引擎更喜欢语义化标签，因为它们能更好地理解内容。非语义化标签可能会让搜索引擎抓取信息变得复杂。
- 辅助技术支持：语义化标签对屏幕阅读器更友好，因为它们能识别出内容的类型。非语义化标签就做不到这一点。
最后
总的来说，语义化HTML让我们的代码更清晰，对用户和搜索引擎都更友好。在写代码的时候，我们还是尽量用语义化标签，这样不仅能让代码看起来更整洁，也能提高网站的可访问性和SEO。这篇笔记到这里就结束啦！
