什么是 web 语义化,有什么好处

 什么是 web 语义化,有什么好处

web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签的语义化和 css 命名的语义化。

HTML 标签的语义化是指:通过使用包含语义的标签(如 h1-h6)恰当地表示文档结构

css 命名的语义化是指:为 html 标签添加有意义的 class,id 补充未表达的语义,如[Microformat](http://en.wikipedia.org/wiki/Microformats)通过添加符合规则的 class 描述信息

为什么需要语义化:

- 去掉样式后页面呈现清晰的结构

- 盲人使用读屏器更好地阅读

- 搜索引擎更好地理解页面,有利于收录

- 便团队项目的可持续运作及维护

以下内容转自  https://blog.csdn.net/qq_38128179/article/details/80811339     @Demi博主原创文章

什么是语义元素?

语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到

标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化?

  • 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
  • 有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
  • 提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
  • 便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
  • 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。

HTML5常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分,它们被称为“切片元素”,如图所示  

                             

大约有100多个HTML语义元素可供选择,以下是常用的语义元素

结构体 文本 一致
  • header
  • h1
  • h2
  • h3
  • nav
  • footer
  • article
  • section
  • p
  • ul
  • ol
  • li
  • blockquote
  • a
  • strong
  • em
  • q
  • abbr
  • small

~
元素

定义页面的标题,h1元素具有最高等级,h6元素具有最低的等级

元素

用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

   

HTML Reference

   

你可能感兴趣的:(JavaScript,html)