我们常用div在加上自定义的类名来表示页面的不同部分,而语义化标签,其实就是帮我们做了这些事,像页面几乎都会有的头部,尾部,导航,主要内容,这些常见模块,我们不需要再使用自定义类名的div,而是直接使用对应的语义化标签<header>,<footer>,<nav><main>

所以语义化就是通过使用这些语义化标签,让页面的内容结构更清晰,便于开发者的阅读,维护,同时更有利于SEO(Seach Engine Optimization 搜索引擎优化)

搜索引擎优化:让页面在搜索引擎中的排名提升,以获取更多的访问量

语义化的优点

  1. 便于开发和阅读,例如看到<header>,就知道里面的内容是页面头部那一块
  2. 有利于SEO,可以提高搜索引擎的有效爬取，提高网站流量；
  3. 帮助辅助技术更好的阅读和转译你的网页；如盲人阅读器根据语义渲染网页

常见语义化的结构类标签

<title>页面的标题,放在<head>标签内,出现在浏览器标签页里

<hgroup>页面的标题,这里指页面里面的标题,用于页面里文章的标题,副标题等等

HTML5语义化标签案例 html5中的语义化标签有哪些_开发者

 

HTML5语义化标签案例 html5中的语义化标签有哪些_语义化_02

 

<section>页面某一部分

<header>页面(也可以是section)头部

<main>页面的主要内容,一个页面只能使用一次

<nav>导航部分

<footer>页面(也可以是section)的尾部

<aside>附属内容,侧边栏部分

<article>代表一个在文档，页面或者网站中自成一体的内容,容易和<section>搞混,其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论

<address> 作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

常见的语义化效果类标签

<em>斜体,表示强调

<strong>内容加粗,也表示强调,比<em>更强

<small>使用更小的字号,指定细则，输入免责声明、注解、署名、版权等

<mark>使用黄色背景色突出显示文本