HTML text fundamentals

这篇翻译不完整。请帮忙从英语翻译这篇文章

HTML语言的一个主要工作是编辑文本结构和文本内容(也称为语义semantics),以便浏览器能正确的显示结果。 本文介绍了 HTML的使用方法:在一段文本中添加标题和段落,强调词语,创建列表等等。

Prerequisites: Basic HTML familiarity, as covered in Getting started with HTML.
Objective: Learn how to mark up a basic page of text to give it structure and meaning — including paragraphs, headings, lists, emphasis, and quotations.

基础: 标题和段落

大部分的文本结构由标题和段落组成。 不管是小说、报刊、教科书还是杂志等。

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

内容结构化会使读者的阅读体验更轻松,更愉快。

在HTML中,每个段落是通过<p> 元素标签进行定义的, 比如下面这样:

<p>I am a paragraph, oh yes I am.</p>

每个标题(Heading)是通过“标题标签”进行定义的:

<h1>I am the title of the story.</h1>

这里有六个标题元素标签— <h1><h2><h3><h4><h5>, 和 <h6>. 每个元素代表文档中不同级别的内容; <h1>表示主标题(the main heading),<h2>表示二级子标题(subheadings),<h3>表示三级子标题(sub-subheadings),等等。

编辑结构层次

这里举一个例子。在一个故事中,<h1>表示故事的名字,<h2>表示每个章节的标题, <h3>表示每个章节下的子标题,以此类推。

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The Dark Night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

所涉及的元素具体代表什么,完全取决于作者编辑的内容,只要层次结构是合理的。在创建此类结构时,您只需要记住一些最佳实践:

  • 优选地,您应该只对每个页面使用一次<h1> — 这是顶级标题,所有其他标题位于层次结构中的下方。
  • 请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题,后面跟<h2>来表示副副标题 - 这是没有意义的,会导致奇怪的结果。
  • 在可用的六个标题级别中,您应该旨在每页使用不超过三个,除非您认为有必要使用更多。具有许多级别的文档(即,较深的标题层次结构)变得难以操作并且难以导航。在这种情况下,如果可能,建议将内容分散在多个页面上。

为什么我们需要结构化?

回答这个问题前,让我们先来看一段文档示例“text-start.html” — 并从运行这段文档示例(美味的豆沙食谱)开始。首先,您可以复制一份并保存到本地机器上,在之后的练习中您将用到它。在这个文档的主体 (body)中包含了多个内容 — 这些内容没有做任何标记,但是编辑时使用了换行 (输入回车/换行跳转到下一行)处理。

然而,当您在浏览器中打开文档时,您会看到文本显示为一整块!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

这是因为没有元素给内容结构,所以浏览器不知道什么是标题,什么是段落。此外:

  • 用户在阅读网页时,往往会快速浏览以查找相关内容,经常只是阅读开头的标题(我们通常在一个网页上会花费很少的时间 spend a very short time on a web page)。如果用户不能在几秒内看到一些有用的内容,他们很可能会感到沮丧并离开。
  • 对您的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题,您的网页在SEO(搜索引擎优化)方面效果不佳。
  • 严重视力障碍者通常不会阅读网页;他们用听力来代替。完成这项工作的软件叫做屏幕阅读器(screen reader)。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中,它们通过朗读标题来提供文档的概述,让用户能快速找到他们需要的信息。如果标题不可用,用户将被迫听到整个文档的大声朗读。
  • 使用CSS样式化内容,或者使用JavaScript做一些有趣的事情,你需要包含相关内容的元素,所以CSS / JavaScript可以有效地定位它。

因此,我们需要给我们的内容结构标记。

实践操作: 编辑我们的内容结构

让我们直接跳进一个实例。在下面的示例中,向“输入”字段中的原始文本添加元素,使其在“输出”字段中显示为标题和两个段落。

如果您犯了错误,您可以使用重置按钮进行重置。如果卡住,请按显示解决方案按钮以查看答案。

为什么我们需要语义?

在我们身边的任何地方都要依赖语义学 — 我们依靠以前的经验就知道日常事物都代表什么;当我们看到什么,我们就会知道它代表什么。举个例子, 我们知道红色交通灯表示“停止”,绿色交通灯表示”通行“。 如果运用了错误的语义,事情会迅速地变得非常棘手 (难道有某个国家使用红色代表通行?我不希望如此)

同样的道理,我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里,<h1> 元素也是一个语义元素,它给出了包裹在您的页面上用来表示顶级标题的角色(或意义)的文本

<h1>这是一个顶级标题</h1>

