参考:
HTML编码规范
html语义化标签探析
html语义化
根据html元素用途来使用它们。减少盲目过多使用div
标签和span
标签。
为什么要有语义化?
有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的,因此语义化标签能使爬虫抓取更多的有效信息。
CSS文件读取失败的准备:万一CSS文件挂了,语义化的HTML也能呈现较好的内容结构与代码结构。
方便其它设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。
便于团队开发和维护
-
方便模块化
<!-- 不推荐 --> <div class="col"> <div class="title">news</div> <p>list1</p> <p>list2</p> <p>list3</p> </div> <!-- 推荐 --> <div class="col"> <h2 class="title">news</h2> <p>list1</p> <p>list2</p> <p>list3</p> </div>
部分标签说明:
标签 | 用途 |
---|---|
div | 主要用于布局,分割页面的结构; |
ul/ol | 主要用于无序/有序列表; |
dl/dt/dd | 当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签; |
span | 没有特殊的意义,可以用作排版的辅助,然后在css中定义span; |
h1-h6 | 标题, 根据重要性依次递减; |
label | 使表单更有亲和力而且能辅助表单排版; |
header | 网页或'section'的页眉,作为整个页面或内容块的标题 |
footer | 页脚,作为网页或'section'的底部部分 |
nav | 页面的导航链接区域,用于定义页面的主要导航部分 |
aside | 被包含在article元素中的附属信息部分,侧边栏 |
section | 文章里主题段,页面中的分组 |
article | 论坛的帖子,博客上的文章,一篇用户的评论 |
strong | 关键词信息 |
多媒体降级处理
给多媒体元素,比如canvas
,videos
,img
增加alt属性,提高可用性,提供图片的描述信息
<img src="world.jpg" alt="our world images">
总结
最近看seo优化,想提高网页被搜索概率,就会一直看到html语义化的信息,也看到一句话,javascript是用来粘合html和css的,在重视javascript的同时,也应该看看html5,css3。。