html5常见语义化新元素_更多HTML5语义：内容类型和新元素

html5常见语义化新元素

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Our sample site is coming along nicely. We’ve given it some basic structure, along the way learning more about marking up content using HTML5’s new elements.

我们的示例站点进展顺利。 我们已经为它提供了一些基本的结构，同时还学习了更多有关使用HTML5的新元素标记内容的信息。

In this chapter, we’ll discuss even more new elements, along with some changes and improvements to familiar elements. We’ll also add some headings and basic text to our project, and we’ll discuss the potential impact of HTML5 on accessibility.

在本章中，我们将讨论更多的新元素，并对熟悉的元素进行一些更改和改进。 我们还将在项目中添加一些标题和基本文本，并讨论HTML5对可访问性的潜在影响。

Before we dive into that, though, let’s take a step back and examine a few new—and a little tricky—concepts that HTML5 brings to the table.

不过，在深入探讨之前，让我们退后一步，研究一下HTML5带来的一些新概念(有些棘手的概念)。

内容类型的新视角 (A New Perspective on Content Types)

For layout and styling purposes, developers have become accustomed to thinking of elements in an HTML page as belonging to one of two categories: block and inline. Although elements are still rendered as either block or inline by browsers, the HTML5 spec takes the categorization of content a step further. The specification now defines a set of more granular content models. These are broad definitions about the kind of content that should be found inside a given element. Most of the time they’ll have little impact on the way you write your markup, but it’s worth having a passing familiarity with them, so let’s have a quick look:

出于布局和样式目的，开发人员已经习惯于将HTML页面中的元素视为属于以下两种类别之一：块和内联。 尽管浏览器仍将元素呈现为块或内联，但HTML5规范使内容的分类更进一步。 现在，该规范定义了一组更详细的内容模型。 这些是关于应在给定元素内找到的内容种类的广义定义。 在大多数情况下，它们对标记的编写方式几乎没有影响，但是值得对它们有所了解，因此让我们快速浏览一下：

• Metadata content: This category is what it sounds like—data that’s not present on the page itself, but affects the page’s presentation or includes other information about the page. This includes elements such as title, link, meta, and style.

  元数据内容 ：此类别听起来很像-数据本身不存在于页面本身，但会影响页面的显示或包含有关页面的其他信息。 这包括title ， link ， meta和style等元素。

• Flow content: This includes just about every element that’s used in the body of an HTML document, including elements such as header, footer, and even p. The only elements excluded are those that have no effect on the document’s flow: script, link, and meta elements in the page’s head, for example.

  流内容 ：几乎包括HTML文档正文中使用的每个元素，包括诸如header ， footer甚至p元素。 唯一排除的元素是那些对文档流没有影响的元素：例如，页面head script ， link和meta元素。

• Sectioning content: This is the most interesting—and for our purposes, most relevant—type of content in HTML5. In the last chapter, we often found ourselves using the generic term “section” to refer to a block of content that could contain a heading, footer, or aside. In fact, what we were actually referring to was sectioning content. In HTML5, this includes article, aside, nav, and section. Shortly, we’ll talk in more detail about sectioning content and how it can affect the way you write your markup.

  内容分区 ：这是HTML5中最有趣的(对于我们而言，也是最相关的)内容类型。 在上一章中，我们经常发现自己使用通用术语“节”来指代可能包含页眉，页脚或旁边的内容块。 实际上，我们实际上指的是对内容进行分区。 在HTML5中，这包括article ， aside ， nav和section 。 不久，我们将详细讨论分段内容及其如何影响您编写标记的方式。

• Heading content: This type of content defines the header of a given section, and includes the various levels of heading (h1, h2, and so on).

  标题内容 ：这种类型的内容定义了给定节的标题，并包括各种级别的标题( h1 ， h2等)。

• Phrasing content: This category is roughly the equivalent to what you’re used to thinking of as inline content; it includes elements such as em, strong, cite, and the like.

  短语内容 ：此类别与您惯常认为是内联内容的等同； 它包含诸如em ， strong ， cite之类的元素。

• Embedded content: This one’s fairly straightforward, and includes elements that are, well, embedded into a page, such as img, object, embed, video, and canvas.

  嵌入式内容 ：这是相当简单的内容，并且包含嵌入到页面中的元素，例如img ， object ， embed ， video和canvas 。

• Interactive content: This category includes any content with which users can interact. It consists mainly of form elements, as well as links and other elements that are interactive only when certain attributes are present. Two examples include the audio element when the controls attribute is present, and the input element with a type attribute set to anything but “hidden“.

  互动内容 ：此类别包括用户可以与之互动的任何内容。 它主要由表单元素以及仅当存在某些属性时才交互的链接和其他元素组成。 有两个示例，包括当controls属性存在时的audio元素，以及一个type属性设置为除“ hidden ”之外的任何内容的input元素。