一般来说,浏览器会给它一个更大的字形来让它看上去像个标题(虽然你可以使用CSS让它变成任何你想要的样式。更重要的是,它的语义值将以多种方式被使用,比如通过搜索引擎和屏幕阅读器(上文提到过的)。

在另一方面,你可以让任一元素看起来像一个顶级标题,如下:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

这是一个 <span> 元素,它没有语义。当您想要对它用CSS(或者JS)时,您可以用它包裹内容,且不需要附加任何额外的意义(在未来的课程中你会发现更多这类元素)。我们已经对它使用了CSS来让它看起来像一个顶级标题。然而,由于它没有语义值,所以它不会有任何上文提到的帮助。最好的方法是使用相关的HTML元素来标记这个项目。

列表 Lists

现在,让我们注意一下列表。列表在生活中随处可见——从你的购物清单到你的回家路线方案列表,再到你遵从的教程说明列表。在网络上,列表也到处存在,我们需要学习三种不同类型的列表。

无序 Unordered

无序的列表被用来标记每个项目。在这里,项目的顺序并不重要 — 让我们看下面的购物单的例子。

牛奶
鸡蛋
面包
鹰嘴豆泥

每份无序的清单从 <ul> 元素开始——这元素包裹了清单上所有被列出的项目:

<ul>
牛奶
鸡蛋
面包
鹰嘴豆泥
</ul>

最后一步就是用 <li> 元素把每个列出的项目分别包裹起来:

<ul>
  <li>牛奶</li>
  <li>鸡蛋</li>
  <li>面包</li>
  <li>鹰嘴豆泥</li>
</ul>

实践操作: 标记无序列表

尝试编辑下面的样本来创建您个人的HTML无序列表。

有序 Ordered

有序的列表是根据项目的顺序列出来的——让我们以一组方向为例:

行驶到这条路的尽头
向右转
直行穿过第一个双环形交叉路
在第三个环形交叉路左转
学校就在你的右边,300米处

这个标记的结构和无序列表一样,除了你需要用<ol> 元素将所有项目包裹, 而不是用<ul>:

<ol>
  <li>行驶到这条路的尽头</li>
  <li>向右转</li>
  <li>直行穿过第一个双环形交叉路</li>
  <li>在第三个环形交叉路左转</li>
  <li>学校就在你的右边,300米处</li>
</ol>

实践操作: 标记有序列表

尝试编辑下面的样本来创建您个人的HTML有序列表:

实践操作: 标记我们的食谱

到了这里,你拥有了所有你需要的信息来标记我们的食谱样例。你可以选择从text-start.html复制一份文件并保存在本地,打开它进行编辑,或者在下面的例子中进行编辑。因为在本地你可以保存你的项目,所以在本地做这个工作可能更好。而如果你在下面可编辑的样本中作业,下一次你打开这个网站时你可能会丢失你的数据。各有利弊吧。

如果你感到棘手,你可以随时按下Show solution按钮,或者在我们的github repo上检查我们的 text-complete.html 样例。

嵌套列表 Nesting lists

将一个列表嵌入到另一个列表是完全可以的。 你可能想让一些子项目列在首项目之下。让我们从食谱示例中获取第二个列表:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
  <li>If you want a smooth humous, process it for a longer time.</li>
</ol> 

由于最后两项与它们的前一项非常密切相关(它们看起来更像该项的子项或选项),将它们编辑成无序列表,并嵌套在该项的子项中可能更合理。就像下面这样:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
      <li>If you want a smooth humous, process it for a longer time.</li>
    </ul>
  </li>
</ol>

尝试回到上一个实践操作的例子中,并更新第二个列表。

重点强调

在人类语言中,为了突出一句话的意思,我们通常强调某些词,并且我们通常想要标记某些词作为重点或者在某种程度上的不同。 HTML 提供了许多语义话的元素,并且允许我们通过这些元素的意义标记正文内容,在这个章节中,我们将看到最常见的一小部分元素。

强调

当我们想要在口语中添加强调,我们重读某些词,以便隐含的说出我们想要说的意思。类似的,在写作中,我们通过将文字写成斜体来强调它。比如,接下来的两个句子就有不通的含义.

I am glad you weren't late.

I am glad you weren't late.

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

In HTML we use the <em> (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a <span> element and some CSS, or perhaps an <i> element (see below.)

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

Strong importance

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

This liquid is highly toxic.

I am counting on you. Do not be late!

In HTML we use the <strong> (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span> element and some CSS, or perhaps a <b> element (see below.)

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

You can nest strong and emphasis inside one another if desired:

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

Active learning: Let's be important!

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

Italic, bold, underline...

The elements we've discussed so far have clearcut associated semantics. The situation with <b>, <i>, and <u> is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

  • <i> is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...
  • <b> is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...
  • <u> is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

总结

至此,本文应该给您做了一个很好的了解,如何开始在HTML中标记文本,并介绍了一些最重要的元素。在这一领域还有许多语义元素,我们将在后面的“更多语义元素”文章中看到更多的语义元素。 在下一篇文章中,我们将详细介绍如何创建超链接(create hyperlinks),它可能是Web上最重要的元素。

文档标签和贡献者

 此页面的贡献者: 876843240, DZW314, danlanxiaohei, c0ldian, funnyChinese
 最后编辑者: 876843240,