Semantics markup for home sliders

Question

Is there a "best" or more suitable markup to home sliders?

I have the following markup. Since my sliders are related to articles, I decided to put article as the main container.

Note: I am using Owl Slider to convert what is inside .home-slider actually in a slider.

<section class="home-slider">
 <!-- Slide One -->
 <article>
 <h1>Title</h1>
 <h2>Little Description</h2>
 <a href="">Call to Action Link</a>
 </article>
 <!-- slide Two -->
 <article>
 <h1>Title</h1>
 <h2>Little Description</h2>
 <a href="">Call to Action Link</a>
 </article>
</section>

• Malachi: What makes your "sliders" slide? I think that we may need a little more context to be able to give you a proper review.
• Abiel Muren: Hello, I use Owl Carousel like this: home-slider owl-carousel and all the ´<article>´ get converted to slides. owl carousel preserves the markup.

Answer 1

For me the main semantic question is whether you should have a section containing articles or an article containing sections. Or perhaps even an article containing other sub-articles.

From the HTML spec:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

It really comes down to the content of your articles and sections.

• If each slide could be viewed as an independent thing, then marking them with article seems fine.
• If however, you'd expect the slides to be viewed in sequence as in slide show, I'd say the slides should be sections instead.

Answer 2

If you want to follow the advice from the HTML spec, you should use the heading element that represents the actual rank, not a h1. It doesn’t matter for user agents that support the outline algorithm, but it can matter for older user agents, especially for accessibility.

The description shouldn’t be in a heading element. Otherwise the following content (in your case: the link) would be in scope of this description, not in scope of the top heading. Use p instead.

For the link, you could use the bookmark link type, if it goes to the page that has the full content that this slide is a teaser for.

So a slide could use this markup (assuming that the slider appears on the level below the page’s h1):

<article>
 <h2>Title</h2>
 <p>Little Description</p>
 <a href="" rel="bookmark">Call to Action Link</a>
</article>