As you might gather from reading the list, some elements can belong to more than one category. There are also some elements that fail to fit into any category (for example, the head and html elements). Don’t worry if any of this seems confusing. The truth is, as a developer, you won’t need to think about these categories in order to decide which element to use in which circumstance. More than anything, they’re simply a way to encapsulate the different kinds of HTML tags available.

正如您可能从阅读列表中了解到的那样，某些元素可能属于多个类别。 还有一些元素不适合任何类别(例如， head和html元素)。 如果其中任何一项看起来令人困惑，请不要担心。 事实是，作为开发人员，您无需考虑这些类别即可决定在哪种情况下使用哪个元素。 最重要的是，它们只是封装各种可用HTML标记的一种方式。

更多新元素 (More New Elements)

In addition to the structural elements we saw in Chapter 2, HTML5 includes a number of other semantic elements. Let’s examine some of the more useful ones.

除了在第2章中看到的结构性元素外，HTML5还包含许多其他语义元素。 让我们研究一些更有用的。

figure和figcaption元素 (The figure and figcaption Elements)

The figure and figcaption elements are another pair of new HTML5 elements that contribute to the improved semantics in HTML5. The figure element is explained in the spec as follows:

figure和figcaption元素是另一对新HTML5元素，它们有助于改进HTML5中的语义。 规格中对 figure元素进行了如下解释 ：

The figure element can […] be used to annotate illustrations, diagrams, photos, code listings, etc. […] A figure element’s contents are part of the surrounding flow.

figure元素可以[…]用于注释插图，图表，照片，代码清单等。[…] figure元素的内容是周围流程的一部分。

Think of charts, graphs, images to accompany text, or example code. All those types of content might be good places to use figure and potentially figcaption.

考虑图表，图形，文本或示例代码附带的图像。 所有这些类型的内容可能是使用figure和潜在的figcaption好地方。

The figcaption element is simply a way to mark up a caption for a piece of content that appears inside of a figure.

所述figcaption element是简单地标记为一条内容，一个内出现字幕的方式figure 。

In order to use the figure element, the content being placed inside it must have some relation to the main content in which the figure appears. If you can completely remove it from a document, and the document’s content can still be fully understood, you probably shouldn’t be using figure; you might, however, need to use aside or an alternative.

为了使用figure元素，放置在其中的内容必须与图形所显示的主要内容具有某种关系。 如果您可以将其从文档中完全删除，并且仍然可以完全理解文档的内容，则可能不应该使用figure ； 你可能会，但是，需要使用aside或替代。

Let’s look at how we’d mark up a figure inside an article:

让我们看看如何在article标记一个figure ：

<article>
  <h1>Accessible Web Apps</h1>

  <p>Lorem ipsum dolor … </p>

  <p>As you can see in <a href="#fig1">Figure 1</a>,

  <figure id="fig1">
    <figcaption>Screen Reader Support for WAI-ARIA</figcaption>
    <img src="figure1.png" alt="JAWS: Landmarks 1/1, Forms 4/5 … ">
  </figure>

  <p>Lorem ipsum dolor … </p>
</article>

Using figcaption is fairly straightforward. It has to be inside a figure element and it can be placed either before or after the figcaption content. In the example here, we’ve placed it before the image.

使用figcaption非常简单。 它必须在figure元素内部，并且可以放置在figcaption内容之前或之后。 在此处的示例中，我们将其放置在图像之前。

mark元素 (The mark Element)

The mark element “represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.” Admittedly, there are very few uses we can think of for the mark element. The most common is in the context of a search, where the keywords that were searched for are highlighted in the results.

mark元素“由于一个文档在另一上下文中的相关性，因此代表一个文档中标记或突出显示的文本段。” 诚然，我们可以想到mark元素的用途很少。 最常见的是在搜索的上下文中，其中搜索的关键字在结果中突出显示。

The spec also mentions using mark to draw attention to text inside a quote. In any case, you want to use it to indicate “a part of the document that has been highlighted due to its likely relevance to the user’s current activity”.

规范还提到了使用mark来引起人们对引号内文本的注意。 无论如何，您都希望使用它来表示“由于其与用户当前活动可能相关而被突出显示的文档的一部分”。

Avoid confusing mark with em or strong; those elements add contextual importance, whereas mark separates the targeted content based on a user’s current browsing or search activity.

避免mark与em或strong混淆; 这些元素增加了上下文的重要性，而标记则根据用户当前的浏览或搜索活动来分隔目标内容。

