什么HTML5标签应该用于“呼吁行动”Div？

Question

我是一名HTML5的新手，想知道在首页主内容旁边的Call to Action div中应该使用哪个HTML5标签。

选项1：

<aside>
    //call to action
</aside>

选项2：

<article>
    <section>
       //call to action
    </section>
</article>

我问这个问题是因为我认为两种选项都不完全适合。也许我漏看了些什么，谢谢！

我的呼叫行动HTML：

        <section class="box">
            <hgroup>
                <h1 class="side">Call Now</h1>
                <h2 class="side">To Schedule a Free Pick-Up!</h2>
                    <ul class="center">
                        <li>Cleaning</li>
                        <li>Repair</li>
                        <li>Appraisals</li>
                    </ul>
                <h3 class="side no-bottom">[phone]</h3>
                <h4 class="side no-top no-bottom">Ask for Bob!</h4>
            </hgroup>
            <img class="responsive" src="img/satisfaction-guarantee.png" alt="100% Satisfaction Guarantee">
            <p class="side">We guarantee you will be thrilled with our services or your money back!</p>
        </section>

这是三列布局中右侧栏的一个框。大中间栏中的内容概述了公司的服务。如果您想使用这些服务，您需要安排取件，因此需要呼吁行动。

有人反对使用HTML5吗？或者有更好的方法吗？

- Raphael Rafatpanah

---

为什么你不使用 div 呢？ - Brendon

我曾经认为HTML5旨在赋予内容更多的含义。当然，我可以使用div，但我的问题是什么是最相关的选项？ - Raphael Rafatpanah

HTML5旨在更具语义性。哪个标签会为“呼吁行动”内容提供更多上下文，文章还是侧边栏？如果两者都不合适，则像@Brendon所说，使用DIV。 - nathangiesbrecht

我也会选择使用<a>。如果内容是文本，为什么不使用<h3><a>call to action</a></h3>呢？而对于按钮则使用<button>。 - jjj

你知道的：我从来没有对清洁、维修或评估感到“兴奋”。满意，是的；但从未感到“兴奋”。你们或相关公司在哪里运营？我想打电话... - David Thomas

1. 你到底为什么要在你的内容（h3，h4）中使用标题？
2. hgroup不允许包含ul。
3. 你问题的答案取决于整个页面内容/上下文（→呼叫行动是否是页面主要内容的一部分）。

- unor

Answer 1

我的看法是，新的HTML5结构元素的最佳实践仍在制定中，而新的HTML5经济的宽容性意味着您可以建立对应您的应用程序最有意义的约定。

在我的应用程序中，我区分反映视图布局（即创建从页面到页面的整体一致性的模板）与内容本身（通常是任何在插入到布局的各个区域之前接收其他标记的功能或查询结果）的标记。这种区别很重要，因为布局元素语义（如标题、页脚和侧边栏）通常不会在搜索期间帮助区分内容，因为该标记通常从页面到页面重复。我特别喜欢使用HTML5中的语义区别来描述用户实际搜索的内容。例如，我通常使用文章来包装主要内容，使用导航来包装任何相关的链接列表。小部件包装器通常与页面布局相关联，因此我会遵循该指南的约定。

每当我必须决定语义与通用名称时，我的一般启发式方法是：

- 如果页面模板已经有可能的先例，请遵循该先例; - 如果涉及的元素是页面布局的新部分（而不是呈现到布局区域中的内容查询），并且模板中没有指导模式，则div用于将该页面布局行为与其关联。 - 如果内容是动态创建的（即在请求时实例化到布局中的任何内容-帖子、导航、大多数小部件），则将其包装在能最好描述该项的语义包装器中（而不是如何出现）； - 撰写或生成内容时，请根据需要在其中使用语义HTML5标记（使用hgroup来包括层次标题、使用section来组织文章中的块等）。这是搜索的未来增强。

根据所有这些，除非您的页面模板已经建立了不同的小部件包装器，否则div作为您的小部件包装器是可以接受的。此外，您使用标题元素创建大号粗体外观的用途是为了外观而不是为了语义。既然您的特定用法是出于外观考虑，那么最好使用div或带有CSS类的span，以便您可以根据需要指定大小、间距和其他装饰品，而无需覆盖标题元素的默认值。我会将标题元素保存用于页面标题、小部件标题以及页面主要内容区域内的标题。标题不是主要内容的一部分，因此可能存在SEO排名问题。

我希望这些想法对您考虑HTML5标记使用有所帮助。

- Don Day

Answer 2

就标记语言的语义而言，唐的建议是有道理的。（正如你所说，你的CTA在视觉上位于主要内容旁边，并且次于该内容，我会选择aside，但没有单一正确答案。）

然而，你用"seo"标记了你的问题，所以我想你对使用正确的标记语言获得SEO好处很感兴趣。目前，Google并不会特别重视使用良好的语义标记——他们不关心像aside、section和div这样的标记之间的区别。这可能部分是因为这些标记的含义仍在被定义（通过Web开发人员的实践），但他们甚至似乎忽略那些明显与搜索结果相关的标记（比如nav，它几乎总是与页面的描述无关）。

相反，他们强烈推荐使用微数据来标记丰富的语义。短期内，使用Schema.org WebPage 微数据标记您的页面可能会提供更大的好处。您可以将CTA标记为relatedLink或significantLink，并将其保留在页面的mainContent之外。如果您想优化搜索页面，这是一个很好的方法---根据我的经验，Google很少显示搜索结果描述中mainContent块之外的文本。

- s3cur3

Answer 3

适当的标记取决于实际内容，而您并没有提供。话虽如此，无论您的内容是什么，将所有内容包装在div中都是可以的（尽管可能是不必要的），因为

标签没有语义价值。您的两个示例可能是不正确的，除非您的“呼吁行动”确实是一篇完整的文章（我觉得这不是情况）。呼吁行动可能出现在

内部，但呼吁行动不太可能是aside本身。再次强调，这取决于内容（它是什么）和上下文（与其他内容的关系在哪里）。通常，“呼吁行动”是某个链接，所以对我来说，显而易见的答案是使用锚点。

- Wesley Murch

---

我已经为我的问题添加了一些上下文。感谢您的帮助！ - Raphael Rafatpanah

很难确定，它可能是一个侧边栏或者属于页面的主要内容。根据规范，我不认为它应该是一个“section”：“一般规则是只有在元素的内容在文档大纲中被明确列出时，section元素才是适当的”，但也不排除这种情况的存在。我想这取决于你自己，如果一定要选的话，那么可能是“aside”或“section”，绝对不会是一个单独的“article”，但它可能在某个“article”内有意义。由你决定，看起来你知道你在做什么。 - Wesley Murch

Answer 4

这只是一个指向另一个页面的链接。请使用 div。

- Mark Simpson