重学前端——HTML语义化标签

语义化标签,顾名思义就是HTML中具有一些用以表名特殊含义的标签,人在任何时候都是具有惰性的,能不需要动脑子的时候就不愿意主动去思考,写起代码来也是一样。很多时候在写前端HTML的时候,一个div标签走天下,这样来写有没有问题呢。从实现的效果上来看,当然是没问题的,但是我们要明确一点,我们写出来的网页不仅仅是给用户来看,同时也需要给其他的开发者、特殊机器和搜索引擎的爬虫来看。所以在HTML中合理的使用语义化标签,是很重要的。

语义化标签

  • <title> 元素可定义文档的标题 一个文档中不能有一个以上的 <title> 元素
  • <hn> h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
  • <ul> 标签定义无序列表
  • <ol> 标签定义有序列表
  • <header> 页眉,包含整个页面或者区块的标题、简介等信息
  • <nav> 标签定义导航链接的部分
  • <main> 标签规定文档的主要内容,元素中的内容对于文档来说应当是唯一的。在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>
  • <article> 标签规定独立的自包含内容 常见应用为:论坛帖子、报纸文章、博客条目、用户评论
  • <section> 标签定义文档中的节
  • <aside> 标签定义其所处内容之外的内容 如侧栏、文章的一组链接、广告、友情链接、相关产品列表等
  • <footer> 标签定义文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 <footer> 元素
  • <small> 标签呈现小号字体效果
  • <strong> 用于强调文本,但它强调的程度更强一些 加粗
  • <em> 标签告诉浏览器把其中的文本表示为强调的内容 斜体
  • <mark> 标签定义带有记号的文本
  • <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)
  • <time> datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式
  • <abbr> 缩写
  • <dfn> 标签可标记那些对特殊术语或短语的定义
  • <address> 标签定义文档或文章的作者/拥有者的联系信息
  • <del> 定义文档中已被删除的文本。请与 <ins> 标签配合使用,来描述文档中的更新和修正
  • <ins> 标签定义已经被插入文档中的文本
  • <code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容
  • <progress> 标签标示任务的进度(进程)

区分

i、em、strong、b

这几个标签都有突出显示的功能 其中b和strong浏览器会加粗 i和em浏览器会以斜体的形式显示

  1. em(emphasis)会对文本含义有改变作用,类似读一句话时重读某一个字或词会表达不一样的意思一样。
  2. strong会突出包含文本的重要性、严重性和紧急性等。
  3. i(indicating)标签为了表示不同语态或特性的文本,有点像文字排版里面的那些用斜体表示的内容(技术术语、外语习语这些排版会有不同的内容)。
  4. b(drawn)标签主要是为了突出显示关键词、产品名称等;
    b标签的语义规范也是很模糊,所以也是不太建议用。

总结

HTML这种语言,并不是对代码的要求十分的严谨,也就是说我们在编码的时候有很多的选择。使用HTML5语义化标签固然重要,但是如果出现一些标签被滥用,错用同样会造成不必要的麻烦。我觉得用下面一段话来总结在合适不过,但你不知道在一定场景该使用什么语义化标签的时候那就不要用。