To use the search example, if a user has arrived at an article on your site from a Google search for the word “HTML5,” you might highlight words in the article using the mark element like this:

以搜索示例为例，如果用户通过Google搜索“ HTML5”一词到达您网站上的某个文章，则可以使用mark元素突出显示文章中的单词，如下所示：

<h1>Yes, You Can Use <mark>HTML5</mark> Today!</h1>

The mark element can be added to the document either using server-side code, or on the client side with JavaScript after the page has loaded. Search content, for example, can be derived from a URL using search.php?query=html5, for example. In that case, your server-side code might grab the content of the variable in the query string, and then use mark tags to indicate where the word is found on the page.

可以使用服务器端代码将mark元素添加到文档中，也可以在页面加载后使用JavaScript在客户端将其添加到文档中。 例如，搜索内容可以使用search.php?query=html5从URL派生。 在这种情况下，您的服务器端代码可能会获取查询字符串中变量的内容，然后使用mark标记指示该单词在页面上的位置。

progress和meter要素 (The progress and meter Elements)

Two new elements added in HTML5 allow for marking up of data that’s being measured or gauged in some way. The difference between them is fairly subtle: progress is used to describe the current status of a changing process that’s headed for completion, regardless of whether the completion state is defined. The traditional progress bar indicating download progress is a perfect example of this.

HTML5中添加了两个新元素，可以标记以某种方式测量或计量的数据。 它们之间的区别相当细微： progress用于描述即将完成的变更过程的当前状态，而不管是否定义了完成状态。 指示下载进度的传统进度条就是一个很好的例子。

The meter element, meanwhile, represents an element whose range is known, meaning it has definite minimum and maximum values. The spec gives the examples of disk usage, or a fraction of a voting population—both of which have a definite maximum value. Therefore, it’s likely you would avoid using meter to indicate an age, height, or weight—all of which normally have unknown maximum values.

同时， meter元素代表其范围已知的元素，这意味着它具有确定的最小值和最大值。 该规范给出了磁盘使用情况或投票总数的一部分的示例，两者均具有确定的最大值。 因此，您可能会避免使用meter来指示年龄，身高或体重-通常所有这些值都未知。

Let’s look in more detail at progress. The progress element can have a max attribute to indicate the point at which the task will be complete, and a value attribute to indicate the task’s status. Both of these attributes are optional. Here’s an example:

让我们更详细地看一下progress 。 progress元素可以具有max属性以指示任务将完成的点，而value属性可以指示任务的状态。 这两个属性都是可选的。 这是一个例子：

<h1>Your Task is in Progress</h1>
<p>Status: <progress max="100" value="0"><span>0</span>% </progress></p>

This element would best be used with JavaScript to dynamically change the value of the percentage as the task progresses. You’ll notice that the code includes span tags, isolating the number value; this facilitates targeting the number directly from your script when you need to update it.

此元素最好与JavaScript一起使用，以随着任务的进行动态地更改百分比的值。 您会注意到该代码包含span标记，隔离了数字值； 这有助于在需要更新脚本时直接从脚本中定位该数字。

The meter element has six associated attributes. In addition to max and value, it also allows use of min, high, low, and optimum.

meter元素具有六个关联的属性。 除了max和value ，它也允许使用min ， high ， low ，和optimum 。

The min and max attributes reference the lower and upper boundaries of the range, while value indicates the current specified measurement. The high and low attributes indicate thresholds for what is considered “high” or “low” in the context. For example, your grade on a test can range from 0% (min) to 100% (max), but anything below 60% is considered low and anything above 85% is considered high. The optimum attribute refers to the ideal value. In the case of a test score, the value of optimum would be 100.

min和max属性引用范围的上下边界，而value表示当前指定的测量值。 high和low属性指示在上下文中被视为“高”或“低”的阈值。 例如，您的测验成绩范围可以从0％(最小)到100％(最大)，但是低于60％的任何东西都被认为是低的，高于85％的任何东西都被认为是高的。 optimum属性是指理想值。 在测试分数的情况下， optimum值为100。

Here’s an example of meter, using the premise of disk usage:

这是使用磁盘前提的meter的示例：

<p>Total current disk usage: <meter value="130" min="0" max="320" low="10" high="300" title="gigabytes">63 GB</meter></p>

In the figure below, you can see how the meter element looks by default in Chrome and Firefox.

在下图中，您可以看到在Chrome和Firefox中，默认情况下仪表元素的外观。

For better accessibility, when using either progress or meter, you’re encouraged to include the value as text content inside the element. So if you’re using JavaScript to adjust the current state of the value attribute, you should change the text content to match.

