html语义化的理解

141 阅读2分钟

什么是html语义化

语义化就是构成HTML结构的标签要有意义,语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义,根据内容的语义化,使用语义恰当的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

html语义化有什么好处

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  • 方便其他设备解析以意义的方式来渲染网页;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。 HTML5中新增加的很多标签
    <nav>导航</nav>

常用的语义化标签

header:用于定义页面的介绍展示区域,页眉通常包括网站标志、主导航、全站链接以及搜索框

nav:定义页面的导航链接部分区域main元素,仅对文档中重要的链接群使用

article:定义页面独立的内容,它可以有自己的header、footer、sections

section:元素用于标记文档的各个部分,例如长表单文章的章节或主要部分

aside:一般用于侧边栏,例如文章链接、广告

footer:文档的底部信息

small:呈现小号字体效果

strong:用于强调文本

h1~h6:标题标签,h1等级最高,h6等级最低

del: 移除的内容

ins: 添加的内容

总结

  • 用正确的标签做正确的事情
  • html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析
  • 在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解