了解HTML5 语义--第一部分

  随着移动和数据驱动应用的爆发性增长,用户现在需要在任意地点实时访问所有的功能。系统的弹性和响应性变成了业务的基本需求。业务方面需要更加灵活的“反应式”系统。为了支持反应式开发,结合Actor模型和领域驱动设计能够满足现代系统弹性的需要。

  随着移动和数据驱动应用的爆发性增长,用户现在需要在任意地点实时访问所有的功能。系统的弹性和响应性变成了业务的基本需求。业务方面需要更加灵活的“反应式”系统。为了支持反应式开发,结合Actor模型和领域驱动设计能够满足现代系统弹性的需要。

  随着移动和数据驱动应用的爆发性增长,用户现在需要在任意地点实时访问所有的功能。系统的弹性和响应性变成了业务的基本需求。业务方面需要更加灵活的“反应式”系统。为了支持反应式开发,结合Actor模型和领域驱动设计能够满足现代系统弹性的需要。

  当前人们日渐疏远传统的瀑布式开发,并转型为敏捷开发方法。有观点认为,开发中已不再需要做软件项目估算。这个观点看上去合情合理,但并不正确。实践中,即便是那些已经采用敏捷方法的企业,软件估算依然十分有价值。

  近期,InfoQ与solo.io的CEO Idit Levine进行了一次座谈。Idit新创立了一种称为“Squash”的开源微服务调试器。在此次座谈中,她介绍了观察和调试分布式系统和应用中的挑战。

  亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知。

  如果你的业务与我相似,则你最近肯定已经听到大量关于HTML5的新闻。 大家都在谈论Flash killing 视频元素、带有画布的动画及定位功能(geolocation)等话题。 事实上,围绕HTML5的讨论已经扩展到包括许多根本不是HTML5 的话题。 在整个web上,人们都在讨论CSS3的富于表现的新功能,而同时将它们称作HTML5。 而在HTML5的势不可挡的营销噪音中,常常遗忘的是引入的新元素和其它语义的改变。 在本文中,我希望帮助你了解和学习如何恰当地使用这些虽然未必是令人兴奋的,但绝对是非常重要的新语义元素。 尽管这一主题可能显得枯燥乏味,但实际上通过恰当地使用这些新元素你可以将新的丰富含义添加到你的markup中。

  大多数页面均在顶部有一个页眉、在底部有页脚、也许在页面下面(或里面)或在一个边栏中有一个导航条。 但以这些术语进行思考的确带有 HTML4/XHTML 的色彩。 换句线 工作组能够与新元素本身一起,根据内容的质量为我们的页面内容标价。 你不应该根据内容在页面上的位置而是以该内容与其它页面的关系进行思考。 此外,更进一步地,什么是页面和区段等的内容角色的特定部分?

  这些元素能够相互之间嵌套。 事实上,一个页眉可能发现自己位于一个导航条中,或一个页脚可能发现自己位于一个条目中。 但在你的大脑变成一个标记曲解者(markup contortionist)之前,让我们讨论一下这些元素本身。 新元素中的4个元素被称为分节元素(sectioning elements)。 这些元素更像新的乐高(Lego)积木块,它们可以通过你当前使用的divs(并且你绝对会继续使用divs)嵌入。 它们是article、aside、nav和section。

  这些分节元素能够为你的页面创建大纲。 在HTML4/XHTML中,通过我们标记的标题级别可以隐含地创建相应的大纲。 Divs对页面的大纲无效。 相应的结果有点类似毕业或研究论文的大纲。 Wikipedia 能够为每篇文章显示一个大纲 是的,它也是基于相应的标题级别(参见图2)。 每篇文章以 H1级别开始,然后进入顶级 H2标题,其中带有嵌套的H3、H4等标题。 相应的结果是一个他们放置于用作导航的页面的隐含大纲。 合理地使用标题对使用辅助技术的开发人员来说帮助很大,因为他们能够请求你的一列标题然后跳转到页面上的逻辑位置。

  利用HTML5能够显式地创建大纲。 你可以使用分节元素(sectioning elements)而不是标题来为我们的文档创建章节。 这些元素能够正确地创建文档的目录,而不论它起始于什么标题级别。分节元素能够起始于 H1,但不论一个章节起始于什么标题级别,相应的层级均从这里递减。

  使用一个H1级别开始每个分节元素是完全可以接受的方式。 它允许提供具有逻辑的组织架构,这样能够从一个CMS中拉出代码程序块并且能够在保持其语义结构的同时将其用于网站的任何位置。 然而,目前尽管辅助技术能够补偿这一缺陷但最好针对章节的嵌套级别使用合适级别的元素。 这意味着利用分节元素创建大纲,但目前应该继续使用H1、H2和H3层级开始这些章节。 如果你内容的某个部分没有开始大纲的一个新部分,你应该针对它使用一个div。

  4个新分节元素的第一个也是最普通的元素是section。 一个section表示文档或应用程序的一个普通章节。 依据相应的HTML5 文档*:

  一个section, 在文章中,是一个具有主题分类的内容,通常拥有一个标题。

  Section的范例包括章(chapter)、位于带标记符的对话框中的各种带标记符的页面(page),或一篇论文中的带标号的节(section)。 一个Web网站的主页能够划分为引言、新闻条目和联系信息等 section。

  记住,当一个元素仅仅用于提供式样目的或用于方便提供脚本,则仍然应该使用一个div。 Section元素并不是那么通用。 它可以为你的页面定义一个部分,该部分应该为页面的大纲创建一个新节。

  如上所述,一个网站的主页为了吸引用户进入网站中内容的各个不同部分是一个能够发现多个section元素的常去公共之地。 信息页面可能也会在其中包含多个section。 因此,相应的代码能够按照下面的方式进行添加:

  关于article元素的使用,网站上存在很多争论。 起初,对某些人来说,该规范*该规范显得有些模糊和混淆。 随着以后的进一步澄清,该元素已经被定义为:

  一个article 元素表示包含于一个文档、页面、应用程序或网站中的一篇独立的作文,也就是说,它能够独立地发布或重新使用,例如通过供稿联合组织在报刊上同时发表新闻文章(in syndication)。 它可以是一个论坛帖子、一篇杂志或报纸文章、一个博客条目、一个用户提交的评论、一个互动 widget或 gadget、或任何其它独立内容条目。

  混淆部分起源于术语article本身的使用,因为通常它是你在杂志、报纸或博客中看到的一种写作形式。 但,请不要为in syndication bit而困惑。 这并不意味着article元素仅仅适用于博客帖子或实际上通过供稿联合组织在报刊上同时发表新闻文章。 它意味着这一内容文章在需要时能够独立提供,并且你可以拥有你需要了解它是什么类型文章以及它来自何处的所有信息。

  article的字典定义之一是 一个类的一个单独的物体、成员或部分;一个条目或特别的:一种食物;衣物。 因此,将你的思考方式从出版界的article用法改变为对完整物体 或条目的更为简单的理解是提供一些明确性的第一步。

  当然,现在让我们将一个博客帖子作为一个范例。 我不会试图在你的脑海中混淆我刚刚表述的观点,但有一些其它观点适用于本范例,当然article元素适用于博客帖子。 记住上述的规范提及到 用户提交的评论也是一个article。 关于以这一方式添加一个评论的合法性已经引起很多争论。 但作为一个article添加的评论必须嵌套到其原先的文章中。 它不会放置于它评论的文章的结束标记符之后。 因此,它在语义上被看作一个与放置它的原先条目相关的条目。 然而,一个评论通常是独立的。 它具有发布它的相关人员的辨别信息姓名甚至还有头像;时间/日期戳;以及所有的评论。 它是独立的并且可以通过什么人在什么时间编写它等信息对它进行识别。

  注意博客帖子 (父 article) 和评论 (子 article) 均可以通过新的time元素进行添加。 依据相应的规范:

  该元素的目的是用作一种方法通过一种机器可读的方式将现代的日期和时间进行编码,以便用户代理能够提供将生日提示信息或计划的事件添加到用户的日历中的解决方案。

  请注意术语机器可读(machine-readable)。 对于添加数据操作,它正变得越来越有用,这样机器能够对他进行解析并且能够在你自己的程序中自动使用这些数据或为各种应用创建糅合(mashup)解决方案。 这是为什么说语义是重要的一个原因。 当机器了解数据的含义并且这将包含搜索引擎该数据将变得更为丰富和可操作。

  你也许还注意到 time元素中的Boolean属性pubdate。 依据相应的规范*,该属性 表示元素给出的日期和时间是最亲近的祖辈article元素的发布日期和时间,或者,如果元素没有祖辈article元素,则是作为一个整体的文档的发布日期和时间。

  换句话说,该属性为解析你的数据的机器指明该time元素是评论或文章的实际发布日期。 如果你在你的页面的全局页脚的time元素中使用pubdate,这将表明它是该 web 页面自己的发布日期和时间。

  nav 元素表示链接到其它页面或页面中其它部分的一个页面的一个区段:一个具有导航链接的区段。 . . . 该元素主要用于由主导航程序块组成的区段。

  在现代web标记语言中,为到网站的主要区域提供一组链接(也许通过下拉菜单选择)、在网站的一个区段内提供一组链接、以及在页面分成多页的情形下提供通过一些分页技术帮助你导航的一组链接是非常通行的作法。 你也可以拥有到你推荐的其它网站的一组链接(blogroll)、针对特定主题的一组资源链接以及在你的页面的页脚重复顶层的链接(这样用户能够避免滚动返回到页面的顶部以选择他们的下一个目的地)。

  第一个需要考虑的集合是主导航组。 它们均是用户需要在整个网站或网站的一个区段中进行导航的链接组。 它们是在你希望导航到别的页面时你希望用户使用辅助技术能够直接跳过(以便先看到相关的内容)或直接跳到的组。

  在决定将它们标记为主导航之前,必须小心地考虑第二个组。 任何离开你的网站的链接组应该不能标记为nav它取决于这些链接的目的。 如果它是一组用于为你的公司注册事件的链接,并且它们均链接到Eventbrite,那么我将它们认作与你的网站相关的导航。 但你希望建议作为他们也喜欢的一些事情(如blogroll)的许多链接可能不是如此。没有必要将位于页脚的你的网站导航的一些副本标记为nav元素。 但这也不是错误的操作。

  你应该知道nav元素能够包含各种式样的导航而不仅仅包含无序的列表。 尽管无序的列表或P元素一定是最常见的内容,但你也可以将你的导航编写为一段诗词或散文。 只要元素的目的是用于用户进行导航,这是完全能够接受的。

  最终,我们将讨论最后一个分界元素aside。 很明显,这一元素的名称源自人们称呼为sidebar、aside或 sidepanel的页面的区段。 这些单词的 side 部分实际上表示它在页面中的视觉上的位置。 但aside并不意味着反映这一意图。 下面是相关规范*的描述:

  aside元素表示由与围绕该aside元素的内容几乎没有相关性(tangentially related)的内容组成的页面的一个区段,并且可以认为它与该内容是独立的。 通常利用打印的印刷体将这些区段表示为sidebar。

  该元素可以用于像提升引语(pull quote)或 sidebar等印刷效果、广告、nav元素组和被认为与页面的主要内容分离的其它内容。

  什么是几乎没有相关性(Tangentially related)? 其含义是有一点相关性。 在决定内容是否应该标记为aside时,首先问问你自己下面几个问题:能够认为它与该内容是分离的吗? 你可以删除它而不会影响文档或章节的含义吗?

  尽管你一定能够使用它保存大量导航和广告链接无论它们是不是位于页面的侧面但你也能够在与它相关的章节或文章中直接使用它。 例如,一段杂志式样的提升引语(pull quote) 能够按照下列方式进行标记:

  可以删除提升引语(pull quote )而不会破坏文章的内容,因为它仅仅利用特殊的印刷体重复来自该文章的引语。 你不应该在应该保留在该文章中的插入句中使用aside元素。 如果在删除时影响文章(或章节)的内容,它可能不是一个aside元素。

  记住,如果遇! 它们被创建的目的是为我们提供比使用一个div元素更易于描述我们内容的新元素。 尽量保持合理的思维方式并且关注相应的目的。 在标记你的网站时,不要看链接将去向where不要看链接将去向哪里到所有这些新的分节元素别紧张,而是看它们是什么以及它们的相互关系如何。 然后,任它而去

  还有一些与我刚刚讨论的元素紧密相关的元素,但它们不会创建一节新的大纲。 其中最重要的两个是header和footer。

  尽管header元素在页面的顶部能够找到自己,但它实际上是在页面中标识内容重要性的一个元素。 (不能将header与你的文档的head或 heading 元素h1,h2,h3,等等相混淆)相关规范的描述如下:

  header元素通常会包含章节的标题( h1h6 元素或 hgroup 元素),但这不是必需的。 header 元素还能够用于包含章节的目录、搜寻表单或任何相关的徽标。

  在一个页面中可以允许使用一个以上的header 元素。 通常你的页面需要一个全局header元素,但你也可能在分节元素中需要使用一个header元素。 请记住,尽管分节元素总包含一个标题元素,但它可能仅仅是h1h6的其中之一 ,很可能包含于一个hgroup元素中的合适位置。

  有一个名称为hgroup的新元素已经在规范中多次进出。 目前,它结束的位置仍然有待明确,但hgroup元素的创建目的是在存在两个前后紧跟的标题的情形下成为一个 wrapper (或shield) ,并且只有第一个标题能够包含于文档显式大纲中。 考虑一个网站名称和标签线:

  与header相同,你可以在一个页面中拥有一个以上footer。 你可以拥有一个全局footer,但分节元素也能够拥有多个footer。 相关的规范*给出如下的描述:

  footer元素表示其最亲近的祖辈分节内容或分节root元素的一个页脚。 Footer通常包含关于其区段(section)的信息,例如谁是作者、到相关文档的链接、版权数据、等等。

  当你对一个博客帖子进行标记时,你需要在该帖子的底部和顶部添加谁是作者和编写日期等信息。 如果你希望将这些信息放置于页脚,这样做显然是合理的,则你可以使用一个footer元素。 你将不会把信息放置于顶部的一个header元素中以及底部的一个页脚中。 它是相同的信息,因此如果它是复制的信息,则应该包含于相同的元素中。

  尽管address不是新的元素,但我仍然希望提及它,因为它很可能更多地与新的语义元素一起使用。 请不要感到困惑。address元素不涉及你的家庭、办公室或商务邮政地址。 它实际上具有如下的描述*:

  address 元素表示其最近的 article 或body元素祖辈的联系信息。 如果它是body元素,则该联系信息能够应用于整个文档。

  这说明它通常是作者的电子邮件地址或到一个web页面的链接。 通常它放置于页脚中。 如果它放置于全局页脚,则它与整个页面相关。 如果它放置于一篇文章的页脚,则它只与相应的文章相关。 只有在邮政地址实际上是相应文章的联系信息的情形下,才使用邮政地址。

   该元素能够随意添加图片说明,它是独立的并且通常能够从文档的主流中被引用为一个单一单元。

  因此该元素能够用于注解插图(illustration)、示意图(diagram)、图片(photo)、代码列表(code listing)、等等,它们能够从文档的主内容进行引用,但在不影响文档流的情形下,它们能够从主内容中移植到页面的旁边、专用的页面或附录等位置。

  人们所犯的错误是相信他们的图像应该全部包含于 figure 元素中。 实际上,figure 元素应该被想象为一本书中的插图。 它可能是或不是一张照片。 并且它可能有或没有图片说明这取决于它在内容流中的位置。 它可以是用于一个代码范例或web中教程的插图的完美合理的使用方法。

  如果figure 元素包含图片说明文字(figcaption元素),则它将包含于相应的父figure 元素(参见图3)中。

  在 CSS的结尾部分(无论你是否将其作为附件或将其放置于文档的标题中),你将看到该评注和选择器( selector):

  将display属性设置为block使得较老旧的浏览器能够正确地渲染元素。 然而,对于较老旧版本的Internet Explorer (IE)(早于IE9的版本),我们需要使用辅助轮(training wheels)。 IE无法识别这些元素,除非利用JavaScript将它们注入到 DOM 中。 它将能够正确地渲染它能够识别的任何条目,但不会对它不能够识别的条目进行渲染。 这将会导致令人困惑的混乱局面。 注意下列在页面的head元素的结尾部分的评论:

  该链接位于一个IE条件评论中(只有 IE 才能读取的评论),它适用于任何早于IE9的版本。 它可以链接到能够启动IE的小型 JavaScript 文件。

  让我们看一下该页面的构成方法以及新元素自身。 如果你在制作过程中使用HTML5 模板,你必须确保将这些元素放置于合适的位置以便与你的网站的语义结构匹配。 如果你的aside元素不能映射到sidebar元素和其它大结构差异,则你最好在 Dreamweaver 中创建一个新的、空白的 HTML5 页面,并且使用功能强大的代码提示(code hinting)和代码完成(code completion)来创建你自定义页面结构。

  记住,如果你的脑袋充斥着所有这些新元素和语义尽量保持简单化。 内容应该只基于它的类型而不是它的位置进行标记。 利用内容的片段来思考一下你的目的以及利用什么元素最能够表现它。 此外,当它是最恰当的元素时,使用一个div元素的确很合适。

  在了解HTML5 语义--第二部分*中,我们将学习HTML4(或者XHTML在这篇文中交替使用这两个术语)和HTML5的文档结构的差别,包括新加入的全局参数。

  我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。

相关阅读