I tweeted a question the other day about nesting <em> and <a> tags, to figure out which is better:
<em><a href="#">blah</a></em>or
<a href="#"><em>blah</em></a>Both are valid HTML, and browsers render them the same way. I’m also pretty sure that I’ve used them interchangeably in the past, and that I’ve asked myself the “which way is right?” question many times before. But enough! It’s time for me to have a definitive answer based on solid reasoning, not just an arbitrary decision, so that if I ever forget, I can retrace the logical steps and come to the same answer every time.
For me, the primary use case for nesting tags like this is to hyperlink book, film, or album titles. I wrap these titles in an <i> tag rather than an <em> tag. (See Oli Studholme’s article at HTML5 Doctor for an in-depth look at the semantic differences between the two.) Like so:
<a href="http://www.allmusic.com/album/clockwork-angels-mw0002332023"><i>Clockwork Angels</i></a>It was Vasilis who pointed out that the correct order of the nesting becomes immediately apparent if you add more text, only some of which belongs inside the inner tag:
<a href="http://us.macmillan.com/redshirts/JohnScalzi"><i>Redshirts</i> by John Scalzi</a>So that’s the answer: for linked titles (or ship names, or taxonomic designations), the link always goes on the outside.