草庐IT

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

coder 2024-02-27 原文

我是 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 的方式,或者有更好的方法吗?

最佳答案

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

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

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

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

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

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

关于seo - 什么 HTML5 标签应该用于 "Call to Action"Div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14948151/

有关seo - 什么 HTML5 标签应该用于 "Call to Action"Div?的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  3. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  4. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  5. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  6. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  7. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  8. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  9. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996?但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  10. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

随机推荐