html语义化
2017-11-28 本文已影响0人
海娩
参考：
HTML编码规范
html语义化标签探析
html语义化
根据html元素用途来使用它们。减少盲目过多使用div标签和span标签。
为什么要有语义化？
-
有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的，因此语义化标签能使爬虫抓取更多的有效信息。
-
CSS文件读取失败的准备：万一CSS文件挂了，语义化的HTML也能呈现较好的内容结构与代码结构。
-
方便其它设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。
-
便于团队开发和维护
-
方便模块化
image.png
<!-- 不推荐 --> <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。。
