语义化标签有哪些

什么是语义化标签

HTML 5的革新之一：语义化标签 —— 节元素标签

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html 5的出现消失了，这就是我们平时说的 “语义”。

看下图没有用div标签来布局

如上图那个页面结构没有一个 div，都是采用html 5语义标签（用哪些标签，关键取决于你的设计目标）。

但是也不要因为html 5新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C定义了这些语义标签，不可能完全符合我们有时的设计目标，就像制定出来的法律不可能流传100年都不改变，更何况它才制定没多久，不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”，我们的目标是让爬虫读懂重要的东西就够了。

结论：不能因为有了HTML 5标签就弃用了div，每个事物都有它的独有作用的。

节点元素标签因使用的地方不同，我将他们分为：节元素标签、文本元素标签、分组元素标签

下面我们分开来讲解HTML 5中新增加的语义化标签和使用总结

语义化的意义与作用

代码结构得到了优化，即使没有css，也能呈现出完整、清晰的结构，更加方便阅读和理解
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
爬虫依赖标签确定关键字的权重，可以帮助爬虫爬出更多有效信息

语义化都注意什么？

尽可能少用无语义的p、span标签等；使用HTML5中新增的较多强语义化标签，；
不要使用样式化标签，如font、b等等等，完全可以用css实现样式（再说HTML5中基本将此类“样式化标签”废除了！）
强调文本，尽量使用strong标签加强强调，em标签设置斜体
表格书写规范：标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；(说实话，这个倒真没怎么注意到！)
每个input标签对应的说明文本都需要使用label标签，并且通过id属性和相对应的input关联起来。