深入理解html5标签

文章简介：

关于html5相信大家早已经耳熟能详，但是他真正的意义在具体的开发中会有什么作用呢？相对于html，他又有怎样的新的定义与新理念在里面呢？为什么一些专家认为html5完全完成后，所有的工作都可以达到真正的云方式呢？这一系列的问题你是否已经想明白了呢？

本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如：html5新的理念与想法，html5的新标签的用意与具体开发中场景应用，html5与css3的感情经历（用法搭配），包括html5的父亲html的一些小隐私（您在开发中可能不知道的事）;

 

大家好，又与大家见面了，今天我会为大家讲到的您可能不知道的事有什么呢？下面我们就来看看

1)html5中的<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处？

2)html5通用的容器<div>、<span>在HTML5中的生存含义？

3)如何使用ARIA提升可访问性？

 

第一个问题：

html5中的<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处？

小编在写这几个标签的时候真是想了又想，我想知道怎么写才能很简单明白的把html5中的这几个标签写明白；同时自己也读了一下上一篇中关于 <header>标签的讲解；

感觉如果对于一个没有接触过HTML5的人来说可能感觉有点乱，而对已经知道是HTML5的人来说有感觉没有什么新奇的地方，所以感觉像以前一样的写法有点鸡肋了；

所以今天打算换一个写法，用完全小白的写法来讲述问题中的这几个标签；

第一对这个几个标签的理解：

HTML5的设计者们可以说是用心良苦呀，他们认真分析HTML4.0中出来的问题，也就是当下对流行的写页面的方式就是<div>+css；我们也不难发现只要用到这个就可以把页面写即简单有漂亮

没有繁琐的标签在里面，需要什么功能就去加div标签就可以了；而div是什么呢？这个我们下一个问题详细说明；问题的关键在于div没有任何的语意，也就是说他要干的事是什么全凭开发者说了算；这就造成了严重的开发规范不统一，也就是说页面的导航栏是div，页面的边栏也是div，唯一区分它们的就是id，可能一些有心的开发者会吧，div的id写的语意明白些,比如:导航栏的id用“nav”,边栏的id用“aside”；这样的写法对其他的开发者看来还是很好的，因为看到id就可以知道这个div是干什么用的了；但是还是有一大部分的开发者会这么写如：导航栏的id用：“div1”,边栏的id用:"div2",这样的写法对用户来说的可能没有什么区别，因为开发者知道他们都代表什么，而对其他的开发者来说这真的是灭顶之灾，用英文来说就是“reading the fucking code”,而对开发者本身可能时间一长也不知道是什么意思了，但是下次开发的时候他们一定还有人是这么干的；

回到正题，经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧，就是为了解决开发规范不统一的问题同时也为了增强语意，有人也许会问为什么HTML5为什么那么在意语意？用了上面的标签可以说带来什么好处呢？这个答案用一个非常简单的话来说的那就是：为了统一规范与新功能的出现；（如果不明白这句话的话请持续关注我的博客哦，慢慢就明白了，这个用一句话与两句话也讲不清楚）；

他们这些标签功能就是代替div功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；

第二这几个标签的语意与用法：

nav:标记导航（对应网页中重要的链接群就需要用这个标签）包含的他中间的通常是<ul>无序列表；当然如果是面包屑链接就需用到<ol>有序列表；只要记住这个语意自己灵活发挥就是可以了；写法与上一篇中的<header>标签的写法一样；

特别提示：1)HTML5规范不推荐对有辅助性的页脚链接用<nav>;2)THML5中不允许将<nav>嵌套在address标签中；

article：文章标记标签（表示的是一个文档、页面、应用或是网站中的一个独立的容器，原则上来讲就是聚合），当朋友们用到他的时候满足上面的用法就不会出错了，写法与上一篇中的<header>标签的写法一样；

特别提示：1）article这个标签可以嵌套使用，但是他们必须是部分与整体的关系；2）同样不能用在<address>标签中；3）他与<section>标签容易混淆所以需要注意；(后面我会说一下怎么在这个两个中间做出选择；)

section:区块定义标签（表示的是文档或是应用的一个一般的块），他一般是有一组相似的主题的内容；一般会包含一个标题；可以用这个标签来写：文章的章节，标签式对话框中的各种标签页等等类似的功能；这里你会发现他与article这个标签很像对不对？那么怎么的开发中正确的应用他们呢？

其实也很简单你就这样想：如果你的页面中需要一个单独的模块来实现一个单独的功能也就是高聚合的情况就用<article>其他的时候都用<section>;只要你这样想并且这样用就没有问题的；

