我们常用div在加上自定义的类名来表示页面的不同部分,而语义化标签,其实就是帮我们做了这些事,像页面几乎都会有的头部,尾部,导航,主要内容,这些常见模块,我们不需要再使用自定义类名的div,而是直接使用对应的语义化标签<header>,<footer>,<nav><main>
所以语义化就是通过使用这些语义化标签,让页面的内容结构更清晰,便于开发者的阅读,维护,同时更有利于SEO(Seach Engine Optimization 搜索引擎优化)
搜索引擎优化:让页面在搜索引擎中的排名提升,以获取更多的访问量
语义化的优点
- 便于开发和阅读,例如看到<header>,就知道里面的内容是页面头部那一块
- 有利于SEO,可以提高搜索引擎的有效爬取，提高网站流量；
- 帮助辅助技术更好的阅读和转译你的网页；如盲人阅读器根据语义渲染网页
常见语义化的结构类标签
<title>页面的标题,放在<head>标签内,出现在浏览器标签页里
<hgroup>页面的标题,这里指页面里面的标题,用于页面里文章的标题,副标题等等
<section>页面某一部分
<header>页面(也可以是section)头部
<main>页面的主要内容,一个页面只能使用一次
<nav>导航部分
<footer>页面(也可以是section)的尾部
<aside>附属内容,侧边栏部分
<article>代表一个在文档，页面或者网站中自成一体的内容,容易和<section>搞混,其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论
<address> 作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
常见的语义化效果类标签
<em>斜体,表示强调
<strong>内容加粗,也表示强调,比<em>更强
<small>使用更小的字号,指定细则，输入免责声明、注解、署名、版权等
<mark>使用黄色背景色突出显示文本