一、什么是语义化的HTML？
HTML 超级文本标记语言，在页面中的作用就是结构和含义，像a表示链接，div表示一个区块，h系列表示标题类等等。
语义化的HTML（结构标记），HTML5中新增特性。专门提出一组标记用来表示网页的结构，让写出的HTML代码，符合内容的结构，以划分内容，取代div布局，提升布局代码的语义性和可读性，能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
ex:<div></div>---><header></header>
2.常用的结构标记
1.header元素
作用：定义网页或其他部分内容的页眉（靠顶部的内容）
语法：<header>内容</header>
2.nav元素
作用：定义网页的导航链接部分
语法：<nav></nav>
3.section元素
语义：小节
作用：定义页面中的节，表示页面的主体内容
语法：<section></section>
4.footer元素
作用：定义页面的底部信息，用户不太注意的内容：网站备案号，解释说明
语法：<footer></footer>
5.aside元素
作用：定义页面中的边栏信息
语法：<aside>内容</aside>
6.article元素
语义：文章，艺术
作用：定义简短的内容，章，节，比如：论坛帖子，用户评论，微博条目
语法:<article></article>
注意：如果以后出现无法被结构标记取代的模块，那么继续用div布局。
如下div布局及结构标签布局两个例子，在网页中展现一模一样。明显结构标签布局语义行更强，便于开发者理解和阅读
例一：
<!doctype html>
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
</head>
<body>
<div id="header">页面顶部</div>
<div id="nav">主导航</div>
<div id="banner">banner</div>
<div id="main">
<div id="left_side">左边栏</div>
页面主体
</div>
<div id="footer">页面底部</div>
</body>
</html>
例二：
<!doctype html>
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
</head>
<body>
<header>页面顶部</header>
<nav>主导航</nav>
<div>banner</div>
<section>
<aside>左边栏</aside>
页面主体
</section>
<footer>页面底部</footer>
</body>
</html>
总结语义化的标签的作用
html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
- 2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
- 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。
- 4.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
- 5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
推荐阅读
网友评论