深刻理解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便可关注,在线帮您解决技术难点，给大牛直接出难题。