seo - 什么 HTML5 标签应该用于 "Call to Action"Div？

Question

我是 HTML5 的新手，想知道应该在位于主页主要内容旁边的列中的号召性用语 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">(781) 729-2213</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 的方式，或者有更好的方法吗？

Answer 1

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

在我的应用程序中，我对反射(reflect) View 布局(即创建页面之间整体一致性的模板)和内容本身的标记有不同的考虑 (通常是任何函数或查询结果在被插入到布局中的各个区域之前接收额外的标记)。这种区别很重要，因为布局元素语义(如页眉、页脚和旁边)在搜索过程中并不能真正帮助区分内容，因为该标记通常在页面之间重复。我特别喜欢使用 HTML5 中的语义区别来描述用户实际搜索的内容。例如，我通常使用 article 来包装主要内容，并使用 nav 来包装任何关联的链接列表。小部件包装器通常与页面布局相关联，因此我会遵循该指南的模板约定。

每当我必须决定语义名称还是通用名称时，我的一般启发式是:

• 如果页面模板中已有可能的先例，请遵循该先例；
• 如果相关元素是页面布局的新部分(相对于呈现到布局区域中的内容查询)并且模板中已经没有引导模式，则 div 可以很好地关联该页面布局行为到;
• 如果内容是动态创建的(即在请求时实例化到布局中的任何内容——帖子、导航、大多数小部件)，请将其包装在最能描述该项目是什么的语义包装器中(相对于您如何认为它应该出现)
• 无论何时创作或生成内容，都应在该内容中适当使用语义 HTML5 标记(hgroup 以括起分层标题，section 以组织文章中的 block ，等等)。这是面向 future 的搜索丰富内容。

根据所有这些，除非您的页面模板已经建立了一个不同的小部件包装器，否则 div 可以作为您的小部件的包装器。此外，您使用标题元素在小部件中创建大而粗的外观是在外观上使用标记，而不是在语义上使用标记。由于您的特定用法是外观驱动的，因此最好将 div 或 span 与 CSS 类一起使用，这些类可以让您根据需要为该非特定文本指定大小、间距和其他修饰，而不必覆盖浏览器的默认值标题元素。我将为页面标题、小部件标题和页面主要内容区域内的标题保存标题元素。滥用不属于主要内容的标题可能会导致 SEO 排名问题。

我希望这些想法有助于您考虑 HTML5 标记的使用。