4.3    Using Semantic HTML使用语义HTML

Now that you know the HTML elements for page structuring and text structuring, you may be wondering how you can create a basic web page with these HTML elements so that it makes sense semantically. 既然你知道了页面结构和文本结构的HTML元素，你可能想知道如何用这些HTML元素创建一个基本的网页，使其在语义上有意义。Specifically, this means that you can define the different logical parts of a web page with HTML tags. 具体来说，这意味着您可以使用HTML标签定义网页的不同逻辑部分。By the way, the semantic web isn’t just a fad, but helps search engines, for example, better allocate the sheer flood of data on the internet. Search engines such as Google even prefer semantic web pages and searches HTML pages for semantic content.顺便说一句，语义网不仅仅是一种时尚，而且有助于搜索引擎更好地分配互联网上的海量数据。谷歌等搜索引擎甚至更喜欢语义网页，并在HTML页面上搜索语义内容。

Let’s take as a simple example the term goal, whose meaning in hockey is different from that in business. 让我们以“目标”一词为例，它在曲棍球中的含义与在商业中的含义不同。The term gets its assignment and meaning only if you provide the relevant context. This is roughly how you can imagine the semantic web: you contextualize the content with code so that machines can also interpret and process it.只有当你提供相关的上下文时，这个词才能得到它的分配和含义。这大致就是你可以想象语义网的方式：你用代码将内容情境化，这样机器也可以解释和处理它。

4.3.1    HTML without a Precise Structure没有精确结构的HTML

The first example is a classic HTML document that has no detailed structure:第一个例子是一个没有详细结构的经典HTML文档：

...
  <h1>My Blog</h1>
  <p>A blog with yummy recipes ...</p>
  <p>Navigation: 
    <a href="#">Blog</a> | <a href="#">Recipes</a> |
    <a href="#">About me</a> | <a href="#">Legal Notes</a>
  </p>
  <h2>Old Posts</h2>
  <ul>
    <li><a href="#">Last Week</a></li>
    <li><a href="#">Archive</a></li>
  </ul>
  <h2>Tasty homemade vanilla sauce</h2>
  <p>Today I want to show you how ...</p>
  <h3>Similar recipes</h3>
  <ul>
     <li><a href="#">Chocolate sauce made from cocoa</a></li>.
     <li><a href="#">Custard Made Easy</a></li>
  </ul>
  <p> 
    <a href="#">Contact</a> | <a href="#">FAQs</a> |
    <a href="#">About me</a> | <a href="#">Legal Notes</a>
  </p>
... 

Listing 4.22     /examples/chapter004/4_3_1/index.html

There isn’t much to note about this example. The HTML code is valid and can be used like that. You can see some headings, unordered lists, navigation, and various paragraph texts. 这个例子没什么值得注意的。HTML代码是有效的，可以这样使用。您可以看到一些标题、无序列表、导航和各种段落文本。However, such code is rarely used because it’s nearly unstructured and is relatively poorly suited for styling or laying out via CSS.然而，这样的代码很少被使用，因为它几乎是非结构化的，相对不适合通过CSS进行样式或布局。

Figure 4.27     /examples/chapter004/4_3_1/index.html When Displayed in the Web Browser在Web浏览器中显示时

4.3.2    Generic Structuring Using <div>使用<div>进行通用结构化

The first example didn’t contain any element to tell you where the different sections of content were located. For this reason, we’ll now use the div element to divide the content into separate sections. 第一个示例不包含任何元素来告诉您不同内容部分的位置。因此，我们现在将使用div元素将内容划分为单独的部分。Take a look at the same example again now, but this time it contains the div elements:现在再次看一下同一个例子，但这次它包含div元素：

...
  <div>
  <h1>My Blog</h1>
  <p>A blog with yummy recipes ...</p>
  </div>
  <div>
  <p>Navigation: 
    <a href="#">Blog</a> |
    <a href="#">Recipes</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </div>
  <div>
  <h2>Old Posts</h2>
  <ul>
    <li><a href="#">Last Week</a></li>
    <li><a href="#">Archive</a></li>
  </ul>
  </div>
  <div>
  <h2>Tasty homemade vanilla sauce</h2>
  <p>Today I want to show you ... </p>
  <h3>Similar recipes</h3>
  <ul>
     <li><a href="#">Chocolate sauce made from cocoa</a></li>.
     <li><a href="#">Custard Made Easy</a></li>
  </ul>
  </div>
  <div>
  <p> 
    <a href="#">Contact</a> |
    <a href="#">FAQs</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </div>
... 

Listing 4.23     /examples/chapter004/4_3_2/index.html

This time, the content was separated by means of div elements. Nevertheless, we still don’t see any semantic elements. 这一次，内容是通过div元素分隔的。然而，我们仍然没有看到任何语义元素。Visually, nothing changes here compared to the /examples/chapter004/4_3_1/index.html example from the previous section.从视觉上看，与上一节中的/examples/chapter004/4_3_1/index.html示例相比，这里没有任何变化。

All that can be achieved by using the div element is to group a piece of content together. Thus, it depends on the author of the web page to assign meaning to the individual div elements. 使用div元素所能实现的就是将一段内容组合在一起。因此，这取决于网页的作者为各个div元素赋予意义。Before semantic elements came into play, this was done via attributes in the opening <div> tag. 在语义元素发挥作用之前，这是通过打开<div>标签中的属性完成的。So, let’s now take a look at the next step and the next example, in which the individual div elements get their meaning:那么，现在让我们来看下一步和下一个例子，在这个例子中，各个div元素得到了它们的含义：

...
  <div id="header">
  <h1>My Blog</h1>
  <p>A blog with yummy recipes ...</p>
  </div>
  <div id="navigation">
  <p>Navigation: 
    <a href="#">Blog</a> |
    <a href="#">Recipes</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </div>
  <div id="sidebar">
  <h2>Old Posts</h2>
  <ul>
    <li><a href="#">Last Week</a></li>
    <li><a href="#">Archive</a></li>
  </ul>
  </div>
  <div id="content">
  <h2>Tasty homemade vanilla sauce</h2>
  <p>Today I want to show you ...</p>
  <h3>Similar recipes</h3>
  <ul>
     <li><a href="#">Chocolate sauce made from cocoa</a></li>.
     <li><a href="#">Custard Made Easy</a></li>
  </ul>
  </div>
  <div id="footer">
  <p> 
    <a href="#">Contact</a> |
    <a href="#">FAQs</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </div>
... 

Listing 4.24     /examples/chapter004/4_3_2/index2.html

While nothing has changed in a purely visual sense, the div elements have gained meaning thanks to the id attribute. 虽然在纯粹的视觉意义上没有任何变化，但由于id属性，div元素有了意义。We now have a header, navigation, sidebar, content, and footer as it’s visually represented in Figure 4.28. 我们现在有一个页眉、导航、侧边栏、内容和页脚，如图4.28所示。Using CSS, you can design and lay out these areas individually. This way, you can virtually already achieve a semantically correct structuring of the website, but not yet a semantically unified structuring.使用CSS，您可以单独设计和布局这些区域。这样，您几乎可以实现网站的语义正确结构，但还不能实现语义一致性的结构。

Figure 4.28     The Meaning for the Layout Areas Is Assigned via <div> and the “id” Attribute布局区域的含义是通过<div>和“id”属性分配的

So why should you use semantic structuring at all when you can work with div elements without any problem? 那么，当你可以毫无问题地使用div元素时，为什么还要使用语义结构呢？There are several reasons for this: Despite the use of IDs in the div element, you have a semantically neutral element. 这有几个原因：尽管在div元素中使用了ID，但你有一个语义中立的元素。It isn’t a standardized structuring, but instead everyone can define what they want. For the machines, there’s still no difference here. 这不是一个标准化的结构，但每个人都可以定义他们想要什么。对于机器来说，这里仍然没有区别。They can’t know what you really mean by id="header" or id="content" and what’s behind it. 他们无法理解你所说的id="header"或id="content"的真正含义，以及其背后的含义。You might as well write id="head" or id="synopsis" or whatever in all the languages of the world.你也可以用世界上所有的语言写id="head"或id="synopsis"或其他任何东西。

For example, imagine a smart screen reader reading the main content of the web page to a visually impaired person. 例如，想象一个智能屏幕阅读器为视障人士阅读网页的主要内容。How would the screen reader know what the main content is? 屏幕阅读器如何知道主要内容是什么？One web developer may write id="content", another may write id="main", and you may write id="musings". 一个web开发人员可能会写id=“content”，另一个可能会写id="content"，你可能会写id="musings"。In addition, some web developers don’t mark up the main content at all.此外，一些web开发人员根本不标记主要内容。

The situation is the same with search engines. For search engines to return a better result, it’s helpful if they know what belongs to the main content of the web page. 搜索引擎的情况也是如此。为了让搜索引擎返回更好的结果，如果他们知道网页的主要内容是什么，这会很有帮助。Again, the search engine faces nonstandard class and ID names. Thus, it’s an advantage here if you tell the web crawler on the next visit: this is the main content of my site.同样，搜索引擎面临着非标准的类名和ID名。因此，如果你在下次访问时告诉网络爬虫，这是一个优势：这是我网站的主要内容。

4.3.3    Semantic Structuring Using the Elements Provided in HTML使用HTML中提供的元素进行语义结构

