使用语义话标签的意义
语义类标签对开发者更为友好,使用语义类标签加强了可读性,即使是在没有 CSS 的时 候,开发者也可以清晰地看出网页的结构,也更为便于团队的开发和维护。
除了对人类友好以外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合 搜索引擎检索(SEO),也可让搜索引擎爬虫更好地获取到更多有效信息,有效提高
网页的搜索量,而且语义类还能够支持读屏软件,根据文章能够自动生成目录等等。canvas
对于语义标签的态度是:“用对”比“不用”好,“不用”比“用错”好。ide
经常使用标签集合:工具
header: 一般出如今前部,表示导航或者介绍性的内容 nav: 定义导航连接的部分 footer: 一般出如今尾部,包含一些做者信息、相关连接、版权信息等。 section: 表明某一个区域,分区,页面或者文档的一部分区域,有独立的内容,但结构相近,就能够用section,范围比div大,语义比div更强,能够包含header、h1-h6……凸显语义的标签 hgroup: 用于对网页或区段(section)的标题进行组合 eg: <section> <hgroup> <h1>this is h1 of my article</h1> <h2>this is h2 of my article</h2> </hgroup> <p>The rest of the content...</p> </section> article:定义外部的内容。好比来自一个外部的新闻提供者的一篇新的文章、或者来自 blog 的文本、或用户评论、或者是来自论坛的文本。亦或是来自其余外部源内容。 aside: 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容,很容易被理解为侧边栏,实际上两者是包含关系,侧边栏是 aside,aside 不必定是 侧边栏。 time: 定义日期或时间,或者二者。 video: 定义视频,好比电影片断或其余视频流. canvas: 定义图形,好比图表和其余图像。这个 HTML 元素是为了客户端矢量图形而设计的。它本身没有行为,但却把一个绘图 API 展示给客户端 JavaScript 以使脚本可以把想绘制的东西都绘制到一块画布上。 audio: 定义声音,好比音乐或其余音频流。 address:表示“文章(做者)的联系方式“ datalist:定义可选数据的列表。与 input 元素配合使用,就能够制做出输入值的下拉列表。 details: 用于描述文档或文档某个部分的细节 summary: 包含 details 元素的标题,”details” 元素用于描述有关文档或文档片断的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素