求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
     
   
分享到
HTML5标签的语义认知和理解
 

作者:shyleoking,发布于2012-3-12

 

随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),HTML5的预热为前端技术带来了更多机会和热点。

我用的是VS2008开发工具,作为懒人(对于开发工具有强烈的依赖性,懒得记API单词,懒得多打字,懒得查手册)的代表,Intellisense 对我一直是非常重要的事情,我喜欢微软的开发平台,也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发,对于习惯用记事本的牛人,我一直内心仰慕但坚决不从。VS2008对HTML5没有良好的支持的时候,我一直是光看不练,直到我看到了“HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer”之后,我的VS2008开始部分的支持HTML5了,至少element和CSS开发有了为懒人服务的Intellisense 了,亲,太高兴了,可惜,对DOM 的javasScript API还没有支持(哦,关于这个话应该怎么表达,和很多朋友有争论,你明白我的意思就可以,这个插件还不支持HTML5比如类似canvas.getContext这样的函数)。

下载了这个插件之后,我们可以在工具--选项中看到新的HTML5的验证架构,在页面开发环境中也可以算作目标验证架构师HTML5。同时开始支持对html标签和css的部分Intellisense 支持。

最早,也是最令人印象深刻,特别是对我这样的懒人而言,记得最深的就是初始化的html元素被简单到非常极致的情况了

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

</body>

</html>

我第一次听说不要写DOCTYPE中的内容后,是非常的激动啊,终于不要那些乱七八糟的东西了,不过转念一想,我好像也从来没有写过,都IDE帮我搞定的嘛,惭愧啊惭愧。

然后我们说HTML5的新元素,在了解新元素前,我想先说明下个人观点,对于标签的运用无论如何都是见仁见智的东西,标准是一个指导和参考意见,不同的人有不同的理解的哈利波特(莎士比亚我不是说你),我的理解从最初的HTML4的语义标签开始:

1.标签的分类方式很多,HTML4中我简单的将标签分为默认block和默认inline这种分法,和有语义以及无语义(样式标签不谈了)的分法。
2. 除了div之外i,其他标签都是有语义的(声明下,类似font等样式标签我早就不算HTML4的使用中了),div的含义只是在逻辑上将一些标签视同为一组,可以共同处理

如果你同意我这样说,那么你也会同意我说,html5中很多新的基于结构的元素就是来替代div的,或者说可以替代一部分div的作用。这些元素用来说明元素区域和分组的用途。

原因是,未来的网页不仅仅是给PC上的浏览器看的,而且更多的要提供给移动设备,专有设备,小型设备上的浏览器来方便,而这些浏览器需要在不同的环境中重新处理页面内容,给予用户更好的阅读体验,所有页面的内容必须对浏览器提供有参考价值的指导,便于浏览器提供剪裁、突出和特定操作的处理。

所有的文档都应该有一个header元素,特别是页面本身就是一个document对象,所以如果不是有特别的理由,你的页面的最上面的部分应该有一个header元素,其他的文章部分也可能会有header,要小心的是,避免header被滥用,header表示的是一组介绍性或者导航性质的辅助文字,记住导航和介绍性这两个关键词。

所以,页面的最上面一个header应该包含一个导航的标签:nav。虽然好像没有必须的规定,但是我认为再nav中只应该包含ol或li元素,毕竟nav的作用是导航,而导航应该是一组路径的集合。header中还可以包含其他用于介绍的信息,比如首页的公司图标,公司名称,或产品主题页的产品名称神马的。

<body>

  <header>

    <img alt="logo" />

    <h1>

      &*****公司</h1>

    <nav>

      <ol>v

        <li>导航1</li>

        <li>导航2</li>

        <li>导航3</li>

        <li>导航4</li>

        <li>导航5</li>

       </ol>

    </nav>

  </header>

</body>

当然也可以这么下

<body>

  <header>

     <h1>

      <img alt="logo" />

    </h1>

    <nav>

      <ol>

        <li>导航1</li>

        <li>导航2</li>

        <li>导航3</li>

        <li>导航4</li>

        <li>导航5</li>

      </ol>

    </nav>

  </header>

</body>

随便说一下,HTML5中继续保留了ol和ul,我个人的建议是吧那些解释差异很复杂的同类元素去掉,比如保留abbr放弃acronym,可惜ol和ul都保留下来了,不过我建议用ol。

对于文档型页面来说,比如blog的主页,有主标题和副主标题,那可以在header中用hgroup元素来处理

<header>

   <h1>

     像蚂蚁一样工作,像蝴蝶一样生活

  </h1>

  <h2>

     记录成长的点滴

  </h2>

  <p>

     类似后面文章的前言部分啦</p>

</header>

文档本身可以用article元素来标记,article可以描述整篇文章和其包含的所有信息。往往article中也包含了header(我说的是往往)或者hgroup(这个倒真的不一定需要用)。

对于article是不是需要header,有这么几个方式可以判断,是不是有H和一些描述共同组合页眉信息?如果只有H,没有其他描述,那就不必用header了

<article>

  <h1>

    标题

  </h1>

</article>

如果,有主副标题,但没有说明性描述,那直接hgroup也可以

<article>

  <hgroup>

    <h1>

      主标题

    </h1>

    <h2>

      副标题

    </h2>

  </hgroup>

</article>

现在应该对header更有感觉了,是为了向浏览器描述出,哪些是文档的页眉区。

今天就道这里,累死了,明天继续扯HTML元素的理解和认知,对呀HTML5的理解我遵守的原则是:自圆其说,不勉强。一个元素我们要弄明白在哪里用是最合适的,要用的有道理了,哎睡觉了。

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

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

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

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

<article>

  <hgroup>

    <h1>

      主标题

    </h1>

    <h2>

      副标题

    </h2>

  </hgroup>

  <section>

    <h1>

      第一章</h1>

    <p>

      自然段</p>

    <p>

      自然段</p>

    <p>

      自然段</p>

    <p>

      自然段</p>

  </section>

  <section>

    <h1>

      第二章</h1>

    <p>

      自然段</p>

    <p>

      自然段</p>

    <p>

      自然段</p>

    <p>

      自然段</p>

  </section>

  <footer>

    <time>发表日期</time>

  </footer>

</article>

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

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

<aside>

  <article>

     <header>

      <h1>

        向你推荐</h1>

      <h2>

        喜欢这篇文章的人还喜欢……</h2>

    </header>

    <ol>

      <li>

        <section>

          <article>

            <h1>

              文章标题</h1>

            <section>

              <p>

                摘要</p>

            </section>

          </article>

        </section>

      </li>

      <li>

         <section>

          <article>

            <h1>

              文章标题</h1>

            <section>

              <p>

                摘要</p>

            </section>

          </article>

        </section>

      </li>

    </ol>

    <footer>

      <article>

        <h1>

          其他更多推荐</h1>

        <ol>

          <li>推荐1</li>

          <li>推荐2</li>

          <li>推荐3</li>

        </ol>

      </article>

    </footer>

  </article>

</aside>

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

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

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

<figure>

  <img alt="" />

  <img alt="" />

  <img alt="" />

  <img alt="" />

    <figcaption>这四个产品是我们最新的……</figcaption>

</figure>

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

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

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

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

相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 
分享到
 
 
     


十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...