aside:定义侧栏标签（表示一部分内容与页面的主体并不是有很大的关系，但是可以独立存在），用他可以实现：升式引用、侧栏、相关文章的链接框、广告、友情链接等等；

特别提示：1）如果使用多个aside标签应该在主要内容的后面，这样有利于SEO的搜索与提升可访问性；2）如果是与文章的主要内容有关系的图像需要用<figure>（后面的文章会介绍）标签而不是用他；

footer:页脚标签（与header标签对应的标签）用他可以实现的功能有：附录、索引、版权页、许可协议等。写法与上一篇中的<header>标签的写法一样；

特别提示：1）页脚并不一定是要位于所在元素的末尾；不过通常是这样的，2）他不可以放在<header>标签中；也不可以相互嵌套，或是在<address>元素中；

 

第二个问题：

html5通用的容器<div>、<span>在HTML5中的生存含义？

div 这个标签在很久很久以前就已经出现在HTML中了，他的全拼是（division）,而在HTML5中的很多的新标签都是他的功能的统一定义而已，因为div本身没有任何的语意；但是可以对他增加css样式；这样就可以很好的为页面做出一些我们理想中的效果；那么在HTML5为什么他还存在呢那就是因为；在某些时候你会发现你用HTML5中的任何一个标签都不合适你现在需要的语意 ，所以在这个时候就需要用到div这个标签了，说道div那么以要说说与他相对应的<span>这个标签， 他也是一个没有任何语意的标签起到的功能与作用是和div一样的只不过用法不一样：div是块级的无语意容器，span是短语的无语的容器；（后面 我会在详细的说一些span）标签；

div的用法相信朋友们用的一定比我熟悉所以这里关于他的用法就不多说了只是针对在HTML5中对div的使用我提几点建议：

1)如果你觉得用HTML5中的新的标签比用div合适就一定要用新的标签，因为div没有任何的语意，这个是HTML5所不倡导的；

2)如果效果需要的话可以在HTML5新标签的外面加一个div标签，这样对html中的语意不会产生太大的影响；

 

第三个问题：

如何使用ARIA提升可访问性？

不知道朋友们有没有发现我在写HTML5的第一个博客就一直在说语意语意的，语意真的有那么重要么？通过语意又怎么提高访问性与曾加SEO的搜索的呢？因为现在一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准做一些新的功能；他们会很具新的语意直接与自身的功能相对应；如果网页的开发者也是这么做的那么你的网站的应用性会大大的曾加；

上面又强调了一下语意的重要性；下面告诉大家一个更好的曾强语意的小窍门,一定要好好看哦因为这个小窍门朋友们不一定知道的：

概念介绍：WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)无障碍网页倡议之可访问的富互联网应用，简称ARIA，他就是一种技术规范；他在HTML提供的语意的基础上，他会使用属性在填补一些语意上的空白；

现在是用法书写

1)正确运用ARIA中的地标角色：

1)role ="banner"(横幅)

2)role="navigation"(导航)

3)role="main"(主体)

4)role="complementary"(补充性内容)

5)role="contentinfo"(内容信息)

小提示：地标角色只是ARIA规范中的一种如果你干兴趣可以去官网阅读一下（地址：www.w3.org/TR/wai-aria/ ）

2)将屏幕阅读器测试列入你的日常开发中；（因为他是最能直接反映出你的网站语意写的好不好的东西）

3)正确的为标签制定id与类（语意性一定要明显）；

4)正确使用class类以及他提供的微格式；

关于class的微格式，因为有很多人都知道或是认为class的属性是只能为一组元素应用CSS样式，其实并不是这样的；其实他还可以在不引用额外的标签下来曾强语意，这就是微格式，微格式是使用约定的class名称来标示一块HTML从而来曾强与应用程序、智能搜索与搜索机器人的交互；

关于微格式的使用可以看看这个网址：http://microformats.org

 

 

那么今天就说到这里吧，不知道对读到这篇文章的您有什么帮助没有？相信通过这几篇文章感觉您对HTML5了解了很多呢？

下篇文章我会讲一些与HTML5 与文本相关的东西哦，相信一定会有你不知道的事情，也许还会根据您的评论或提问在下一个文章中解答哦；

感谢您的阅读，期待下次与您见面；

 

如果对这篇讲的技术有任何疑问，第一时间获得文章更新，每天发布一篇技术大牛的原创文章，更多技术信息分享。

欢迎关注个人微信公众平台:程序员互动联盟，扫一扫下方二维码或搜索微信号coder_online即可关注,在线帮您解决技术难点，给大牛直接出难题。