[Turtle91]

To specifically address the nested <div>s question:

There is nothing technically wrong with using nested <div>s. The book will pass inspection and display properly.

The issue is using tags that are not semantically correct. Some parsers rely on the correct tags to work - the parser can't tell the difference between <div> and <div class="header">... For example, some accessibility software wouldn't be able to do it's job properly if it can't tell the difference between a header and a div.

When editing your code, especially if you plan on doing a lot of it, it makes it much easier if you don't have to mentally parse what the heck is going on. With simple html you can just see the blond, brunette, red-head.

Spoiler:

Using CSS, both of the options below can display identically, but which would you rather see (and have the renderer crunch through):

<div class="blockquote">
  <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%;
    font-size:1.0rem"> <span style=" font-size:1.0rem">Roses are red,</span></p>
  <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%;
    font-size:1.0rem"> <span style=" font-size:1.0rem">Violets are blue,</span></p>
  <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%;
    font-size:1.0rem"> <span style=" font-size:1.0rem">This HTML
    <span class="italic">sucks</span>,</span></p>
  <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%;
    font-size:1.0rem"> <span style=" font-size:1.0rem">So…what can you do?</span></p>
</div>

-OR-

<div class="poem">
  <p>Roses are red,</p>
  <p>Violets are blue,</p>
  <p>This HTML <em>sucks</em>,</p>
  <p>So…what can you do?</p>
</div>

In this case I used <em> so that a TTS device would actually emphasize the word, rather than using <i> which would simply slant the letters slightly.