理解HTML5语义化

理解HTML5语义化

最近学习HTML，发现HTML5新增了一些元素。在HTML5以前，要表达一个文档结构，可能只通过<div…/>元素来实现，通过给div设定id或class来代表不同的含义。而为了使页面布局更加明确，HTML5便提供了很多语义更加明确的结构元素。HTML5还提供了很多其他语义元素。在此，有必要梳理一下对HTML5语义化的理解。

先来理解一下语义化的概念：
语义化就是让文本内容来结构化，选择与语义相符合的标签，使代码语义化，不仅便于开发者阅读，也能维护和写出更优雅的代码，还能够让搜索引擎和浏览器等工具更好的解析。

语义化用途：
1.尽可能少的使用div和span这些无语义的标签；
2.不要为了实现样式而使用纯样式的标签，比如b、i、font等，改用css样式来设置；
3.需要强调的文本，可以用strong和em标签来表示，strong是加粗，em是斜体；
4.使用表格时，标题、表头、主体部分和尾部都要用对应的标签；
5.在即可以使用div，又可以使用p使，尽量使用p标签；
6.表单域要用fieldset包起来，使用legend标签说明表单的用途；
7.input标签的说明文本需要用label标签，指定label标签的for属性使其与input关联；

HTML5也保留了一些与语义相关的元素
如：addr、address、blockquote、code等。

HTML5新增的结构标签
article/section/header/footer/nav/aside/main/figure/figcaption
article:一篇独立的文档内容，内部可以嵌套header/footer/section/article
section:对页面内容进行分块，内部可以包含一个标题，嵌套section/article
header:包含复杂内容的标题时，使用header来组织
nav:定义页面上的导航条，配合ul、li和a标签使用
aside:页面或者文章的附属信息，通常使用css渲染成侧边栏
main:一个页面最多包含一个main标签，包含导航条、LOGO、版权信息等之外的主体内容
figure:用于表示独立的"图片区域"
figcaption:放在figure内容，定义图片区域的标题

HTML5新增的语义标签
mark/time/details/summary/wbr/bdi
wbr:指定文本在何处适合添加换行
bdi:将一段文本从上下文中隔离出来

更多内容可以参考这篇文章，写的很好：https://zhuanlan.zhihu.com/p/32570423