To write a semantically meaningful structure as HTML code for machines, there are suitable elements in HTML that have already been described in the book and are listed once again in Table 4.3.为了编写一个语义上有意义的结构作为机器的HTML代码，HTML中有一些合适的元素已经在书中描述过，并在表4.3中再次列出。

Table 4.3     Semantic HTML Elements语义HTML元素

Returning to our example /examples/chapter004/4_3_2/index2.html, this HTML code should do without div elements and instead rely on semantic HTML elements:回到示例/examples/chapter004/4_3_2/index2.html，这个HTML代码应该没有div元素，而是依赖于语义HTML元素：

...
  <header>
  <h1>My Blog</h1>
  <p>A blog with yummy recipes ...</p>
  </header>
  <nav>
  <p>Navigation: 
    <a href="#">Blog</a> |
    <a href="#">Recipes</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </nav>
  <aside>
  <h2>Old Posts</h2>
  <ul>
    <li><a href="#">Last Week</a></li>
    <li><a href="#">Archive</a></li>
  </ul>
  </aside>
  <article>
  <h2>Tasty homemade vanilla sauce</h2>
  <p>Today I want to show you ...</p>
  <h3>Similar recipes</h3>
  <ul>
     <li><a href="#">Chocolate sauce made from cocoa</a></li>.
     <li><a href="#">Custard Made Easy</a></li>
  </ul>
  </article>
  <footer>
  <p> 
    <a href="#">Contact</a> |
    <a href="#">FAQs</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </p>
  </footer>
... 

Listing 4.25     /examples/chapter004/4_3_3/index.html

When you look at the HTML document with the semantic elements, it’s probably already much easier to recognize at first glance what has which meaning here. This is just a simple example.当你查看带有语义元素的HTML文档时，乍一看，可能已经更容易识别这里的含义了。这只是一个简单的例子。 Here you can immediately see the header, navigation, sidebar, main content, and footer (see Figure 4.29). 在这里，您可以立即看到页眉、导航、侧边栏、主要内容和页脚（见图4.29）。This way, the content could perhaps also be placed inside the main element in which the individual articles are then summarized using the article element.这样，内容也可以放在main元素中，然后使用article元素对单个文章进行总结。

Figure 4.29     Layout Areas Marked with HTML Semantic Elements用HTML语义元素标记的布局区域

The point here isn’t at all where you can use exactly which HTML element in detail, but rather that this semantic structuring makes sense, even if you’ve never heard of new elements such as nav, article, header, footer, and so on. 这里的重点根本不是你可以详细使用哪个HTML元素，而是这种语义结构是有意义的，即使你从未听说过nav、article、header、footer等新元素。The logic here is almost self-evident. It’s much easier to see where the navigation, header, or footer is written in this document.这里的逻辑几乎是不言而喻的。更容易看到导航、页眉或页脚在文档中的位置。

4.3.4    What’s the Use of Those Semantic HTML Elements?这些语义HTML元素有什么用？

If you’ve carefully followed this section, you’ve seen that the semantic HTML elements are very useful. Thus, probably one of their advantages is that they make life easier for you as the developer of the website.如果你仔细阅读了这一节，你就会发现语义HTML元素非常有用。因此，他们的优势之一可能是，他们让你作为网站的开发者生活更轻松。

For “normal” visitors, these semantic HTML elements don’t have much value at first. On the contrary, those visitors won’t even be able to distinguish in the web browser whether you’ve used div elements or the semantic HTML elements. 对于“普通”访问者来说，这些语义HTML元素起初没有多大价值。相反，这些访问者甚至无法在web浏览器中区分您是使用了div元素还是语义HTML元素。However, if, for example, a new smart web browser provides special features that let you get to navigation by clicking a button, the new semantics take on meaning for normal visitors as well.然而，例如，如果一个新的智能网络浏览器提供了特殊功能，让你通过点击按钮来导航，那么新的语义对普通访问者来说也有意义。

The situation is different, however, for visually impaired visitors who use a screen reader. A good screen reader could “recognize” the content of the web page based on the new semantic structure and thus jump directly to the content or navigation.然而，对于使用屏幕阅读器的视障游客来说，情况就不同了。一个好的屏幕阅读器可以根据新的语义结构“识别”网页的内容，从而直接跳转到内容或导航。

Of course, you shouldn’t disregard the search engines at all. For example, you could let the search engine know in a consistent and standardized way where which content is located, so that it assigns a higher ranking to the relevant content of a web page.当然，你根本不应该忽视搜索引擎。例如，您可以让搜索引擎以一致和标准化的方式知道哪些内容位于何处，以便它为网页的相关内容分配更高的排名。