首页 > 网页教程 > HTML > HTML5大纲算法对结构的影响 网页优化必学

HTML5大纲算法对结构的影响 网页优化必学

时间:2012-08-15    来源:迅雷CUED

HTML5已经出来好长时间了,越来越多人希望并且开始把HTML5应用到平时的工作、个站中。大家对section、article、aside、nav等新标签的使用也越来越上手,也许是自我感觉良好的上手。不从多个方面去认识理解这些标签,可能反而让自己落入了更混乱的境地。HTML的大纲算法(outlining algorithm)就是一个很重要的切入点。

先看两个大纲:

这两个都是我早期的作品了。当时还觉得自己的结构写的不错,特别是第二个,还用上了HTML5标签,以为自己就踏进这个新世界了。看过HTML大纲算法之后,检测了一下这些页面,真的是惨不忍睹。第一个各种混乱标题不说,"主创阵容"居然从属于"用户评论"?第二个也不好发言了,那么多未命名的是什么东西?不过总是要踩在伤痛的历史上才能往前进。

再来看几个其他人重构的页面大纲:

想象你是一个有点视力障碍的用户,需要依靠屏幕阅读器来浏览这些网页,阅读器会按照层级来给你解读这个网页,你觉得上面那个网页更容易让你获得所需要的资讯呢?也许对比完大家更想知道大纲算法到底是个怎么样的东西了吧?

相关推荐
如何在IE6等老式浏览器中使用HTML5的新标签?
HTML5语义标签兼容IE6等老旧浏览器的方法分析
使用JS代码的方法让IE6轻松支持HTML5标签元素
HTML5建站教程:HTML5新标签与HTML4旧标签对应解释及用法
让所有的浏览器都能识别HTML5标签样式的小插件分享
HTML5的元素嵌套规则
网页设计师必收藏的十五个HTML5资源
新手入门:HTML5是什么?
35个WEB开发必备的实用HTML5教程
18个国外HTML5网站布局编码教程分享
网页使用HTML5代码需兼容IE的写法分享
HTML5新手入门教程之第一篇:什么是HTML5?
从9个不同的方面深入分析HTML5的性能
HTML5带给开发人员跨平台的开发体验
经历8年时间 属于HTML 5的春天才悄然到来
HTML5制作神器:零代码制作属于你的第一个酷炫H5页面
能让IE支持HTML5的解决方案
谷歌弃Gears浏览器插件 转重点开发HTML5
采用HTML5搭建的多个网站尝鲜试用
体验HTML5 Canvas对象的强大 五款在线绘图应用示例
HTML5新特性:用链接预取功能给网站提速
如何用HTML5制作网页?
神奇的HTML5动画效果演示网站
十三个网站案例让你提前体验HTML5和CSS3的魅力
基于HTML5的绘图程序Muro,支持Wacom手写绘图板
HTML5的一些的趣味小应用
HTML5、CSS和JavaScript与Web移动应用的未来趋势
十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
学好HTML5必备的七个在线资源推荐
HTML5教程之表单功能详解
四个HTML 5标签、属性、事件及浏览器兼容性速查表分享
15个采用HTML5实现的网站界面设计欣赏

精彩推荐

热门教程