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">(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经济的宽容性意味着您可以建立对您的应用程序最有意义的约定。

在我的应用程序中，我对标记有不同的注意事项，这些注意事项反映了视图的布局（即，从页面到页面创建整体一致性的模板）与内容本身（通常是任何在插入布局中的各个区域之前接收额外标记的函数或查询结果）。区别很重要，因为布局元素语义（如页眉，页脚和旁边）在搜索期间不能真正帮助区分内容，因为标记通常在页面之间重复。我特别喜欢使用HTML5中的语义区别来描述用户实际搜索的内容。例如，我通常使用article来包装主内容和nav来包装任何相关的链接列表。窗口小部件包装器通常与页面布局相关联，因此我将使用该指南的模板约定。

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

如果页面模板中已有可能的先例，请遵循该先例;
如果相关元素是页面布局的新部分（相对于在布局中呈现为区域的内容查询）并且模板中没有引导模式，则div可用于关联该页面布局行为至;
如果内容是动态创建的（即在请求时实例化到布局中的任何内容 - 帖子，导航，大多数小部件），请将其包装在最能描述该项目内容的语义包装中（与您的方式相比）认为应该出现）
每当创作或生成内容时，在该内容中适当使用语义HTML5标记（hgroup用于组合层次标题，用于组织文章中的块等部分）。这是一种面向未来的搜索增益。

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

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

Answer 2

就标记的语义而言，Don的建议是有道理的。（正如你所说，你的CTA在视觉上与主要内容并列在内容之后，我赞成aside，但没有一个正确答案。）

但是，你用“seo”标记了你的问题，所以我认为你对使用正确标记的SEO好处感兴趣。在这个时候，谷歌没有特别重视拥有漂亮的语义标记 - 他们不关心aside，section和div之类的区别。这可能部分是因为这些标签的含义仍然被定义（通过Web开发者的实践），但他们甚至似乎忽略了明显相关的搜索结果的标签（如nav，这几乎总是无关紧要的到搜索结果中的页面描述）。

相反，他们非常赞成using microdata来标记丰富的语义。在短期内，使用Schema.org WebPage微数据标记您的页面可能会带来更大的好处。您可以将CTA标记为relatedLink或significantLink，并将其保留在页面的mainContent之外。如果您希望针对搜索优化您的网页，这是一种很好的方式 - 根据我的经验，Google很少在搜索结果说明中显示mainContent块之外的文字。

Answer 3

正确的标记取决于您未提供的实际内容。

也就是说，无论你的内容是什么，将div中的所有东西都包装好（尽管可能是不必要的），因为<div>标签没有语义价值。你的两个例子可能不正确，除非你的“号召性用语”实际上是整篇文章（我怀疑是这样）。

号召性用语可能会在<aside>内发生，但行动召唤不太可能。再一次，这取决于内容（它是什么）和 context （它与其他内容的关系）。

通常情况下，“号召性用语”是一个链接，因此对我来说显而易见的答案是使用锚<a>。

Answer 4

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

什么HTML5标签应该用于“号召性用语”Div？

4 个答案: