一、HTML语义化与非语义化标签对比
1. HTML语义化的定义
HTML语义化指的是使用具有明确含义的HTML标签来组织和描述页面内容，从而提高页面的可读性、可维护性和搜索引擎优化（SEO）。HTML5通过引入诸如<header>、<footer>、<article>、<section>、<nav>等标签，赋予页面结构更加明确的含义。
HTML5语义化标签总结：
<article>：定义独立的自包含内容（如博客文章、新闻报道等）。<aside>：定义与主要内容相关，但可以独立于主要内容的部分（如侧边栏、广告等）。<footer>：定义文档或节的页脚部分，通常包含版权、联系信息等。<header>：定义文档或节的页头部分，通常包含导航栏、标题等。<nav>：定义页面的导航链接。<section>：定义文档中的一个节，表示内容的某个主题区块。<main>：定义文档的主体内容部分。<figure>：定义独立的内容元素，通常包括图像、视频等。<mark>：标记突出显示的文本。<time>：表示具体的日期或时间。
通过使用这些语义化标签，我们能清晰地表达页面的逻辑结构和内容。接下来我们对比一下传统HTML与语义化HTML标签的结构差异。
2. 传统非语义化标签与语义化标签的对比
非语义化标签示例
如果我们没有使用HTML5的语义化标签，可能会用<div>和<span>等非语义化标签来组织页面内容。以下是一个常见的非语义化网页结构：
<div class="header">页头</div>
<div class="nav">导航栏</div>
<div class="main">主要内容</div>
<div class="footer">页脚</div>
这种方式虽然可以实现布局，但缺乏明确的语义信息，不容易理解页面结构。而且，机器和搜索引擎在解析时也很难准确识别各个部分的功能。
语义化标签示例
使用HTML5语义化标签，代码将变得更加简洁和具有结构性：
<header>页头</header>
<nav>导航栏</nav>
<main>主要内容</main>
<footer>页脚</footer>
通过这些标签，页面的各个部分变得更加清晰，机器和开发者可以更容易理解网页的结构和功能。
3. 复杂网页结构的语义化与非语义化对比
我们可以进一步对比一个稍微复杂的网页结构。假设这是一个包含多个内容区块的页面，非语义化标签和语义化标签的代码差异如下：
非语义化结构
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="search">搜索框</div>
</div>
<div class="nav">
<div><a href="#">首页</a></div>
<div><a href="#">发现</a></div>
</div>
<div class="main">
<div class="left-sidebar">左侧边栏</div>
<div class="content">内容区域</div>
<div class="right-sidebar">右侧边栏</div>
</div>
<div class="footer">
<p>版权信息</p>
</div>
</body>
语义化结构
<body>
<header>
<div class="logo">Logo</div>
<div class="search">搜索框</div>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">发现</a></li>
</ul>
</nav>
<main>
<aside class="left-sidebar">左侧边栏</aside>
<section class="content">内容区域</section>
<aside class="right-sidebar">右侧边栏</aside>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
在这个例子中，语义化标签让页面结构更清晰，且便于后续维护和SEO优化。<main>、<header>、<nav>和<footer>等标签为不同内容区域赋予了明确的意义，使得搜索引擎能够更好地识别和索引页面内容。
二、 语义化结构案例分析
1. 掘金：juejin.cn/
掘金的代码中已经包含了一些基础的语义化标签，如 <header>、<nav> 和 <footer>，但是更多的部分使用了 <div> 来实现布局。这些标签有助于提升页面的可读性和可访问性，尤其对于屏幕阅读器和搜索引擎来说，能够更好地理解页面的结构。
以下是对代码的部分分析：
<body data-theme="light">
<div id="__nuxt">
<div id="__layout">
<div id="juejin">
<div class="view-container container index-container">
<div class="main-header-box">
<header class="main-header main-header visible">
<div class="container">
<a href="/" class="logo">
<img src="..." alt="稀土掘金" class="logo-img">
<img src="..." alt="稀土掘金" class="mobile">
</a>
<nav role="navigation" class="main-nav">
<ul class="nav-list">
<li class="main-nav-list">
<div class="phone-show-menu">
<span>首页</span>
</div>
<ul class="phone-hide">
<li class="nav-item link-item active">
<a href="/">首页</a>
</li>
<li class="nav-item link-item bots">
<a href="/bots">BOT</a>
</li>
<li class="nav-item link-item activities">
<a href="/pins">沸点</a>
</li>
<li class="nav-item link-item book">
<a href="/course">课程</a>
</li>
<li class="nav-item link-item">
<a href="/live">直播</a>
</li>
<li class="nav-item link-item">
<a href="/events/all">活动</a>
</li>
<li class="nav-item link-item">
<a href="/problemset">AI刷题</a>
</li>
<li class="nav-item link-item">
<a href="https://detail.youzan.com/show/goods/newest?kdt_id=104340304" target="_blank" rel="nofollow noopener noreferrer">商城</a>
</li>
<li class="nav-item link-item">
<a href="/app?utm_source=jj_nav" target="_blank">APP</a>
<!-- 省略部分不必要展示的代码 -->
</body>
语义化结构分析：
<header>：定义了页面头部，包含了导航栏和 logo 图片。使用<header>标签为页面的顶部区域提供语义化结构。<nav>：用于导航菜单的部分，标识了页面的导航结构。<nav>标签专门用于包含链接导航部分。<ul>和<li>：在导航条中使用了无序列表来展示不同的链接，这是一种推荐的做法，能够保持内容结构的清晰。
2. 哔哩哔哩：www.bilibili.com/
在分析了哔哩哔哩网站的HTML结构后，我们可以看到该网站的代码中存在一些非语义化的元素，如<div>和<span>标签的过度使用，缺少适当的语义标签来增强网页内容的可读性和可访问性。因此，改进哔哩哔哩网站的HTML结构，应用更多的语义化标签，不仅可以提升搜索引擎优化（SEO）效果，还能提高页面的可维护性和用户体验。
原始代码示例
以下是哔哩哔哩网站中部分非语义化的HTML结构：
<div class="header">
<div class="logo">哔哩哔哩</div>
<div class="search-bar">
<input type="text" placeholder="搜索视频">
<button>搜索</button>
</div>
<div class="user-info">
<span>用户名</span>
<span>消息</span>
</div>
</div>
<div class="main-content">
<div class="video-list">
<div class="video-item">
<img src="video-thumbnail.jpg" alt="视频缩略图">
<div class="video-title">视频标题</div>
</div>
</div>
</div>
在这段代码中，<div>标签被广泛使用，用于包装不同的页面区域，尽管这些区域包含的是具体的信息和功能，但没有使用语义化标签来表示它们的功能。例如，<div class="header">、<div class="logo"> 和 <div class="search-bar"> 都是普通的容器元素，没有提供任何具体的含义。
改进后的代码示例
通过引入适当的语义化标签，能够更清晰地传达每个部分的作用，增加网页内容的语义层次，改进后的代码如下：
<header class="header">
<div class="logo">
<a href="/" aria-label="返回首页">哔哩哔哩</a>
</div>
<form class="search-bar" action="/search" method="get" role="search">
<input type="text" name="query" placeholder="搜索视频" aria-label="搜索视频">
<button type="submit">搜索</button>
</form>
<nav class="user-info">
<ul>
<li><a href="/user/profile" aria-label="查看用户资料">用户名</a></li>
<li><a href="/user/messages" aria-label="查看消息">消息</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<section class="video-list" aria-labelledby="video-list-title">
<h2 id="video-list-title">视频推荐</h2>
<article class="video-item">
<figure>
<img src="video-thumbnail.jpg" alt="视频缩略图">
<figcaption><a href="/video/12345">视频标题</a></figcaption>
</figure>
</article>
</section>
</main>
语义化改进分析
-
<header>标签的使用
原始代码中的<div class="header">被替换为<header>标签，明确指出这一部分是网页的头部内容。<header>标签本身没有视觉效果，但它帮助搜索引擎和屏幕阅读器理解该部分内容的结构，并提供关于该部分的语义信息。 -
<a>标签增强可访问性
在原始代码中，<div class="logo">和<span>标签用于包装文字内容。我们改用了<a>标签，并为链接添加了aria-label属性，增强了链接的可访问性，使得用户可以通过屏幕阅读器更清楚地理解链接的作用（如“返回首页”）。 -
<form>标签的使用
将搜索框包装在一个<form>标签内，并为其指定了role="search"，这不仅语义化了搜索功能，还提供了更好的可访问性和SEO支持。同时，表单内的input标签也添加了aria-label属性，以便屏幕阅读器用户理解其功能。 -
<nav>标签用于导航区域
将原本使用<div class="user-info">的导航部分，改为使用<nav>标签。这种做法告诉搜索引擎和用户代理（如屏幕阅读器），这一部分内容是导航链接。并且将每个链接都包装在<ul>和<li>中，使其符合常规的HTML导航结构。 -
<main>标签用于主内容区域
原始代码的主要内容区域用<div class="main-content">表示，改为使用<main>标签来明确指出这是页面的主要内容部分。<main>标签帮助搜索引擎和用户代理识别页面的核心内容区域，并提升SEO效果。 -
<section>和<article>标签的使用
对于视频列表区域，原始代码使用了<div class="video-list">，我们改用了<section>标签，并为其添加了aria-labelledby属性，指向一个具有标题的<h2>元素，进一步增强了内容的组织结构。每个视频项则用<article>标签表示，表明每个视频条目是页面的独立内容单元。 -
<figure>和<figcaption>标签
视频缩略图和标题的部分使用了<figure>标签进行包装，缩略图通过<img>标签显示，标题通过<figcaption>标签描述，进一步增强了页面内容的语义层次，使得图片和文字描述形成语义上的关联。
改进效果
通过引入语义化标签，哔哩哔哩网站的HTML结构不仅更加符合现代网页设计的标准，而且增强了页面的可访问性，使得搜索引擎能够更好地解析和索引网页内容。此外，页面的可维护性也得到了提升，开发者可以更容易理解和修改页面结构。
同时，通过合理使用ARIA（可访问性富互联网应用）属性，如aria-label和role，进一步提高了屏幕阅读器用户的使用体验，使得视力障碍用户能够更加便捷地访问网页内容。
三、总结与思考
使用HTML5的语义化标签，能够显著提高网页的可读性、可维护性以及SEO表现。通过结构清晰的标签，搜索引擎可以更好地识别页面内容，而开发者也能更轻松地理解和更新页面。对比非语义化标签，语义化标签不仅能让页面逻辑更加明晰，还能增强页面在不同设备和浏览器上的兼容性。
