语义 HTML

语义

互联网上有十多亿个网站。其中许多网站都是很久以前创建的，尚未更新 HTML 功能。因此，搜索引擎会忽略这些网站，浏览者也会发现这些网站难以阅读。

HTML5最重要的特性之一是其语义。语义 HTML 是指通过更好地定义网页的不同部分和布局，使 HTML 更易于理解的语法。它使网页更具信息性和适应性，使浏览器和搜索引擎能够更好地解释内容。例如，您可以使用header标签来代替div id="header"。

在本指南中，您将了解如何在网页创建中使用新的语义 HTML5 标签以及如何使内容对机器更具信息性。

语义 HTML 页面布局

让我们首先考虑一个用非语义 HTML 编写的基本 HTML 页面模板：

      <html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="header">
            Here goes logo, navigation, etc.
        </div>
        <div id="main-content">
            A place for website's main content
        </div>
        <div id="footer">
            Footer information, links, etc.
        </div>
    </body>
</html>
    

现在考虑下面显示的语义 HTML 示例：

      <html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <header>
            Here goes logo, navigation, etc.
        </header>
        <main>
            A place for website's main content
        </main>
        <footer>
            Footer information, links, etc.
        </footer>
    </body>
</html>
    

主要区别在于：我们用 3 个新标签替换了div标签： header、main和footer。header 、 main和footer标签是语义化的，因为它们用于表示 HTML 页面上的不同部分。这些标签比 div 标签更具描述性，因为div标签使得将网页划分为有形部分变得困难。

在 HTML5 中，nav标签取代了之前的万能标签div，用于包裹链接以创建导航菜单。例如，可以在header部分插入导航菜单：

      <header>
    <img src="logo.png" alt="logo"/>
    <nav>
        <a href="index.html">Home</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>
        <a href="about.html">About Us</a>
    </nav>
</header>```

but, it also can be added after the _header_ section:

```HTML
<header>
    <img src="logo.png" alt="logo" />
</header>
<nav>
    <a href="index.html">Home</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
    <a href="about.html">About Us</a>
</nav>
    

通常，导航菜单可以放在页面的任何位置，只需用 `` 包裹即可。但是，除非导航是特定于该页面的，否则不应将其放在main内。存在此限制是因为main元素应该只特定于该页面，而header和footer通常可在类似页面之间共享。

主要内容

要在主要部分中添加一些内容，我们可以使用新的 HTML5 标签，例如article和section 。这些标签简化了main的结构，使其看起来像：

      <main>
    <article>
        <h1>JavaScript Basics</h1>
        <p>JavaScript is a rich and expressive language...</p>
        <section>
            <h2>Syntax Basics</h2>
            <p>Understanding statements, variable naming, whitespace...</p>
        </section>
        <section>
            <h2>Operators</h2>
            <p>Operators allow you to manipulate values...</p>
        </section>
        <section>
            <h2>Conditional Code</h2>
            <p>Sometimes you only want to run a block of code under certain conditions...</p>
        </section>
    </article>
</main>
    

article标签用于包装页面上的独立内容。如果内容可以从页面中删除并放在其他页面上，则该内容是独立的。article标签可以包含多个section标签，就像我们的示例中一样。文章实际上是一个独立的部分。

section标签与div标签类似，但它更有意义，因为它包装了相关内容的逻辑组（例如文章的章节）。section标签也可用于包装文章本身，但我们为此目的使用了article标签。

更多内容

旁注部分

可以将与文章相关的、对理解文章不重要的附加内容插入到旁注部分。例如，它可以是有关有多少人阅读了这篇文章、谁是这篇文章的作者等的信息。在这种情况下，文章的 HTML 代码将采用以下结构：

      <main>
    <article>
        <h1>JavaScript Basics</h1>
        <p>JavaScript is a rich and expressive language...</p>
        <section>
            <h2>Syntax Basics</h2>
            <p>Understanding statements, variable naming, whitespace...</p>
        </section>
        <section>
            <h2>Operators</h2>
            <p>Operators allow you to manipulate values...</p>
        </section>
        <section>
            <h2>Conditional Code</h2>
            <p>Sometimes you only want to run a block of code under certain conditions...</p>
        </section>  
        <aside>
            <p>Viewed by 1503 people</p>
            <p>Author: John Smith</p>
        </aside>
    </article>
</main>
    

如上所示，aside允许搜索引擎快速提取作者、浏览量和日期等信息。此标签还可用于包含与整个页面相关的附加内容，而不仅仅是特定文章。例如，aside可以包含侧边栏、广告、脚注等。

数字

网页上的图形元素可以用figure和figcaption标签括起来。

图形标签用于标记照片、代码块、图表、插图和其他图形内容。通常，此标签包含可以移至附录的内容。只有与页面内容相关的图像才应位于图形标签内（例如徽标图像）。因此，横幅广告等图像不应位于该标签内。但是，有一种方法可以为横幅广告添加语义，我们将在本指南的微数据部分中介绍。

figcaption标签表示图形的标题或图例。它是可选的，可以省略。只能将一个figcaption标签嵌套在figure标签中。即使一个图形包含多个图像，所有图像也只能有一个figcaption 。

例如，喜欢这篇文章的人的照片可以用图片标签括起来。由于这些信息对于网页功能并不重要，因此可以将其嵌套在文章的旁注部分中。

      <aside>
    <p>Viewed by 1503 people</p>
    <p>Author: John Smith</p>
    <figure>
        <img src="John Doe.png" alt="John Doe"/>
        <img src="Maggie Smith.png" alt="Maggie Smith"/>
        <img src="Tom Hardy.png" alt="Tom Hardy"/>
        <figcaption>People who liked the article</figcaption>
    </figure>
</aside>
    

标题部分的徽标也应该用图形标签括起来，因此我们的标题部分最终将包含以下代码：

      <header>
    <figure>
        <img src="logo.png" alt="logo"/>
    </figure>
    <nav>
        <a href="index.html">Home</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>
        <a href="about.html">About Us</a>
    </nav>
</header>
    

请注意页面中的分区如何使代码更易于理解并可能改善浏览器和搜索引擎的内容解析。

HTML5 元素流程图

如果您不确定在特定情况下应使用哪个语义标签，您可以随时遵循HTML5Doctor作者制作的这个出色流程图。

微数据

微数据提供有关网页内容的附加信息，并帮助搜索引擎和屏幕阅读器在网站上操作。微数据可以作为属性添加到任何 HTML 标签中。例如，让我们在示例中添加一些有关文章作者的数据。文章的aside部分将包含以下代码：

      <aside>
    <p>Viewed by 1503 people</p>
    <p>Author: John Smith, Senior Software Developer at Google, Mountain View, California</p>
</aside>
    

包含微数据后， aside部分的 HTML 代码将是：

      <aside>
    <p>Viewed by 1503 people</p>
    <p itemscope itemtype="http://schema.org/Person">
        Author:
        <span itemprop="name">John Smith</span>,
        <span itemprop="jobTitle">Senior Software Developer</span>
        at
        <span itemprop="worksFor" itemscope itemtype="https://schema.org/Corporation">
            <span itemtype="name">Google</span>,  
        </span>
        <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <span itemprop="addressLocality">Mountain View</span>,
            <span itemprop="addressRegion">California</span>
        </span>
    </p>
</aside>
    

<div class="rich-text-editor text aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--default--

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文