什么是HTML语义化
HTML语义化是指根据内容的结构和含义选择合适的HTML标签，以更好地表达内容的意义和层次。通俗来讲，就是用正确的标签做正确的事情。
HTML语义化的优点
-
对机器友好：
- SEO友好：语义化的标签让搜索引擎更容易理解网页内容，有助于搜索引擎优化。
- 提高可访问性：例如屏幕阅读器可以通过语义化标签更好地理解和朗读网页内容，帮助视障用户浏览网页。
- 内容组织：语义化标签有助于搜索引擎爬虫和其他自动化工具更好地抓取和索引网页内容，甚至自动生成目录。
-
对开发者友好：
- 代码可读性：语义化标签增强了代码的可读性，开发者可以更清晰地理解网页结构和内容。
- 维护和协作：清晰的结构有助于团队协作和项目维护，使得开发者能够快速定位和修改代码。
常见的HTML语义化标签及其用途
- header：定义文档或部分的头部，通常包含导航、logo等。
- nav：定义导航链接部分，包含一组导航链接。
- section：定义文档中的一个区块，用于分隔内容。
- main：定义文档的主要内容，文档中主体部分的容器。
- article：定义独立的内容单元，例如文章、博客帖子、新闻等。
- aside：定义与主内容相关的辅助内容，通常为侧边栏。
案例分析
以哔哩哔哩网站为例
哔哩哔哩（NASDAQ:BILI；HKEX:9626，英文：bilibili）是文化社区和视频网站，于2009年6月26日创建，是中国年轻一代的标志性品牌及领先的视频社区，被网友们称为“B站”。
首先打开B站官网：www.bilibili.com
然后摁F12打开控制台，取得页面源代码
代码如下：
<!DOCTYPE html> | |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | <html lang="zh-CN" class="gray"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title> |
| | <meta |
| | name="description" |
| | content="哔哩哔哩（bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。" |
| | /> |
| | <meta |
| | name="keywords" |
| | content="bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃" |
| | /> |
| | <meta name="renderer" content="webkit" /> |
| | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| | <meta name="spm_prefix" content="333.1007" /> |
| | <meta name="referrer" content="no-referrer-when-downgrade" /> |
| | <meta name="applicable-device" content="pc"> |
| | <meta http-equiv="Cache-Control" content="no-transform" /> |
| | <meta http-equiv="Cache-Control" content="no-siteapp" /> |
| | <meta name="server_render" content="is_server_render" /> |
| | |
| | <link rel="dns-prefetch" href="[//s1.hdslb.com](https://s1.hdslb.com/)" /> |
| | <link rel="apple-touch-icon" href="<https://i0.hdslb.com/bfs/static/jinkela/long/images/512.png>" /> |
| | <link rel="shortcut icon" href="<https://i0.hdslb.com/bfs/static/jinkela/long/images/favicon.ico>" /> |
| | <link rel="canonical" href="<https://www.bilibili.com/>" /> |
| | <link rel="alternate" media="only screen and (max-width: 640px)" href="[https://m.bilibili.com](https://m.bilibili.com/)" /> |
| | <link |
| | rel="stylesheet" |
| | href="[//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css](https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css)" |
| | media="print" |
| | onload="this.media='all'" |
| | /> |
| | <link |
| | rel="stylesheet" |
| | href="[//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css](https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css)" |
| | media="print" |
| | onload="this.media='all'" |
| | /> |
| | <script>window._BiliGreyResult={"method":"gray","grayVersion":"61622"}</script><script src="[//s1.hdslb.com/bfs/static/laputa-home/client/assets/svgfont.c9c556fd.js](https://s1.hdslb.com/bfs/static/laputa-home/client/assets/svgfont.c9c556fd.js)" async></script><script src="<https://www.bilibili.com/gentleman/polyfill.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2020%2Ces2021%2Ces2022%2CglobalThis&flags=gated>"></script> |
| | <script type="text/javascript" src="[//s1.hdslb.com/bfs/seed/jinkela/short/bmg/register/fallback.js](https://s1.hdslb.com/bfs/seed/jinkela/short/bmg/register/fallback.js)"></script> |
| | |
| | <link rel="stylesheet" href="[//s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/map.css](https://s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/map.css)"/> |
| | <link rel="stylesheet" href="[//s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/light_u.css](https://s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/light_u.css)"/> |
| | <link id="__css-map__" rel="stylesheet" href="[//s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/light.css](https://s1.hdslb.com/bfs/seed/jinkela/short/bili-theme/light.css)"/> |
| | |
| | <!--server-config--> |
| | <script type="text/javascript"> |
| | window.__NANO_VERSION_HASH__ = "7b23e544" |
| | </script> |
| | <script type="text/javascript"> |
| | // 当没有值时，给一个合适页面使用的 |
| | if (!window.__NANO_VERSION_HASH__) { |
| | window.__NANO_VERSION_HASH__ = '17866fdb' |
| | } |
| | </script> |
| | <script type="text/javascript"> |
| | ;(function () { |
| | if (document.querySelector('meta[name=server_render]')) { |
| | return |
| | } |
| | var ua = window.navigator.userAgent, |
| | agents = ['Android', 'Phone', 'SymbianOS', 'iPod'], |
| | isPC = true |
| | if (/\sVR\s/g.test(ua)) return |
| | for (var i = 0, len = agents.length; i < len; i++) { |
| | if (ua.indexOf(agents[i]) > 0) { |
| | isPC = false |
| | break |
| | } |
| | } |
| | if (!isPC) { |
| | window.location.href = window.location.href.replace('www', 'm') |
| | } |
| | })() |
| | </script> |
| | <script type="text/javascript"> |
| | window.spmReportData = {} |
| | window.reportConfig = { |
| | sample: 1, |
| | msgObjects: 'spmReportData', |
| | errorTracker: true |
| | } |
| | function getCookie(name) { |
| | var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)') |
| | var r = document.cookie.match(reg) |
| | return r ? unescape(r[2]) : null |
| | } |
| | function fsrCb() { |
| | const t = new Date().getTime() |
| | if (window.performance && window.performance.timing) { |
| | window.performance.timing.firstscreenfinish = t |
| | } |
| | } |
| | // 2024首页性能打点上报 start |
| | var isFirstSwipeLoadReported = false |
| | function firstSwipeLoaded(index) { |
| | if (+index <= 1 && !isFirstSwipeLoadReported) { |
| | isFirstSwipeLoadReported = true |
| | window?.__MIRROR_REPORT__?.customPerformanceQuota({ |
| | name: 'swipe_img_load', |
| | value: +new Date() - window.performance.timing.navigationStart, |
| | }) |
| | } |
| | } |
| | var isFirstVideoCardImgLoadReported = false |
| | function firstVideoCardImgLoaded(index) { |
| | if (+index === 0 && !isFirstVideoCardImgLoadReported) { |
| | isFirstVideoCardImgLoadReported = true |
| | window?.__MIRROR_REPORT__?.customPerformanceQuota({ |
| | name: 'videocard_img_load', |
| | value: +new Date() - window.performance.timing.navigationStart, |
| | }) |
| | } |
| | } |
| | // 2024首页性能打点上报 end |
| | // 图片降级使用 |
| | function imgOnError(img) { |
| | typeof window.imgAutoFallbackOnError === 'function' && window.imgAutoFallbackOnError(img) |
| | } |
| | // 图片降级使用 |
| | function imgOnLoad(img) { |
| | typeof window.imgAutoFallbackOnLoad === 'function' && window.imgAutoFallbackOnLoad(img) |
| | } |
| | function lqipCb(img) { |
| | var lqip = |
| | img && img.parentNode && img.parentNode.querySelector('.lqip') |
| | if (lqip) { |
| | lqip.classList.add('is-active') |
| | } |
| | } |
| | if (history.scrollRestoration) { |
| | history.scrollRestoration = 'manual' |
| | } |
| | window.page_load_time = Date.now() |
| | </script>
(因空间关系仅挂出部分代码，读者可以自行去b站主页取得)
语义化分析如下
1. <html> 标签
- 描述: 定义整个 HTML 文档。
- 属性:
lang="zh-CN"指定文档的语言为中文（中国）。
2. <head> 标签
-
描述: 包含文档的元数据。
-
内容:
<meta charset="UTF-8">: 设置文档的字符编码为 UTF-8。<title>: 定义文档的标题。<meta name="description">: 提供页面的描述。<meta name="keywords">: 提供页面的关键词。<meta name="renderer" content="webkit">: 指定渲染引擎为 WebKit。<meta http-equiv="X-UA-Compatible" content="IE=edge">: 使文档在 IE 中以最新的渲染模式显示。<meta name="referrer" content="no-referrer-when-downgrade">: 控制 HTTP 引用头的发送。<meta name="applicable-device" content="pc">: 指定适用的设备为 PC。<link rel="dns-prefetch" href="//s1.hdslb.com">: 预解析 DNS。<link rel="apple-touch-icon" href="...">: 定义苹果设备的图标。<link rel="shortcut icon" href="...">: 定义网页的图标。<link rel="canonical" href="https://www.bilibili.com/">: 指定页面的规范 URL。<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.bilibili.com">: 提供移动设备的替代链接。<link rel="stylesheet" href="...">: 引入外部 CSS 文件。<script>: 引入外部 JavaScript 文件。
3. <body> 标签
-
描述: 包含文档的主体内容。
-
内容:
-
<div class="browser-tip"></div>: 提示用户浏览器版本的提示框。 -
<div id="i_cecream">: 包含主要内容的容器。-
<div class="bili-video-card__wrap">: 包含视频卡片的容器。<a href="...">: 视频链接。<div class="bili-video-card__image">: 视频封面图片。<div class="bili-video-card__info">: 视频信息。
-
-
<div class="bili-header">: 包含头部导航栏。-
<ul class="left-entry">: 左侧导航项。<li><a href="...">: 导航链接。
-
<div class="center-search-container">: 中间搜索框。-
<form id="nav-searchform">: 搜索表单。<input class="nav-search-input">: 搜索输入框。<div class="nav-search-btn">: 搜索按钮。
-
-
<div class="right-channel-container">: 右侧频道链接。<a class="channel-link" href="...">: 频道链接。
-
-
4. <script> 标签
-
描述: 包含 JavaScript 代码。
-
内容:
- 定义全局变量和函数。
- 处理页面加载和用户交互事件。
总结
HTML 语义化分析
1. <html> 标签
- 描述: 定义整个 HTML 文档。
- 属性:
lang="zh-CN"指定文档的语言为中文（中国）。
2. <head> 标签
- 描述: 包含文档的元数据。
- 内容:
<meta charset="UTF-8">: 设置文档的字符编码为 UTF-8。<title>: 定义文档的标题。<meta name="description">: 提供页面的描述。<meta name="keywords">: 提供页面的关键词。<meta name="renderer" content="webkit">: 指定渲染引擎为 WebKit。<meta http-equiv="X-UA-Compatible" content="IE=edge">: 使文档在 IE 中以最新的渲染模式显示。<meta name="referrer" content="no-referrer-when-downgrade">: 控制 HTTP 引用头的发送。<meta name="applicable-device" content="pc">: 指定适用的设备为 PC。<link rel="dns-prefetch" href="//s1.hdslb.com">: 预解析 DNS。<link rel="apple-touch-icon" href="...">: 定义苹果设备的图标。<link rel="shortcut icon" href="...">: 定义网页的图标。<link rel="canonical" href="https://www.bilibili.com/">: 指定页面的规范 URL。<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.bilibili.com">: 提供移动设备的替代链接。<link rel="stylesheet" href="...">: 引入外部 CSS 文件。<script>: 引入外部 JavaScript 文件。
3. <body> 标签
- 描述: 包含文档的主体内容。
- 内容:
<div class="browser-tip"></div>: 提示用户浏览器版本的提示框。<div id="i_cecream">: 包含主要内容的容器。<div class="bili-video-card__wrap">: 包含视频卡片的容器。<a href="...">: 视频链接。<div class="bili-video-card__image">: 视频封面图片。<div class="bili-video-card__info">: 视频信息。
<div class="bili-header">: 包含头部导航栏。<ul class="left-entry">: 左侧导航项。<li><a href="...">: 导航链接。
<div class="center-search-container">: 中间搜索框。<form id="nav-searchform">: 搜索表单。<input class="nav-search-input">: 搜索输入框。<div class="nav-search-btn">: 搜索按钮。
<div class="right-channel-container">: 右侧频道链接。<a class="channel-link" href="...">: 频道链接。
4. <script> 标签
- 描述: 包含 JavaScript 代码。
- 内容:
- 定义全局变量和函数。
- 处理页面加载和用户交互事件。
总结
Bilibili 主页的 HTML 结构包含了文档的元数据、导航栏、搜索框、视频卡片等元素。通过使用语义化标签和属性，页面结构清晰，便于搜索引擎和辅助技术理解和解析。
