Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 144

Nest Inline Elements inside Block Elements
Give every inline element a block-level parent, and remove all block-level elements from paragraphs.
Do you like this picture?<br />
<img src="file.gif" alt="Goose" width='100' height='100'/>
I think it's really <em>neat</em>.<br />
<p>Do you like this picture?</p>
<div>
<img src="file.gif" alt="Goose" width='100' height='100'/>
</div>
<p>I think it's really <em>neat</em>.</p>
Motivation
To be valid, it is not sufficient that all the elements in a document be legal XHTML strict elements. They must
also have the right relationships to each other. Browsers and other programs depend on correct placement. For
instance, an li element must always be a child of a ul or ol element, and each ul or ol element must have at
least one li child. Blockquotes can contain paragraphs, but paragraphs can't contain blockquotes.
Although browsers will display documents that violate these structure rules, they may interpret them differently.
Furthermore, this sort of invalidity can even more seriously confuse editors and other non-browser tools that
attempt to work with the HTML. For instance, as I write this, some people are having problems because
WordPress is rewriting their markup in unexpected ways to try to fix blockquote/paragraph nesting issues.
When paragraphs or block-level elements are not found where they're expected, browsers and other tools guess
where they should insert extra content to make them fit. They don't always guess right, and they don't always
guess the same. This causes problems designing cross-browser CSS and JavaScript. Nesting your elements
correctly helps browsers and tools to process a document consistently.
Potential Trade-offs
None. Browsers deal inconsistently with poorly structured pages. Reorganizing them will give much more
consistent behavior across browsers.
Mechanics
The main body of an HTML page consists of several kinds of elements plus text:
Paragraphs: p , pre
Block-level elements: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 ,
hr , noscript , ol , table , ul