Thursday, 15 August 2013

seo - What HTML5 Tag Should be Used for a "Call to Action" Div? -



seo - What HTML5 Tag Should be Used for a "Call to Action" Div? -

i new html5 , wondering html5 tag should used on phone call action div sits in column next main content on home page.

option 1:

<aside> //call action </aside>

option 2:

<article> <section> //call action </section> </article>

the reason inquire because don't see either alternative beingness perfect fit. perhaps missing something. thanks!

my html phone call action:

<section class="box"> <hgroup> <h1 class="side">call now</h1> <h2 class="side">to schedule 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 bob!</h4> </hgroup> <img class="responsive" src="img/satisfaction-guarantee.png" alt="100% satisfaction guarantee"> <p class="side">we guarantee thrilled our services or money back!</p> </section>

this box on right column of 3 column layout. content in big middle column gives summary of company's services. if wanted utilize services, have schedule pick-up, hence phone call action.

does object utilize of html5, or have improve way?

my take best practices new html5 structural elements still beingness worked out, , forgiving nature of new html5 economic scheme means can found conventions create sense application.

in applications, have separate considerations markup reflects the layout of view (that is, template creates overall consistency page page) versus the content itself (usually function or query results receive additional markup before beingness inserted various regions in layout). distinction matters because layout element semantics (like header, footer, , aside) don't help differentiation of content during search since markup repeated page page. particularly favor using semantic distinctions in html5 describe content user searching on. illustration utilize article wrap primary content , nav wrap associated list of links. widget wrappers tied page layout, i'd go convention of template guideline.

whenever have decide on semantic vs generic names, general heuristic is:

if there possible precedent in page template, follow precedent; if element in question new part of page layout (vs content query rendered part in layout) , there no guiding pattern in template already, div fine associating page layout behavior to; if content created dynamically (that is, gets instanced layout @ request time--posts, navigation, widgets), wrap in semantic wrapper best describes item (vs how think should appear) whenever authoring or generating content, utilize semantic html5 markup appropriate within content (hgroup bracket hierarchical headings, section organize chunks within article, etc.). future-proof enrichment search.

according this, div fine wrapper widget unless page template establishes different widget wrapper. also, utilize of heading elements creating large, bold appearance within widget using markup appearance rather semantics. since particular usage appearance-motivated, improve utilize divs or spans css classes can allow specify sizes, spacing, , other adornments needed non-specific text rather having override browser defaults heading elements. i'd save heading elements page heading, widget headings, , headings within primary content part of page. there can seo ranking issues misuse of headings not part of main content.

i hope these ideas help in consideration of html5 markup usage.

seo html5

No comments:

Post a Comment