What HTML5 tag should I use for the Call to Action Div?

Question

I'm new to HTML5, and I wonder what HTML5 tag should be used in the Call to Action div, which is in the column next to the main content on the main page.

Option 1:

<aside> //call to action </aside> 

Option 2:

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

The reason I ask is because I don’t see any option being perfect. Maybe I'm missing something. Thanks!

My HTML to call:

  <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">[phone]</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> 

This field is in the right column of three columns. The content in the large middle column gives a summary of the company's services. If you want to use these services, you will have to plan a collection, therefore, a call to action.

Does anyone mind this use of HTML5 or has a better way?

Answer 1

I believe that the best methods for the new HTML5 building blocks are still being developed, and the forgiving nature of the new HTML5 economy means that you can establish the conventions that make the most sense for your application.

In my applications, I have separate markup considerations that reflect the layout of the view (i.e. a template that creates overall consistency from page to page) compared to the content itself (usually this is any function or query results that get additional markup before insertion into various areas of the layout). The difference is because the semantics of the layout element (for example, the header, footer, and to the side) do not actually help in delimiting the content during the search, since this markup usually repeats from page to page. I particularly welcome the use of semantic differences in HTML5 to describe the content that the user is actually looking for. For example, I usually use an article to wrap my main content and navigation to carry any linked list of links. Widget wrappers are usually tied to the page layout, so I would go with the template convention for this guide.

Whenever I have to choose semantic or common names, my general heuristic is this:

• If there is a possible use case in the page template, follow this use case;
• If the item in question is a new part of the page layout (compared to the content request that is displayed in the region in the layout) and there is no control template in the template, the div is great for matching this behavior of the page layout to;
• If the content is created dynamically (that is, everything that falls into the layout during the request - messages, navigation, most widgets), wrap it in a semantic shell that best describes what this element is (against what you think it is should appear)
• Whenever you create or create content, use HTML5 semantic markup according to that content (hgroup to copy hierarchical headings, section to arrange snippets within an article, etc.). This is a reliable enrichment for the search.

Accordingly, a div will be beautiful as a wrapper for your widget if your page template no longer sets another widget wrapper. In addition, using header elements to create a large, bold look in widgets uses markup for the look, not the semantics. Since your particular use is motivated in appearance, it would be better to use divs or spans with CSS classes that allow you to specify sizes, spacing and other decorations as needed for this non-specific text, rather than overriding the browser defaults for header elements. I would keep the title elements for the page title, widget titles and headings in the main content area of ​​the page. There may be problems with SEO ranking for misuse of headings that are not part of the main content.

I hope these ideas help you consider using HTML5 markup.

Answer 2

As the markup semantics go, Don’s advice makes sense. (As you said, your CTA was visually next to the main content and secondary to this content, I would prefer aside , but there is not a single correct answer.)

However, you marked your question with "seo", so I suggest that you are interested in the benefits of SEO when using the correct markup. Currently, Google does not pay much attention to beautiful semantic markup - they do not care about the differences between things like aside , section and div . This may be partly because the meaning of these tags is still determined (by the practice of web developers), but they even seem to ignore tags that are clearly relevant to the search results (for example, nav , which will almost always be irrelevant for the description of the page in the search results )

Instead, they strongly prefer to use microdata to mark up rich semantics. In the short term, tagging your page using Schema.org WebPage chips is likely to be of great benefit. You can mark your CTA as relatedLink or significantLink and leave it outside the mainContent on the page. If you want to optimize your page for search, this is a great way to do this. In my experience, Google very rarely displays text outside of your mainContent block in the description of the search results.

Answer 3

Proper markup depends on actual content that you have not provided.

However, wrapping everything in a div is fine (although perhaps not necessary), regardless of your content, since the <div> tag has no semantic meaning. Perhaps your two examples are incorrect if your “call to action” is not literally an entire article (of which I doubt).

A call to action can occur within <aside> , but it is unlikely that the call to action is aloof. Once again, it depends on the content (what it is) and the context (where it refers to other content).

Usually a “call to action” is a link somewhere, so the obvious answer for me is a binding, <a> .

Answer 4

This is just a link to another page. Use div.