Semantically structured HTML5 for a news page

Question

I'm developing a website and I cut the images that I will use:

<div class="news-top">
     <p>CSS contains the top image</p>
</div>
<div class="news-center">
    <p>CSS contains the center image (repeat-y)</p>
</div> 
<div class="news-bottom">
  <p>CSS contains the bottom image</p>
</div>

And inside news-center class I have .news-content class. Inside .news-content I have this structure:

<div class="news-center">
    <div class="news-content">
       <h1>CodeReview</h1>
        <div class="news-content-words">
          <p>Semantic HTML5</p>
        </div>
    </div>
</div> 

But I want to use HTML5 markup, so I made this. Is it right?

<section class="news-section">
     <div class="news-top">
         <p>CSS contains the top image</p>
    </div>
    <div class="news-center">
        <article class="news-content">
            <header><h1>News Title</h1></header>
            <div class="news-text">
               <p>Lorem ipsum doler si amet</p>
            </div>
          <footer>News autor, news tags, etc..</footer>   
        </article>
    </div> 
    <div class="news-bottom">
      <p>CSS contains the bottom image</p>
    </div>
</section>

Answer 1

As div elements have no meaning, we can ignore them for deciding which markup to use in your case. So your structure would be:

<section class="news-section">

  <p>CSS contains the top image</p>

  <article class="news-content">
    <header><h1>News Title</h1></header>
    <p>Lorem ipsum doler si amet</p>
    <footer>News autor, news tags, etc..</footer>   
  </article>

  <p>CSS contains the bottom image</p>

</section>

If .news-section represents a section that can contain multiple article elements, this seems to be appropriate. But if it always contains a single news entry, you should omit the section.

It’s recommended to use heading elements of the appropriate rank (instead of h1 everywhere). So your h1 would at least (depending on where you include this snippet) be a h3.

Using the header is fine, but you may also omit it if you don’t need it for something specifically (e.g., for grouping some more header content for the news content).

It’s only appropriate to use CSS for including images if these images are decorative. If they represent relevant content, you should use HTML to include them (e.g., in the img element). If the images are decorative and if you need a separate HTML element to include them, you should use a div instead of p (but if you use the p for some other purpose, it’s of course good to use it for the CSS image in addition, if possible).

So a typical news section that contains several news entries could look like this:

<section>
  <h2>News</h2>

  <article>
    <header>
      <h3>Foo</h3>
    </header>
    <p></p>
    <footer>
      <!-- … -->
    </footer>
  </article>

  <article>
    <header>
      <h3>Bar</h3>
    </header>
    <p></p>
    <footer>
      <!-- … -->
    </footer>
  </article>

</section>

If this news list represents the main content for that page, you can use the main element, e.g.:

<main>
  <section>
    <!-- … -->
  </section>
</main>