trjhtr

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>

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.

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>