Question

好的，所以我理解关于语义标记的炒作：它增强/进一步指定搜索引擎的元素或页面的含义，因此对于人类阅读搜索结果。微格式和<h1>, <h2>, <p>等所有信用，因为这些标签表示层次结构和/或特定目的，并为页面添加含义。

但为什么现在有像<aside>, <header>, <footer>这样的标签？他们比<div id="aside/header/footer">有什么优势？

这些标签没有特定的子属性或属性，如<audio>, <form>, <img>标签（src，action等），我很难想象这意味着搜索引擎性能会改为寻找标头标签头标识。此外，如果初学者在使用这些标签时出错，那么它会不会更糟，因为错误会一直下降到DOM节点级别？

那么为什么有新的HTML'语义'标签没有明显优于普通的'div'？或者，如果这是错误的，有什么好处？

编辑：我正在寻找的答案是在安东尼在第4条评论中指出的链接：http://www.w3.org/TR/html5/sections.html。

<aside>, <header>, <footer>等标签存在的理由是：

分区内容是定义标题和页脚范围的内容。 - W3C

Answer 1

好处是标记更准确地描述了文档的内容和结构。带有<div>的{{1}}并不代表标题，无论id可能是什么 - 它都是完全随意的。而id是一个标题，无论它是<header>。

Answer 2

@Tyblitz

语义元素表示具有含义的元素。这些元素清楚地描述了浏览器以及开发者的含义。

<div>和<span>是非语义元素的示例;他们没有说出他们的内容，而<form>，<table>和<img>等元素清楚地定义了他们的内容，因此被称为语义元素

<header> - header是一个语义元素，用于指定文档或节的标题。标题应该用作介绍内容的容器。您可以在一个文档中包含多个标题元素。

<section> - section是内容的主题分组，通常带有标题。

<article> - 文章指定独立，自包含的内容。

依旧......

以下示例定义了如何在HTML5标记中使用原理图元素：

 <!-- BODY CONTAINER START -->
    <header>
        <h1>Little Green Guys With Guns</h1>
        <nav>
            <ul>
                <li><a href="/games">Games</a>
                <li><a href="/forum">Forum</a>
                <li><a href="/download">Download</a>
            </ul>
        </nav>
        <h2>Important News</h2> <!-- this starts a second subsection --
        <!-- this is part of the subsection entitled "Important News" -->
        <p>To play today's games you will need to update your client.</p>
        <h2>Games</h2> <!-- this starts a third subsection -->
    </header>
    <p>You have three active games:</p>
    <!-- this is still part of the subsection entitled "Games" -->
 <!-- BODY CONTAINER END -->

Answer 3

答案隐藏在搜索引擎中。

搜索引擎只能抓取HTML元素，而且他们对你网站的css颜色，字体大小知之甚少，因此，他们可以清楚地看到你发现哪些单词更重要，如粗体或标题，页眉，页脚（对于任务或联系），等......给你的网站提供了他们的algorythm的线索。

语义标记：为什么<header>而不是<div id =“header”>？</div> </header>

3 个答案: