一、什么是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>
:定义日期或时间。
在明白了上述信息后,我们可以假设有一个简单的网页,包括一个页头、一个导航栏、一个主要内容区域和一个页脚。如果我们使用非语义化标签,那么我们可能会这样写:
html
<div class="header">页头</div>
<div class="nav">导航栏</div>
<div class="main">主要内容</div>
<div class="footer">页脚</div>
上面的代码虽然能够实现页面布局,但是缺乏语义信息,可读性差一些。如果我们使用HTML5的语义化标签,那么我们可以这样写:
html
<header>页头</header>
<nav>导航栏</nav>
<main>主要内容</main>
<footer>页脚</footer>
我们还可以举一个相对复杂一些的例子,比如,对于一个网站的首页,通常可以这样进行布局:
html
<body>
<header>
<nav>
......
</nav>
</header>
<aside>
<nav>
......
</nav>
</aside>
<section>......</section>
<section>......</section>
<section>......</section>
<footer>
<address>......</address>
</footer>
</body>
而网站的具体的文章内容展示页面,则可以这样:
html
<body>
<header>......</header>
<article>
<header>......</header>
<section>......</section>
<section>......</section>
<section>......</section>
<footer>......</footer>
</article>
<article>
......
</article>
<article>
......
</article>
<footer>
<address></address>
</footer>
</body>
上面的代码使用了<header>
、<nav>
、<main>
和<footer>
等语义化标签,能够更清晰地表达文档结构。通过上面的代码,我相信大家可以非常直观的感受到语义化标签结构相对于传统结构的优势,具体可以总结如下:
- 提高网页的可访问性,让屏幕阅读器等辅助设备能够更好地解析和阅读网页内容;
- 提高网页的可维护性,让开发者能够更清晰地理解网页的结构和逻辑,方便后期的修改和更新;
- 提高网页的可检索性,让搜索引擎能够更准确地抓取和索引网页内容,提升网站的排名和流量;
- 提高网页的兼容性,让不同的浏览器和设备能够更好地呈现网页内容,避免出现乱码或者错位等问题。
二、对比分析语义化结构与非语义化结构
下面让我们通过一些实际网站的例子,来对比一下语义化结构与非语义化结构,分析他们到底孰优孰劣。
1. 某乎
某乎作为国内非常出名的分享你刚编的故事的平台(仅调侃,无恶意😂),在他的首页结构中,就采用了语义化结构,将其首页结构大致总结如下:
html
<html>
<head>
<!-- 省略了一些元数据和样式 -->
</head>
<body>
<div id="root">
<div class="App">
<div class="Sticky AppHeader">
<header class="AppHeader-inner">
<!-- 网站logo -->
<a href="/" class="AppHeader-logo">
<img src="..." alt="x乎" />
</a>
<!-- 搜索框 -->
<form class="SearchBar" action="/search" method="get">
<input type="text" name="q" placeholder="搜索你感兴趣的内容..." />
<button type="submit">搜索</button>
</form>
<!-- 导航栏 -->
<nav class="AppHeader-nav">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/explore">发现</a></li>
<li><a href="/follow">关注</a></li>
<li><a href="/notifications">消息</a></li>
</ul>
</nav>
<!-- 用户菜单 -->
<div class="AppHeader-userMenu">
<button>提问</button>
<img src="..." alt="用户头像" />
<ul>
<li><a href="/profile">个人主页</a></li>
<li><a href="/settings">设置</a></li>
<li><a href="/logout">退出</a></li>
</ul>
</div>
</header>
</div>
<!-- 主要内容 -->
<main class="App-main">
<!-- 左侧边栏 -->
<aside class="LeftSideBar">
<!-- 推荐话题 -->
<section class="LeftSideBar-section">
<h2>推荐话题</h2>
<ul>
<li><a href="/topic/19550517">程序员</a></li>
<li><a href="/topic/19552832">电影</a></li>
<li><a href="/topic/19551147">旅行</a></li>
<!-- 省略了一些话题 -->
</ul>
</section>
<!-- 推荐专栏 -->
<section class="LeftSideBar-section">
<h2>推荐专栏</h2>
<ul>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />前端早读课</a></li>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎数据中心</a></li>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎日报</a></li>
<!-- 省略了一些专栏 -->
</ul>
</section>
</aside>
<!-- 中间内容 -->
<div class="Content">
<!-- 推荐内容 -->
<section class="Content-section">
<h2>推荐内容</h2>
<ul>
<!-- 每个问题 -->
<li class="Question">
<h3><a href="/question/123456">如何看待xxx事件?</a></h3>
<!-- 每个回答 -->
<div class="Answer">
<div class="AuthorInfo">
<img src="..." alt="作者头像" />
<span class="AuthorName">张三</span>
<span class="AuthorBio">某公司工程师</span>
</div>
<div class="RichContent">
<p>这是一个回答的摘要,可能包含一些图片或者视频。</p>
</div>
<div class="AnswerFooter">
<button>赞同 123</button>
<button>评论 45</button>
<button>收藏 67</button>
<button>感谢 89</button>
</div>
</div>
<!-- 省略了一些回答 -->
</li>
<!-- 省略了一些问题 -->
</ul>
</section>
</div>
<!-- 右侧边栏 -->
<aside class="RightSideBar">
<!-- 广告 -->
<section class="RightSideBar-section">
<h2>广告</h2>
<ul>
<li><a href="/ad/1"><img src="..." alt="广告图片" />这是一个广告标题</a></li>
<li><a href="/ad/2"><img src="..." alt="广告图片" />这是另一个广告标题</a></li>
<!-- 省略了一些广告 -->
</ul>
</section>
<!-- 热门内容部分 -->
<section class="RightSideBar-section">
<h2>热门内容</h2>
<ul>
<li><a href="/question/234567">这是一个热门问题</a></li>
<li><a href="/question/345678">这是另一个热门问题</a></li>
<!-- 省略了一些热门问题 -->
</ul>
</section>
</aside>
</main>
<!-- 页脚 -->
<footer class="App-footer">
<!-- 网站信息 -->
<div class="App-footer-info">
<p>© 2023 x乎 · 关于x乎 · 加入我们 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · x乎协议 · 隐私政策 · x乎侵权举报 · x乎标志使用规范 · x乎社区管理细则 · 工作机会</p>
</div>
<!-- 友情链接 -->
<div class="App-footer-links">
<p>友情链接:</p>
<ul>
<li><a href="/link/1">知乎专栏</a></li>
<li><a href="/link/2">知乎圆桌</a></li>
<!-- 省略了一些链接 -->
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>
可以看到,在使用了语义化标签之后,仅仅观看HTML标签,我们就能大致想象出网页的具体样子。(应该和我经常逛没什么关系😁)。上面的内容再具体拆分,就会发现他就是使用了我们上面提到的常见的网站首页的布局结构,也就是header(nav)-main(section)-footer这样一个大致结构,而如果我们将这个网页变为非语义化结构,那么他就会变成这个样子:
html
<html>
<head>
<!-- 省略了一些元数据和样式 -->
</head>
<body>
<div id="root">
<div class="App">
<div class="Sticky AppHeader">
<div class="AppHeader-inner">
<!-- 网站logo -->
<div class="AppHeader-logo">
<div><img src="..." alt="x乎" /></div>
</div>
<!-- 搜索框 -->
<div class="SearchBar">
<div><input type="text" name="q" placeholder="搜索你感兴趣的内容..." /></div>
<div><button type="submit">搜索</button></div>
</div>
<!-- 导航栏 -->
<div class="AppHeader-nav">
<div>
<div><a href="/home">首页</a></div>
<div><a href="/explore">发现</a></div>
<div><a href="/follow">关注</a></div>
<div><a href="/notifications">消息</a></div>
</div>
</div>
<!-- 用户菜单 -->
<div class="AppHeader-userMenu">
<div><button>提问</button></div>
<div><img src="..." alt="用户头像" /></div>
<div>
<div><a href="/profile">个人主页</a></div>
<div><a href="/settings">设置</a></div>
<div><a href="/logout">退出</a></div>
</div>
</div>
</div>
</div>
<!-- 主要内容 -->
<div class="App-main">
<!-- 左侧边栏 -->
<div class="LeftSideBar">
<!-- 推荐话题 -->
<div class="LeftSideBar-section">
<h2>推荐话题</h2>
<ul>
<li><a href="/topic/19550517">程序员</a></li>
<li><a href="/topic/19552832">电影</a></li>
<li><a href="/topic/19551147">旅行</a></li>
<!-- 省略了一些话题 -->
</ul>
</div>
<!-- 推荐专栏 -->
<div class="LeftSideBar-section">
<h2>推荐专栏</h2>
<ul>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />前端早读课</a></li>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎数据中心</a></li>
<li><a href="/column/c_122062476"><img src="..." alt="专栏封面" />x乎日报</a></li>
<!-- 省略了一些专栏 -->
</ul>
</div>
</div>
<!-- 中间内容 -->
<div class="Content">
<!-- 推荐内容 -->
<div class="Content-section">
<h2>推荐内容</h2>
<ul>
<!-- 每个问题 -->
<li class="Question">
<h3><a href="/question/123456">如何看待xxx事件?</a></h3>
<!-- 每个回答 -->
<div class="Answer">
<div class="AuthorInfo">
<div><img src="..." alt="作者头像" /></div>
<div><span class="AuthorName">张三</span></div>
<div><span class="AuthorBio">某公司工程师</span></div>
</div>
<div class="RichContent">
<p>这是一个回答的摘要,可能包含一些图片或者视频。</p>
</div>
<div class="AnswerFooter">
<div><button>赞同 123</button></div>
<div><button>评论 45</button></div>
<div><button>收藏 67</button></div>
<div><button>感谢 89</button></div>
</div>
</div>
<!-- 省略了一些回答 -->
</li>
<!-- 省略了一些问题 -->
</ul>
</div>
</div>
<!-- 右侧边栏 -->
<div class="RightSideBar">
<!-- 广告 -->
<div class="RightSideBar-section">
<h2>广告</h2>
<ul>
<li><a href="/ad/1"><img src="..." alt="广告图片" />这是一个广告标题</a></li>
<li><a href="/ad/2"><img src="..." alt="广告图片" />这是另一个广告标题</a></li>
<!-- 省略了一些广告 -->
</ul>
</div>
<!-- 热门内容 -->
<div class="RightSideBar-section">
<h2>热门内容</h2>
<ul>
<li><a href="/question/234567">这是一个热门问题</a></li>
<li><a href="/question/345678">这是另一个热门问题</a></li>
<!-- 省略了一些热门问题 -->
</ul>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="App-footer">
<!-- 网站信息 -->
<div class="App-footer-info">
<p>© 2023 x乎 · 关于x乎 · 加入我们 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · x乎协议 · 隐私政策 · x乎侵权举报 · x乎标志使用规范 · x乎社区管理细则 · 工作机会</p>
</div>
</div>
</body>
</html>
这样子是不是可读性立马就降下来了,结构变得不再明朗,需要借助class的名字才能进行区分了。
2. 掘金
掘金页面的开发也使用了语义化标签。这里主要分析其文章详情页面的结构:
html
<html>
<head>
<!-- 省略了一些元数据和样式 -->
</head>
<body>
<!-- 头部 -->
<header class="header">
<!-- 头部左侧 -->
<div class="header-left">
<!-- logo -->
<a href="/" class="logo">
<img src="..." alt="掘金" />
</a>
<!-- 搜索框 -->
<form class="search" action="/search" method="get">
<input type="text" name="q" placeholder="搜索掘金" />
<button type="submit"><i class="icon-search"></i></button>
</form>
</div>
<!-- 头部右侧 -->
<div class="header-right">
<!-- 导航栏 -->
<nav class="nav">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/pins">沸点</a></li>
<li><a href="/books">小册</a></li>
<li><a href="/events">活动</a></li>
<li><a href="/juejin">掘力值</a></li>
</ul>
</nav>
<!-- 用户菜单 -->
<div class="user-menu">
<button>写文章</button>
<img src="..." alt="用户头像" />
<ul>
<li><a href="/profile">个人主页</a></li>
<li><a href="/settings">设置</a></li>
<li><a href="/logout">退出</a></li>
</ul>
</div>
</div>
</header>
<!-- 主体 -->
<main class="main">
<!-- 文章内容 -->
<article class="article">
<!-- 文章头部 -->
<header class="article-header">
<!-- 文章标题 -->
<h1 class="article-title">这是一个文章标题</h1>
<!-- 文章作者 -->
<div class="article-author">
<img src="..." alt="作者头像" />
<span>张三</span>
<!-- 文章发布时间 -->
<time datetime="2023-04-15T12:34:56Z">2023年4月15日</time>
</div>
</header>
<!-- 文章正文 -->
<div class="article-content">
<!-- 文章段落 -->
<section class="article-section">
<!-- 段落标题 -->
<h2>这是一个段落标题</h2>
<!-- 段落内容 -->
<p>这是一个段落内容,可能包含一些文字,图片,代码,引用等元素。</p>
<!-- 段落图片 -->
<img src="..." alt="段落图片" />
<!-- 段落代码 -->
<code class="language-javascript">
console.log("Hello, world!");
</code>
<!-- 段落引用 -->
<blockquote>这是一个段落引用,可以使用不同的样式进行区分。</blockquote>
</section>
<!-- 省略了一些段落 -->
</div>
<!-- 文章标签 -->
<div class="article-tag">
前端
</div>
<!-- 文章信息 -->
<div class="article-info">
<!-- 文章点赞数 -->
<div class="article-like">
123
</div>
<!-- 文章评论数 -->
<div class="article-comment">
45
</div>
<!-- 文章收藏数 -->
<div class="article-collect">
67
</div>
<!-- 文章分享按钮 -->
<button class="article-share"><i class="icon-share"></i></button>
</div>
</article>
<!-- 评论内容 -->
<div class="comment-list">
<!-- 评论列表 -->
<ul>
<!-- 每个评论项 -->
<li class="comment-item">
<!-- 评论作者 -->
<div class="comment-author">
<img src="..." alt="评论者头像" />
<span>李四</span>
</div>
<!-- 评论内容 -->
<div class="comment-content">
<p>这是一个评论内容,可能包含一些文字,图片,表情等元素。</p>
</div>
<!-- 评论信息 -->
<div class="comment-info">
<!-- 评论时间 -->
<time datetime="2023-04-15T13:45:67Z">2023年4月15日</time>
<!-- 评论点赞数 -->
<div class="comment-like">
12
</div>
<!-- 评论回复按钮 -->
<button class="comment-reply">回复</button>
</div>
</li>
<!-- 省略了一些评论项 -->
</ul>
</div>
</main>
<!-- 底部 -->
<footer class="footer">
<!-- 底部导航 -->
<nav class="footer-nav">
<ul>
<li><a href="/about/">关于掘金</a></li>
<li><a href="/join/">加入我们</a></li>
<li><a href="/contact/">联系我们</a></li>
<li><a href="/help/">帮助中心</a></li>
<li><a href="/law/">法律声明</a></li>
</ul>
</nav>
<!-- 底部版权 -->
<div class="footer-copy">
<p>©2020 掘金 · 京ICP备14012449号-2</p>
</div>
</footer>
</body>
</html>
可以发现,大致是header(nav)-main(article-section)-footer(nav)这样的结构,同样的,换成非语义化标签,则会变成:
html
<html>
<head>
<!-- 省略了一些元数据和样式 -->
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- 头部左侧 -->
<div class="header-left">
<!-- logo -->
<div class="logo">
<img src="..." alt="掘金" />
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" name="q" placeholder="搜索掘金" />
<button type="submit"><i class="icon-search"></i></button>
</div>
</div>
<!-- 头部右侧 -->
<div class="header-right">
<!-- 导航栏 -->
<div class="nav">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/pins">沸点</a></li>
<li><a href="/books">小册</a></li>
<li><a href="/events">活动</a></li>
<li><a href="/juejin">掘力值</a></li>
</ul>
</div>
<!-- 用户菜单 -->
<div class="user-menu">
<button>写文章</button>
<img src="..." alt="用户头像" />
<ul>
<li><a href="/profile">个人主页</a></li>
<li><a href="/settings">设置</a></li>
<li><a href="/logout">退出</a></li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 文章内容 -->
<div class="article">
<!-- 文章头部 -->
<div class="article-header">
<!-- 文章标题 -->
<div class="article-title">这是一个文章标题</div>
<!-- 文章作者 -->
<div class="article-author">
<img src="..." alt="作者头像" />
<span>张三</span>
<!-- 文章发布时间 -->
<span>2023年4月15日</span>
</div>
</div>
<!-- 文章正文 -->
<div class="article-content">
<!-- 文章段落 -->
<div class="article-section">
<!-- 段落标题 -->
<div class="article-section-title">这是一个段落标题</div>
<!-- 段落内容 -->
<p>这是一个段落内容,可能包含一些文字,图片,代码,引用等元素。</p>
<!-- 段落图片 -->
<img src="..." alt="段落图片" />
<!-- 段落代码 -->
<code class="language-javascript">
console.log("Hello, world!");
</code>
<!-- 段落引用 -->
<blockquote>这是一个段落引用,可以使用不同的样式进行区分。</blockquote>
</div>
<!-- 省略了一些段落 -->
</div>
<!-- 文章标签 -->
<div class="article-tag">
前端
</div>
<!-- 文章信息 -->
<div class="article-info">
<!-- 文章点赞数 -->
<span>123</span>
<!-- 文章评论数 -->
<span>45</span>
<!-- 文章收藏数 -->
<span>67</span>
<!-- 文章分享按钮 -->
<button><i class="icon-share"></i></button>
</div>
</div>
<!-- 评论内容 -->
<div class="comment-list">
<!-- 评论列表 -->
<ul>
<!-- 每个评论项 -->
<li class="comment-item">
<!-- 评论作者 -->
<div class="comment-author">
<img src="..." alt="评论者头像" />
<span>李四</span>
</div>
<!-- 评论内容 -->
<p>这是一个评论内容,可能包含一些文字,图片,表情等元素。</p>
<!-- 评论信息 -->
<div class="comment-info">
<!-- 评论时间 -->
<span>2023年4月15日</span>
<!-- 评论点赞数 -->
<span>12</span>
<!-- 评论回复按钮 -->
<button>回复</button>
</div>
</li>
<!-- 省略了一些评论项 -->
</ul>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<!-- 底部导航 -->
<div class="footer-nav">
<ul>
<li><a href="/about/">关于掘金</a></li>
<li><a href="/join/">加入我们</a></li>
<li><a href="/contact/">联系我们</a></li>
<li><a href="/help/">帮助中心</a></li>
<li><a href="/law/">法律声明</a></li>
</ul>
</div>
<!-- 底部版权 -->
<div class="footer-copy">
<p>©2020 掘金 · 京ICP备14012449号-2</p>
</div>
</div>
</body>
</html>
感觉瞬间就不一样了吧。
三、拓展:为什么语义化标签可以提高网站SEO排名?
语义化标签可以提升网站的SEO排名,是因为它们可以让搜索引擎更好地理解网站的内容和结构。
搜索引擎的目的是为用户提供最相关和最有价值的信息。为了做到这一点,搜索引擎需要对网站进行抓取,索引,分析和排序等过程。在这些过程中,语义化标签可以起到以下几个作用:
- 语义化标签可以让搜索引擎更快地抓取和索引网站的内容,因为它们可以减少网页的代码量,提高网页的加载速度,避免出现错误或者缺失等问题;
- 语义化标签可以让搜索引擎更准确地分析和评价网站的内容,因为它们可以表达出网页的不同部分和主题,突出网页的重点信息,区分网页的层级和优先级等;
- 语义化标签可以让搜索引擎更好地匹配和排序网站的内容,因为它们可以提供更多的语义和逻辑信息,帮助搜索引擎理解用户的意图和需求,提升网站的相关性和质量等。
因此,使用语义化标签是一个非常有效和必要的方法,它可以让网站在搜索引擎中获得更高的排名和流量,从而吸引更多的用户和客户。