为了获得更好的可访问性，在使用progress或meter ，建议您将该值作为文本内容包括在元素中。 因此，如果您使用JavaScript来调整value属性的当前状态，则应更改文本内容以使其匹配。

time元素 (The time Element)

Dates and times are invaluable components of web pages. Search engines are able to filter results based on time, and in some cases, a specific search result can receive more or less weight by a search algorithm depending on when it was first published.

日期和时间是网页的宝贵组成部分。 搜索引擎能够基于时间过滤结果，在某些情况下，特定搜索结果可能会根据搜索算法的发布时间而受到某种程度的权重。

The time element has been specifically designed to deal with the problem of humans reading dates and times differently from machines. Take the following example:

time元素经过专门设计，可以解决人类与机器阅读日期和时间的问题。 请看以下示例：

<p>We'll be getting together for our next developer conference on 12 October of this year.</p>

While humans reading this paragraph would likely understand when the event will take place, it would be less clear to a machine attempting to parse the information.

尽管阅读本段内容的人员可能会了解事件的发生时间，但是对于尝试解析该信息的机器而言，它并不清楚。

Here’s the same paragraph with the time element introduced:

这是引入了time元素的同一段：

<p>We’ll be getting together for our next developer conference on <time datetime="2015-10-12">12 October of this year</time>.</p>

The time element also allows you to express dates and times in whichever format you like while retaining an unambiguous representation of the date and time behind the scenes, in the datetime attribute. This value could then be converted into a localized or preferred form using JavaScript, or by the browser itself (although no browsers at the time of writing support this behavior).

time元素还允许您以任意格式表示日期和时间，同时在datetime属性中保留幕后日期和时间的明确表示。 然后可以使用JavaScript或浏览器本身将此值转换为本地化或首选形式(尽管在撰写本文时没有浏览器支持此行为)。

In earlier versions of the spec, the time element allowed use of the pubdate attribute. This was a Boolean attribute, indicating that the content within the closest ancestor article element was published on the specified date. If there was no article element, the pubdate attribute would apply to the entire document. But this attribute has been removed from the spec, even though it did seem to be useful. In his in-depth article on the time element, Aurelio De Rosa provides an alternative for the now dropped pubdate attribute, if you want to look at another method for achieving this.

在规范的早期版本中， time元素允许使用pubdate属性。 这是一个布尔属性，指示最接近的祖先article元素内的内容已在指定日期发布。 如果没有article元素，则pubdate属性将应用于整个文档。 但是，即使它确实有用，该属性也已从规格中删除。 如果您想了解实现此目标的另一种方法， Aurelio De Rosa在其有关time元素的深入文章中，为现已删除的pubdate属性提供了一种替代方法。

The time element has some associated rules and guidelines:

time元素具有一些相关的规则和准则：

• You should not use time to encode unspecified dates or times (for example, “during the ice age” or “last winter”; this is because the time element does not allow for ranges).

  您不应使用time来编码未指定的日期或时间(例如，“在冰河时期”或“去年冬天”；这是因为time元素不允许范围)。

• The date represented cannot be “BC” or “BCE” (before the common era); it must be a date on the Gregorian Calendar.

  所代表的日期不能为“ BC”或“ BCE”(在共同时代之前)； 它必须是公历中的日期。

• If the time element lacks a valid datetime attribute, the element’s text content (whatever appears between the opening and closing time tags) needs to be a valid datetime value.

  如果time元素缺少有效的datetime属性，则该元素的文本内容(无论在开始和结束time标签之间出现的内容)都必须是有效的datetime值。

Here’s a chunk of HTML that includes many of the different ways to write a datetime value according to the spec:

这是一段HTML，其中包含根据规范编写datetime值的许多不同方式：

<!-- month -->
<time>2015-11</time>

<!-- date -->
<time>2015-11-12</time>

<!-- yearless date -->
<time>11-12</time>

<!-- time -->
<time>14:54:39</time>

<!-- floating date and time -->
<time>2015-11-12T14:54:39</time>

<!-- time-zone offset -->
<time>-0800</time>

<!-- global date and time -->
<time>2015-11-12T06:54:39.929-0800</time>

<!-- week -->
<time>2015-W46</time>

<!-- duration -->
<time>4h 18m 3s</time>

The uses for the time element are endless: calendar events, publication dates (for blog posts, videos, press releases, and so forth), historic dates, transaction records, article or content updates, and much more.

time元素的用途是无止境的：日历事件，发布日期(用于博客帖子，视频，新闻发布等)，历史日期，交易记录，文章或内容更新等等。

翻译自: https://www.sitepoint/html5s-changed-perspective-on-content-types/

html5常见语义化新元素