如果你的业务与我相似,则你最近肯定已经听到大量关于 HTML5 的新闻。 大家都在谈论"Flash killing" 视频元素、带有画布的动画及定位功能(geolocation)等话题。 事实上,围绕 HTML5 的讨论已经扩展到包括许多根本不是 HTML5 的话题。 在整个 web 上,人们都在讨论 CSS3 的富于表现的新功能,而同时将它们称作 HTML5。 而在 HTML5 的势不可挡的营销噪音中,常常遗忘的是引入的新元素和其它语义的改变。 在本文中,我希望帮助你了解和学习如何恰当地使用这些虽然未必是令人兴奋的,但绝对是非常重要的新语义元素。 尽管这一主题可能显得枯燥乏味,但实际上通过恰当地使用这些新元素你可以将新的丰富含义添加到你的 markup 中。
目录
要求
预备知识
熟悉如何利用 HTML 和 CSS 创建 web 页面。
需要下列产品:
- Dreamweaver (下载试用)
分节思考
我们究竟为什么引入新元素? 我们需要它们吗? 它们来自何处?
考虑一下你的代码。 你曾经使用过
事实上,上述列出的类和 ID 是三个最著名的元素—header,nav,footer。 并且它们对我们大部分人来说非常重要。 它变得更加难以处理的地方是添加 article,section,并且 aside 究竟是什么? 更为重要的是,它们应该位于页面的什么位置? 我将不会在本文中对它们全部进行讨论,但会讨论在 HTML5 中引入的一些新元素(请记住仍然有几个元素在弹入和弹出下表):
article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video
wbr
当你收到一个网站的内容时,你首先遇到的挑战之一是确定哪些新元素适于使用以及它们应该放置于什么位置(参见图 1)。
图 1. 首先你需要确定你希望使用的元素
大多数页面均在顶部有一个页眉、在底部有页脚、也许在页面下面(或里面)或在一个边栏中有一个导航条。 但以这些术语进行思考的确带有 HTML4/XHTML 的色彩。 换句话说,HTML5 工作组能够与新元素本身一起,根据内容的质量为我们的页面内容标价。 你不应该根据内容在页面上的"位置"而是以该内容与其它页面的关系进行思考。 此外,更进一步地,什么是页面和区段等的内容角色的特定部分?
这些元素能够相互之间嵌套。 事实上,一个页眉可能发现自己位于一个导航条中,或一个页脚可能发现自己位于一个条目中。 但在你的大脑变成一个标记曲解者(markup contortionist)之前,让我们讨论一下这些元素本身。 新元素中的 4 个元素被称为分节元素(sectioning elements)。 这些元素更像新的乐高(Lego)积木块,它们可以通过你当前使用的 divs(并且你绝对会继续使用 divs)嵌入。 它们是 article、aside、nav 和 section。
大纲
这些分节元素能够为你的页面创建大纲。 在 HTML4/XHTML 中,通过我们标记的标题级别可以隐含地创建相应的大纲。 Divs 对页面的大纲无效。 相应的结果有点类似毕业或研究论文的大纲。 Wikipedia 能够为每篇文章显示一个大纲 — 是的,它也是基于相应的标题级别(参见图 2)。 每篇文章以 H1 级别开始,然后进入顶级 H2 标题,其中带有嵌套的 H3、H4 等标题。 相应的结果是一个他们放置于用作导航的页面的隐含大纲。 合理地使用标题对使用辅助技术的开发人员来说帮助很大,因为他们能够请求你的一列标题然后跳转到页面上的逻辑位置。
图 2. Wikipedia 能够为每篇文章显示一个大纲以便于导航
利用 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> <hgroup> <h1>British Virgin Islands</h1> <h2>A bareboat charter wonderland!</h2> </hgroup> <p>Want to go sailing on your vacation? Among these Caribbean jewels, there are options for both beginners and experienced charterers…</p> <section> <h1>Virgin Gorda</h1> <p>The Baths at Virgin Gorda are truly one of the most picturesque places in the Caribbean.<p> </section> <section> <h1>Norman Island</h1> <p>Whether it's snorkeling at the Indians or drinks and night life at Willy T's floating restaurant, the Bight on Norman Island gives you a full range of choices…</p> </section> <section> <h1>Jost Van Dyke</h1> <p>This small island contains several great evening activities including the Soggy Dollar Bar and Sidney's Restaurant…</p> </section> </article>
关于 article 元素的使用,网站上存在很多争论。 起初,对某些人来说,该 规范 * 该规范显得有些模糊和混淆。 随着以后的进一步澄清,该元素已经被定义为:
“一个 article 元素表示包含于一个文档、页面、应用程序或网站中的一篇独立的作文,也就是说,它能够独立地发布或重新使用,例如通过供稿联合组织在报刊上同时发表新闻文章(in syndication)。 它可以是一个论坛帖子、一篇杂志或报纸文章、一个博客条目、一个用户提交的评论、一个互动 widget 或 gadget、或任何其它独立内容条目。”
混淆部分起源于术语article本身的使用,因为通常它是你在杂志、报纸或博客中看到的一种写作形式。 但,请不要为"in syndication" bit 而困惑。 这并不意味着 article 元素仅仅适用于博客帖子或实际上通过供稿联合组织在报刊上同时发表新闻文章。 它意味着这一内容文章在需要时能够独立提供,并且你可以拥有你需要了解它是什么类型文章以及它来自何处的所有信息。
article的字典定义之一是 “一个类的一个单独的物体、成员或部分;一个条目或特别的:一种食物;衣物。” 因此,将你的思考方式从出版界的 article 用法改变为对"完整物体" 或条目的更为简单的理解是提供一些明确性的第一步。
当然,现在让我们将一个博客帖子作为一个范例。 我不会试图在你的脑海中混淆我刚刚表述的观点,但有一些其它观点适用于本范例,当然—article 元素适用于博客帖子。 记住上述的规范提及到 "用户提交的评论"也是一个 article。 关于以这一方式添加一个评论的合法性已经引起很多争论。 但作为一个 article 添加的评论必须嵌套到其原先的文章中。 它不会放置于它评论的文章的结束标记符之后。 因此,它在语义上被看作一个与放置它的原先条目相关的条目。 然而,一个评论通常是独立的。 它具有发布它的相关人员的辨别信息—姓名甚至还有头像;时间 / 日期戳;以及所有的评论。 它是独立的并且可以通过什么人在什么时间编写它等信息对它进行识别。
<article> <header> <h1>Anchoring isn't for beginners</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: Peg Leg Patooty</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!</p> </article> <article> <footer> <p>Posted by: Ariel</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Thank you for thinking of what's under the sea. Even Ursula would be thrilled.</p> </article> </section> </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 元素一定是最常见的内容,但你也可以将你的导航编写为一段诗词或散文。 只要元素的目的是用于用户进行导航,这是完全能够接受的。
这是来自 Ian Hickson* (WHATWG 的主席)自己的引言:“不要使用
活动推荐:
2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。
更多内容推荐
如何利用 Vuetify 快速构建具有吸引力的交互式前端?
在本文当中,我们将探讨如何利用 Vuetify 快速构建具有吸引力的交互式前端。
Bruck:一个 Web 界面布局原型设计框架
Bruck是一个面向网页设计师的新型lo-fi原型系统
08|数据获取:如何使用 Scrapy 框架爬取新闻数据?
这节课,我们就继续在这个工程的基础上爬取新浪新闻中的数据,并对爬取到的数据进行解析。
2023-04-26
谓语动词永远是英语句子的核心
了解英语句法结构的框架和分类是很容易的,难的是把这些理论知识应用到千变万化的英语句子当中。
2020-06-05
四个 Webix 实例:生成多种类型的 JavaScript 列表
本文通过一些编程实例,展示了如何使用Webix UI库创建以列表形式展示数据的Web组件,其中包括了基本的列表,乃至高级的交互列表。本文介绍了Webix列表所使用的核心理念,给出了Webix列表创建和用户化的具体实现。
解决实际问题的 24 个 ES6 代码段
这篇文章基于实际使用场景总结了24个ES6代码段,可用来解决项目中可能遇到的一系列问题。
出色的 CSS 图像悬停效果汇总
盘点那些出色的CSS图像悬停效果工具。
如何给网站添加暗黑模式
本文介绍如何给网站添加暗黑模式。
静态实践:如何做图书的视觉笔记?
视觉笔记最终可以用在方方面面,比如图书的记录和分享,就是一个常用场景。
2020-05-18
被称为“三大框架”替代方案,Svelte 如何简化 Web 开发工作(上)
Svelte不仅可以构建完整的Web应用程序,还可以创建自定义元素,并在其他框架实现的已有Web应用程序中使用。
Web 安全前端基础:CSS、JavaScript
2020-07-01
为什么 Hugo 的文档如此糟糕?
一个项目,离不开好的文档!
Angular 应用”老手“也未必掌握的十大实用特性
全篇看下来,有没有丧失信心、觉得自己老了?
基于 Web 组件,手把手教你搭建黑暗主题
2019年,黑暗主题非常受欢迎,无论是Android,还是iOS,甚至诸多App,纷纷推出黑暗主题。
拓展 1|纯文本编辑:使用 Vim 书写中英文文档
今天是拓展篇的第 1 讲,我们深入讨论一下,如何使用 Vim 来进行纯文本编辑,特别是英文的文本编辑。
2020-08-19
为什么 2019 年了我还在用 jQuery
很多人提倡“只使用纯JavaScript,根本不需要jQuery”。好吧,很多东西确实是我不需要的,尽管它们可能都很好。我可能也不需要jQuery,但它确实也很好。
6 个常见的可访问性问题及解决方案
“Web 的力量来自于它的普适性。关键在于所有人,包括残障人士,都能使用 Web。”
做了七年前端开发,我最近才意识到可访问性的必要......
作为一名7年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
微前端究竟好在哪?
微前端架构是一种设计方法,其中,前端应用被分解为多个松散而协同工作的半独立“微应用”。
重新认识视觉(下):为何橱窗越空价格越贵?
今天我们重点谈了排版设计中的人因学。
2021-03-03
推荐阅读
电子书
大厂实战PPT下载
换一换 邓艳琴(Clara) | 极客邦科技 会议主编
胡奕涵 | 湖南快乐阳光 芒果 TV 创新产品总监
王海华 | 货拉拉 大数据基础架构负责人
评论