HTML5标签的语义认知和理解(2)-阿里云开发者社区

开发者社区> 开发与运维> 正文

HTML5标签的语义认知和理解(2)

简介:

昨天说到了nav元素,nav元素的确是描述导航,但这个导航应该是对本网站而言的,不应该将nav用到对于外部的友情链接啊,收藏夹或什么的,总之,对元素来说,要实施他正确的语义才是我们要讨论和研究的事情。

我们可以用article来描述页面想表达的实际内容,也就是说,这个内容页的核心信息。你可以这样考虑,这个页面中绝对不能去掉的内容有哪些(比如屏幕大小不够,带宽不够,存储空间不够,在各种恶劣的环境下),这些绝对不能去掉的,代表本业务核心价值的信息,就可以用article来描述。一般来讲,内容总应该有一个标题,所以article往往会包含一个h标记,如果有多个h标记,或页眉描述,请参考前面的文章。

如果article的内容比较多,需要有章节之分(给用于小屏幕的移动浏览器,或阅读器提示可以分页什么的)我们可以用section来描述。sectionp不同,p描述的是一个段落,以我的理解就是一个自然段,前面空两格,一个自然回车,组成了一个p,多个p组成了一个section,而且有可能多个p还可以外带一个h什么的。当然是文档,就会有可能有headerfooter的存在了。比如:


  1. <article> 
  2.     <hgroup> 
  3.         <h1> 
  4.             主标题  
  5.         </h1> 
  6.         <h2> 
  7.             副标题  
  8.         </h2> 
  9.     </hgroup> 
  10.     <section> 
  11.         <h1> 
  12.             第一章</h1> 
  13.         <p> 
  14.             自然段</p> 
  15.         <p> 
  16.             自然段</p> 
  17.         <p> 
  18.             自然段</p> 
  19.         <p> 
  20.             自然段</p> 
  21.     </section> 
  22.     <section> 
  23.         <h1> 
  24.             第二章</h1> 
  25.         <p> 
  26.             自然段</p> 
  27.         <p> 
  28.             自然段</p> 
  29.         <p> 
  30.             自然段</p> 
  31.         <p> 
  32.             自然段</p> 
  33.     </section> 
  34.     <footer> 
  35.         <time>发表日期</time> 
  36.     </footer> 
  37. </article> 

上面这些元素中,用的比较灵活的是sectionsection描述的是一段独立的文本,其也可以包含article元素,马上我们就可以看到;section也可以描述一些简单的独立文本信息,这个时候它类似span元素。

 

在页面中那些附属的信息,比如广告,看了这篇文章的人也看了以下文章,相关产品啥的,这些有关联又不是正文的内容,我们用aside来描述。aside中的内容可以用olul列出,也可以用articlesection较为详细的描述。


  1. <aside> 
  2.     <article> 
  3.         <header> 
  4.             <h1> 
  5.                 向你推荐</h1> 
  6.             <h2> 
  7.                 喜欢这篇文章的人还喜欢……</h2> 
  8.         </header> 
  9.         <ol> 
  10.             <li> 
  11.                 <section> 
  12.                     <article> 
  13.                         <h1> 
  14.                             文章标题</h1> 
  15.                         <section> 
  16.                             <p> 
  17.                                 摘要</p> 
  18.                         </section> 
  19.                     </article> 
  20.                 </section> 
  21.             </li> 
  22.             <li> 
  23.                 <section> 
  24.                     <article> 
  25.                         <h1> 
  26.                             文章标题</h1> 
  27.                         <section> 
  28.                             <p> 
  29.                                 摘要</p> 
  30.                         </section> 
  31.                     </article> 
  32.                 </section> 
  33.             </li> 
  34.         </ol> 
  35.         <footer> 
  36.             <article> 
  37.                 <h1> 
  38.                     其他更多推荐</h1> 
  39.                 <ol> 
  40.                     <li>推荐1</li> 
  41.                     <li>推荐2</li> 
  42.                     <li>推荐3</li> 
  43.                 </ol> 
  44.             </article> 
  45.         </footer> 
  46.     </article> 
  47. </aside> 

上面的代码描述了推荐两个有摘要的文章,和三个简单列表,当然列表中可以有链接。

 

现在所有的页面都会有图片,没有图片纯文字的页面设计非常少见了。在html4中我的理解是,如果图片代表了具体含义(该图片的存在与否会对页面的数据造成信息缺失)比如:广告图片(没有的话,广告商会很生气),公司logo,产品照片或用于对信息描述的照片,这些元素需要用img来描述,如果你认可这点,就应该明白为什么img强制需要alt属性了,在意外情况下,用户也应该从alt信息中获取你本来需要表达的数据信息。如果图片是提示性含义,比如箭头,hot,装饰性的,那用div的背景来处理,如果浏览器在特定设备上忽略这些元素,对页面本身的信息表达也没有影响。

原先的img虽然有alt属性,不过alt的属性不是显性的表现出来的,但一般出版网的规范是图片下面有一个关于图片的说明,html5现在是彻底的要要page真正的变成document,所以给出了一个新的描述标签figure。这是一个很好的标签,可以对文档内的图片给出独立的数据区域和和说明。


  1. <figure> 
  2.     <img alt="" /> 
  3.     <img alt="" /> 
  4.     <img alt="" /> 
  5.     <img alt="" /> 
  6.     <figcaption>这四个产品是我们最新的……</figcaption> 
  7. </figure> 

要注意的是,figure希望内容是可以被描述或应该被描述的,而且描述的信息应该是和文档主题内容有关的,所以公司的logo显然不适合使用figure描述。如果你的文章中的配图和正文的主要内容也没有很多关联,比如弄了一个风景或人物照片仅仅是意境方面的,而不是描述文章中人物或地点的,那也不需要用figure元素,直接考虑imgdiv好了。


另外一个问题就是,在VS2008的HTML5验证中figcaption元素不支持。

还有就是figure不仅仅是描述图片,主要是描述信息流,所以figure应该可以包含描述图片,报表什么的。


这些HTML5提供的新的结构性的语义标签,基本上不是用来定义新的语义,都是用来定义新的语义区域,对阅读者来说没有什么大的意义,应该还是W3C的最初愿望,element定义是为了设备准备的,应该能让浏览器可以正确的了解你的信息,以便在特定的场合进行优化处理。



本文转自shyleoking 51CTO博客,原文链接:http://blog.51cto.com/shyleoking/803101

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章