There's not a ‘con’ to using them per se. There's a ‘con’ to using them for the wrong thing. They have often been used for the wrong thing in web pages in the past, but that doesn't mean there's no right thing.
<i>
is semantically equivalent to <span style="font-style: italic">
: that is to say, there is no semantic content. A word inside <i>...</i>
is not more important; a web page text-to-speech converter shouldn't(*) read that word in an emphasised tone of voice.
When you want to emphasise a word, like ‘definitely’ in this sentence, you should definitely use <em>
. This is the common case. But when you merely want a typographical detail, such as italicising a block of text just for visual purposes, or typographical quirks like always refering to your site as “ThingsWorld!”, <em>
isn't suitable and you'd want the semantics-free version (the <i>
or the <span>
).
Similarly, <strong>
is suitable for “for the wrong thing” above as it is meant to be strongly emphasised. If you just wanted part of the text to be rendered in bold, without implying that it is more important than the surrounding text, you'd use <b>
or, again, styles on another element like <span>
or <div>
.
A common use for <i>
and <b>
is when you are taking text from an unsemantic source. In particular it is common to be importing content from a word processor or similar application where there is no concept of emphasis as such, only ‘italic’ and ‘bold’. In this case <i>
and <b>
(or the span equivalents) are appropriate, because you don't know what the semantic intent behind those text styles is; that information is already lost.
If you auto-converted all italics to <em>
like many tools do, you might be marking up italics that aren't meant to represent emphasis. For example references to other works, which would be better marked up with <cite>
, or words/phrases from another language such as Latin or French, which would be better marked up with <span lang>
(and associated style to tell it words from another language should be italicised).
<small>
and <big>
might theoretically be the same case, but whilst imported text with bold/italic in is common, imported sized text isn't. Consequently no-one uses these tags and you're generally better off with the normal CSS font-size styles.
<br>
and <hr>
are arguably not presentational in the same way that the above tags are. A line break can be an important part of content (eg. in separating lines in an address), and a horizontal rule represents a stronger separation between sections of text than a mere paragraph. Of course if you use <br>
to create fake paragraphs you're doing it wrong (and you're David Siegel circa 1998), and using an <hr>
just to get a nice little line that's not right either.
(*: illustrative example; finding out what real screen readers actually do is left as an exercise for the reader.)