什么是HTML的语义化标签?在前端开发的过程当中,通常会使用h1~h6作为标题,使用ul li作为列表等等,通过这些标签我们可以知道其语义,但除了语义之外,还存在其他的作用。
那么语义化标签有什么作用呢?
第一,增强代码的可读性,也就是语义化,便于团队的开发和维护。
第二,有利于SEO,SEO依赖于语义化标签,以此来确定标签中文字的权重,据此来加强和搜索引擎的沟通,便于搜索引擎根据关键字搜索到网页。
第三,在没有载入JS和CSS的情况下,仍然能够在文档中呈现文档内容的结构。
基于以上几点,在编写HTML页面时,工程师们应注意尽量使用语义化标签里去代替无语义的标签,如div,span等等,以及仅仅起到样式作用的表现,比如b,i等等。和我一样还比较菜鸟的工程师们也许会存在疑问,strong和b有什么区别?从样式上看,这两个标签里的内容,都会以粗体呈现,但是strong还包含了强调的语义,即在SEO中,strong里的内容是占有较大权重的,而b标签则不存在此功能。若非如此,strong就失去了存在的意义。那么在编写HTML页面时,都应该尽量使用哪些语义化标签呢?
1.使用p代替div表达一个段落。p本身是pagram的意思,即段落。
2.使用strong代替b
3.使用em代替i
4.使用label标签来为input说明
5.使用fieldset包裹表单域,并用legen标签对表单用途进行说明
6.使用表格时,不要忽略thead,tbody,tfoot,单元格内,在thead中使用th,在tbody中使用td。使用caption作表的标题。
7.使用ul表达有序列表,ol表无序列表。
8.在图片中使用title和alt进行说明。
语义化标签的内容暂时到这里,有什么新的理解,再做更新。