HTML5. Can I improve this? Are the semantics correct?

Question

  </header>
  <!--content start-->
  <div role="main">
    <div id="slider">
    <ul id="sliderContent">
        <li class="sliderData">
            <header>
                <h2>Some relevant title</h2>
            </header>
            <p>Lorem ipsum.... </p>
            <a href="#">read more...</a>
        </li>

This is what i've written so far. is it best practice?

Answer 1

I would maybe replace the h2 tag with em and remove the wrapping header tag(unless you want it part of your seo). If your slider content contains an image you could us figure and figcaption.

<li class="sliderData">
    <figure>
        <img src="" alt="" />
        <figcaption>
            <em class="header">Some relevant title</em>
        </figcaption>
    </figure>

    <p>Lorem ipsum.... </p>
    <a href="#">read more...</a>
</li>

Note that you don't need to give ids and classes to every element, CSS selectors are more powerful than that. Selecting the li in your code is simply done with ul#sliderContent li. Your div is also probably useless: the <ul> was enough.

Answer 2

I think you should replace <div role="main:> with <nav>