HTML5 语义化标签详细介绍教程

发布于 2018-08-20 21:04:16 字数 5011 浏览 2073 评论 0

这是一个简短的介绍新的 HTML 5 结构元素的工作草案，和如何使用语义类的名称在 HTML 4.01 或 XHTML1 标记对应于这些结构元素的名称。通过这样做，你会开始了解如何使用新的元素也在某种程度上使用普通语义 HTML 标签。

前言

HTML5 将是第一个自 XHTML 1.0 发布以来发布的网页标准语言，而 HTML 4.01，是在 1999 年发布的，你可以看到 HTML5 的工作草案在 2022 年将彻底定稿，W3C HTML 工作组和 WHATWG 已经作为代表，开放了一些借口和用法出来，各大浏览器厂商纷纷响应，声称自家的浏览器支持 HTML5 所有属性和方法，这是一个好的趋势。

HTML5 中添加很多语义化的新标签，这样更容易理解网页的代码，同时也帮助搜索引擎了解网站的结构，更好的收录，同样 W3C 的文件也更好理解了。

<header> 标签

<header> 标签是一个网页或者一个区域内的标题，不可与以前的头部混淆，这往往只是一个标识标记，它也应该包含一个 <h1>-<h6> 的分层等级，它也可以包含一些元信息的网页或一段关于最近更新的列表，文章版本号、或者博客作者、出版日期等信息。

一个简单的例子，一个页面使用语义化 CLASS 的网页网页结构：

<div class="header">
<h1>Page Title</h1>
</div>

你可以包括标志标记和其他元数据层内。博客文章下面的例子包括作者和出版日期信息（以及作为一个例子的引用区域和文章语义类名称的元素）：

<div class="section">
    <div class="article">
        <div class="header">
            <h1>Page Title</h1>
            <p>By <a href="*">Author</a> on [date]</p>
        </div>
        [Article content…]
    </div>
    <div class="article">
        [Repeat as required…]
    </div>
</div>

<nav> 标签

<nav> 元素应该包含一组导航链接，或者到其他页面，或在当前页面片段标识符。引用它的语义类的名字很简单：

<div class="nav">
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        [Repeat as required…]
    </ul>
</div>

<section>标签

<section> 元素定义了一段一个页或不同的内容。它通常有一个标题和可能页脚。这是我们如何能够代表它使用语义类的名称：

<div class="section">
    <div class="header">
        <h2>Section Title</h2>
    </div>
    [Section content…]
</div>

我也一直在使用 <div class="section"> 定义一组层，是相关的（如新闻事件）。在这样的一个例子，这些小节将嵌套，每个都有自己的 <h1>-<h6> 在等级秩序的维护层次。比如说：

<div class="section">
    <div class="header">
        <h2>News and Events</h2>
        <p>The latest announcements and upcoming conferences</p>
    </div>
    <div class="section">
        <h3>News</h3>
        [Section content…]
    </div>
    <div class="section">
        <h3>Events</h3>
        [Section content…]
    </div>
</div>

每个 Section 也可以用一个语义类的名称有一层 header 如果内容是必要的。

<article>标签

这是怎样的 HTML 5 工作草案的解释文章元素

文章元素代表了一部分的网页的组成部分包括一个形成文件，网页的一个独立的部分，或网站。这可能是一个论坛，杂志或报纸上的文章，网络日志，用户提交的评论，或任何其他内容的独立项目。

多个 Article 元素也可以嵌套。我们看的例子，一个系列的博客文章中使用语义类的 Header、Section 这是一个独特的使用语义类的名称为例文章页标题和 Footer：

<body>
    <div class="article">
        <div class="header">
            <h1>Title</h1>
        </div>
        [Article content…]
        <div class="footer">
            [Footer content…]
        </div>
    </div>
</body>

<figure> 标签

Figure 元素包含嵌入式媒体一样 <img> 和新的元素 <audio> 和 <video>。它还包含一个可选的 <legend> 元进行标题的功能。我们的语义类别名称的版本都是这样：

<div class="figure">
    <img src="*" alt="*">
    <p class="legend">[…]</p>
</div>

<dialog> 标签

dialog 元素取代 <dl> 含有 Converations 类似的成绩单。使用它作为一个语义类的名字很简单：

<dl class="dialog">
    <dt>Speaker 1</dt>
    <dd>So I said to him, I said…</dd>
    <dt>Speaker 2</dt>
    <dd>You never. You did? Oh my…</dd>
</dl>

<aside> 标签

引用工作草案：

除了元素代表一段一个页面，包括的内容是在一旁元素含量切相关，并可考虑从内容分离。这些部分通常表示为印刷字体的侧边栏。

我一直在使用 Aside 作为混合内容的侧边栏的类的名字，但我读的草案也表明也可能是适当的引文和主要内容部分有关的任何东西，见部分有关的 INS 和 IMG 元素为例。它会似乎是适当使用一个语义类的名字一样：

<body>
    <div class="section">
        [Section content…]
    </div>
    [Repeat sections as required for main content…]
    <div class="aside">
        [Aside content…]
    </div>
    <div class="footer">
        [Footer content…]
    </div>
</body>

<footer> 标签

这是什么工作草案说：

页脚元素代表的页脚区域它适用于。A页脚通常包含有关的区域如他写的、有关文件、链接资料的版权等。

在改变元素部分 HTML5 的差异从 HTML4 这也说明，地址元现在范围由切片的新概念。这是很重要的，因为现在，如果你有多个区域在一个页面，每个人都可以有一个标题和一个页脚与相应的地址在页脚如果你认为有必要为每个。然而，这似乎是一个罕见的使用案例。让我们用一个更广泛的一个语义化类：一个页脚的每一页与一个单一的地址元；这是它怎么可能会使用一个语义类的名称：

<div class="footer">
  <address>[…]</address>
  [Other footer content …]
</div>

语义化类（Class Names）

让我们重温一点：利用语义类的名字，我们把信息语义增强，每一块相关的数据是独立的。然而，这可能成为一些设计师阅读这一副作用，使用这种方法的明显，并最终利用HTML 5元素本身，将名称相同的容器内的不同内容很多。<div class="section"> 比如说呢。你可能想呈现不同的内容非常不同的浏览器。多个类的名字会让你做。class="section" 可以成为 class="section news", 或 class="section services"。类名称允许我们标准化的一些介绍说；例如 news 类名称将使我们以不同的方式呈现它作为一款变体。

所以现在我们最好的两个世界；临界结构元素的默认情况下更多的语义类的名字申请我们的创造力提供 hooks 包含。