When I first started out I wanted my docs to be as clean as possible and always used <i> and <b>. After studying a bit more I've been convinced that I should keep only structure tags in the document and all styling in the .css. I really hated adding those <em> and <strong> tags!! I still use <i> and <b> when coding...and then just do a S/R to change them at the end - that way I don't have to look at the <em> and <strong> tags taking up that extra room!! Whatever works right!!
I like your second example...but this would be better:
Code:
<p>This is done <em class="underscore">nicer</em> more normally.</p>
with
p {"normal paragraph styling"}
em.underscore {text-decoration:underline; font-style:normal}
Since the <em> tag is specifically designed to emphasize some text...its only that most readers default to italics. When we are defining the structure of the document we should simply say that particular words are emphasized with a given class.
Now...in that particular case a span would work just as well, but it would be 4 letters longer (2 for each tag). Depending on the book, 4 letters per italics can add up to a bunch of bloat.
Now imagine using <span class="italics">...</span> as opposed to <em>...</em> (with em {font-style:italic} ); that's 22 letters longer per instance!!
I suppose I'm being a little OCD-ish, but I just hate the idea of taking up more space than I absolutely have to. I just cleaned up a book I bought (it's amazing how many bad practices they do in a "professional" book) and reduced the file size from 3.3MB to 1.2MB....I did a happy dance...literally. Yes, I need a life!
Cheers!