HTML语义化

来源:互联网 发布:逆战刷枪软件下载 编辑:程序博客网 时间:2024/06/03 20:22

##语义化的定义
语义(Semantics)化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,例如h1-h6标题,还有strong,em等,即可以通过标签判断内容语义。

语义化意义

1、有利于SEO:搜索引擎友好,网页内容容易别爬虫抓取(爬虫依赖于标签来确定上下文和各个关键字的权重);
2、HTML结构清晰,在没有CSS的情况下,页面也能较好的呈现出内容结构;
3、代码可读性好,无障碍阅读(屏幕阅读器、盲人阅读器、移动设备等);
4、便于团队维护和开发。

各新增标签使用注意事项

本段来源大佬总结部分摘要

可以使用到“网页”或任意“section”的头部部分;没有个数限制;
如果hgroup或h1-h6自己就能工作的很好,那就不要用header。

可以使用到“网页”或任意“section”的底部部分;没有个数限制;
除了包裹的内容不一样,其他跟header类似。

hgroup

如果只需要一个h1-h6标签就不用hgroup;如果有连续多个h1-h6标签就用hgroup;如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签。

用在整个页面主要导航部分上,不合适就不要用nav元素。

aside

aside在article内表示主要内容的附属信息;在article之外则可做侧边栏,没有article与之对应,最好不用;如果是广告,其他日志链接或者其他分类导航也可以用。

section

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article;
section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div;表示文档中的节或者段;article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div。

article

自身独立的情况下:用article;是相关内容:用section;没有语义的:用div。

新增标签的使用以及详细介绍

详戳大佬博客

标签语义化的应用

q:短文本的引用;
blockquote:对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签;
b/strong:文本加粗;
。。。