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

Question

我是HTML5的新手,我想知道哪个HTML5标签应该用在Call to Action div上,该div位于主页上主要内容旁边的一列中.

选项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

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

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

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

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