Search

6/09/2008

Nest Inline Elements inside Block Elements

Give every inline element a block-level parent, and remove all block-level elements from paragraphs.

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.

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
* Inline elements: a, abbr, acronym, b, bdo, br, cite, code, dfn, em, img, input, label, q, samp, select, span, strong, sub, sup, textarea, var
* Miscellaneous elements: button, del, iframe, ins, map, object, script
* Context-limited elements: li, dt, dd, tr, th, td, tbody, input, select
* Raw text; a.k.a. PCDATA

A p element represents a paragraph. However, unlike other block-level elements, a p may not contain another p or another block element such as blockquote. It can only contain plain text and inline elements. It is in some sense the lowest block-level element.

The pre element is also special in this way. It can contain inline elements, but not other block elements.

沒有留言: