5

我是 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 的使用，或者有更好的方法？

4

4 回答 4

7

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

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

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

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

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

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

于 2013-02-19T18:34:53.550 回答
3

就标记的语义而言，Don 的建议是有道理的。（正如您所说，您的 CTA 在视觉上位于主要内容旁边，次要于该内容，我赞成aside，但没有一个正确的答案。）

但是，您已经用“seo”标记了您的问题，所以我认为您对使用正确标记的 SEO 好处感兴趣。目前，Google 并没有特别重视良好的语义标记——他们不关心aside,section和div. 这可能部分是因为这些标签的含义仍在定义中（通过 Web 开发人员的实践），但它们甚至似乎忽略了明显相关的搜索结果的标签（例如nav，几乎总是与页面的描述无关搜索结果）。

Instead, they heavily favor using microdata for marking up rich semantics. In the short term, marking your page up using the Schema.org WebPage microdata will likely provide greater benefit. You can mark your CTA as a relatedLink or significantLink, and keep it outside the mainContent of the page. If you're looking to optimize your page for search, this is a great way to do it---in my experience, Google very rarely shows text outside of your mainContent block in the search results description.

于 2013-02-21T17:03:06.380 回答
1

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

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

号召性用语可能发生在 中<aside>，但号召性用语不太可能是旁白本身。再一次，这取决于内容（它是什么）和上下文（它与其他内容的关系）。

通常，“号召性用语”是某处的链接，因此对我来说显而易见的答案是使用锚点，<a>.

于 2013-02-19T01:13:28.983 回答
0

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

于 2013-02-19T01:12:53.463 回答