HTML 语义化有许多优点：
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO；
- 语义类还支持读屏软件，根据文章可以自动生成目录，有利于无障碍化建设；
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
如图所示，即使不太了解前端技术的人员也可以大致判断这个页面的结构，header 作为头部、nav 是作为导航栏 section 代表小节或者一部分，应该是可以替换的内容、article 是文章，aside 是侧边栏、footer 是页脚。而事实上，很多网页都使用这样或者相类似的结构，它的好处是通用、清晰、便于维护。
我们看下某求职平台的结构，也是 Header、body 和 footer 的经典结构，另外，nav 导航栏和侧边框也是存在的，body 部分又分为更小的区域，那么实际是不是这样呢？扒下源码看一下：
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
<link rel="icon" href="https://static/fe/file/images/nowpick/web/www-favicon.ico">
<meta property="og:image" content="https://static/fe/common/share-logo.png" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="zh_CN" />
<meta itemprop="image" content="https://static/images/logo_web_300.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="互联网IT技术/产品/运营/硬件/汽车机械制造/金融/财务管理/审计/银行/市场营销/地产/快消/管培生等等专业技能学习/备考/求职神器，在线进行企业校招实习笔试面试真题模拟考试练习，全面提升求职竞争力，找到好工作，拿到好offer。"/>
<meta name="keywords" content="C++笔试面试,Java笔试面试,计算机笔试,计算机面试,IT笔试,笔试题库,笔试练习,IT面试,在线编程,编程学习"/>
<meta property="og:title" content="笔试题库|面试经验|实习招聘内推，求职就业一站解决" />
<meta property="og:description" content="就业找工作一站解决。互联网IT技术/产品/运营/硬件/汽车机械制造/金融/财务管理/审计/银行/市场营销/地产/快消/管培生等等专业技能学习/备考/求职神器，在线进行企业校招实习笔试面试真题模拟考试练习，全面提升求职竞争力，找到好工作，拿到好offer。" />
</head>
先是 head 部分。我们可以看见 meta 标签，meta 元素如同其语义化含义那样，⽤来配置⽹⻚元数据，元数据即数据的数据信息，这一部分的内容能够被爬虫搜索到，因此是非常重要的部分，在一些搜索引擎的检索过程中，关键字匹配度高的网页会被排在前面，设置合适的 meta 信息有助于提升网站的曝光度、增加流量。
<body>
<section>
<header class="el-header tw-sticky tw-top-0 tw-z-[999] !tw-h-14" style="height:auto;">
<header class="!tw-sticky nc-nav-header js-header default-header-page" data-v-14c0429c data-v-dac73188>
<nav data-v-14c0429c>
<ul class="nc-nav-header-menu" style="margin-right:30px;flex-shrink:0;" data-v-060eebe0 data-v-14c0429c>
<li class="hover-class nc-nav-header-menuitem" data-v-060eebe0>首页</li>
<li class="hover-class nc-nav-header-menuitem" data-v-060eebe0>专项练习</li>
<li tabindex="-1" class="el-dropdown-menu__item" data-v-060eebe0>面试题库</li>
</ul>
<ul class="el-dropdown-menu el-popper nav-dropdown nc-nav-dropdown" style="display:none;" data-v-060eebe0>
<li tabindex="-1" class="el-dropdown-menu__item" data-v-060eebe0>课程</li>
<li tabindex="-1" class="el-dropdown-menu__item" data-v-060eebe0>专栏·文章</li>
<li tabindex="-1" class="el-dropdown-menu__item" data-v-060eebe0>项目实战</li>
</ul>
<button type="button" class="el-button loginRegisterBtn el-button--default" data-v-14c0429c><span>登录/注册</span></button>
</nav>
</header></header>
</section>
</body>
不像其他一些网站，这个求职网站的主体内容被设置在了 body 中，虽说如此，许多类似于 nav、sider 功能的标签由带相应样式的其他标签代替了，我们还是可以在这些语义化标签中看出网站的大体结构。比如 section 表示网页的主体部分，也暗示可以发生变化替换为其他 section，header 是页首部分，nav 是导航栏等等，如果我们使用 toggle 这样的浏览器目录插件，插件就可以据此形成对应目录，有利于内嵌网页阅读插件等无障碍化建设：
section 中同样包含了 footer 部分，这里只截取了一点：
<footer class="el-footer" style="height:220px;">
<div class="tw-text-size-base tw-text-gray-800 tw-text-center" data-v-3f7168fa>
刷真题、补算法、看面经、得内推
</div>
<div class="tw-text-size-caption-pure tw-text-gray-700 tw-text-center" data-v-3f7168fa>扫一扫，把题目装进口袋</div>
<li class="tw-mr-7.5" data-v-3f7168fa>关于我们</li>
<li class="tw-mr-7.5" data-v-3f7168fa>加入我们</li>
<li class="tw-mr-7.5" data-v-3f7168fa>意见反馈</li>
<li class="tw-mr-7.5" data-v-3f7168fa>企业服务</li>
<li class="tw-mr-7.5" data-v-3f7168fa>校企合作</li>
<li class="tw-mr-7.5" data-v-3f7168fa>联系我们</li>
<li class="tw-mr-7.5" data-v-3f7168fa>免责声明</li>
<li class="tw-mr-7.5" data-v-3f7168fa>友情链接</li>
<div class="bottom-text tw-pl-7.5" data-v-3f7168fa>联系方式：000-00000000</div>
<div class="bottom-text tw-pl-7.5" data-v-3f7168fa>投诉举报电话（人力社保局）</div>
</footer>
可见，HTML 语义化标签真实对应着网站上的各种元素，能够让开发者清晰看到网页的结构，从而便于维护。但是顺便一提，如今前端工程化深入，网站往往会使用一些框架和构建工具去打包网页的代码，在打包过程中会对代码进行一定程度的混淆和压缩，从而使得原本排版清晰的网页结构、语义化的类名以及脚本代码变得难以理解和阅读，我们可以看到上面代码中的类名已经很难猜测大概控制的样式了，另外链接也可以通过脚本隐藏，很难据此爬取到链接实际指向的资源。这些都对新手观察模仿网页的结构造成了一定障碍。
