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

标签: html5 标签 语义 | 发表时间:2012-02-19 11:55 | 作者:shyleoking
出处:http://blog.csdn.net

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

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

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

    <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>

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

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

    <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元素,直接考虑 imgdiv好了。


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

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


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

作者:shyleoking 发表于2012-2-19 11:55:56 原文链接
阅读:12 评论:0 查看评论

相关 [html5 标签 语义] 推荐:

HTML5废弃的特性及部分标签语义

- mingelz - W3C标准WEB前端DHTML精英俱乐部
如果页面中存在以下情况,在做规范检测时将遇到警告信息. border属性不应该继续出现在img元素中;. border如果出现在img元素中,其值必须为0;. language属性不应该继续出现在script元素中;. language如果出现在script元素中,其值必须为"JavaScript";.

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

- - CSDN博客推荐文章
昨天说到了 nav元素,nav元素的确是描述导航,但这个导航应该是对本网站而言的,不应该将 nav用到对于外部的友情链接啊,收藏夹或什么的,总之,对元素来说,要实施他正确的语义才是我们要讨论和研究的事情. 我们可以用 article来描述页面想表达的实际内容,也就是说,这个内容页的核心信息. 你可以这样考虑,这个页面中绝对不能去掉的内容有哪些(比如屏幕大小不够,带宽不够,存储空间不够,在各种恶劣的环境下),这些绝对不能去掉的,代表本业务核心价值的信息,就可以用 article来描述.

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

- - CSDN博客推荐文章
随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),HTML5的预热为前端技术带来了更多机会和热点. 我用的是VS2008开发工具,作为懒人(对于开发工具有强烈的依赖性,懒得记API单词,懒得多打字,懒得查手册)的代表,Intellisense 对我一直是非常重要的事情,我喜欢微软的开发平台,也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发,对于习惯用记事本的牛人,我一直内心仰慕但坚决不从.

HTML5文本元素的语义解释

- - 脚本爱好者
HTML 5: 文本语义元素. 文本语义元素 - a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr.

说说HTML5中label标签的可访问性问题

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1809. 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框. 点击区域就鼻屎那么大的地方,经常会点不到位置. 因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

- - HTML5研究小组
autoplay:自动播放. controls:浏览器自带的控制条.

【转载】HTML5的视频标签的一些须知

- - HTML5研究小组
HTML5在互联网的革新高潮的不断冲刷着新的记录. 其中,HTML5最重要的平衡就是在视频方面的支持达到了最佳,也就是说用户不需要安装额外的插件(在PC上或者其它的设备上)来实现视频的播放. 随着HTML5标注制定的不断完善,许多的哦开发人员和设计人员开始关注与实战新的编码标准,原因可能是新的标准缺乏实战和相应的实例示范.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.