语义化标签及其好处

189 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第27天,点击查看活动详情

\

前言

以前,使用div最后,最后是在什么样的情况下。然而div并没有什么意义,全靠开发者赋予。然而现在html5已经出来很久了,带来了一种叫做语义化标签,比如:article、head、main等都能够准确表达开发者的意图。 什么是语义化标签 语义化就是构成HTML结构的标签要有意义。

比如有这样的标签:

  • header表示页面头部
  • main表示页面主题
  • footer表示页面底部 那么这些标签构成的HTML结构就是有意义的,也是语义化的。

​ 如果说页面的头部、主体以及底部都用div来表示,那么他就不是一个语义化的HTML结构了。而语义化就是明白每个标签的用途,在合适的情况下使用标签。 。

语义化标签:在网页中HTML专门用来负责网页结果 ,故在使用html标签时,应该关注的是标签的语义,而不是它的样式,语义化标签总结L:

  1.标题标签:h1——h6 一共有六级标题

  从h1——h6重要性递减,h1最重要,h6最不重要

  h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1 。

  h1——h3较常用,h4——h6很少用

  标题标签都是块元素 ,在页面中独占一行的元素成为块元素(block element)

  2.hgroup标签用来为标签分组,可以将一组相关的标题同时放入到hgroup

  3. p标签标识页面中的一个段落&一个块元素

  4. em标签用于表示语义语调的一个加重,在页面中不会独占一行的元素称为行内元素。

  5. strong表示强调,重要内容!

  6.blockquote表示一个长引用

  7.q表示一个短引用

  8.br标签表示在页面中换行

语义化的好处

作用:利于 SEO、可访问性( 盲人阅读器 )、可读性( 开发维护 — 先写语义化的 HTML,再选合适的 CSS )