Which of these is better semantically?

Question

In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.

An example body:

<header>
    <div class="center">
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </div>
</header>
<div>
    <section>
        ...
    </section>
</div>
<footer>
    <div class="center">
        ...
    </div>
</footer>

.center {
   max-width: 70em;
   margin: 0 auto;
}

header {
   width: 100%
   background-color: red;
}

footer {
   width: 100%
   background-color: green;
}

body > div {
   width: 100%
   background-color: blue;
}

Is it actually better like this?

<div id="head">
    <header>
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </header>
</div>
<div>
    <section>
        ...
    </section>
</div>
<div id="foot">
    <footer>
        ...
    </footer>
</div>

Answer 1

As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.

What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).