On this page:
Block level elements as layout elements
Block level elements contain inline elements or other block level elements. Therefore they form the framework for the page layout. Block level elements can be looked at in a number of ways:
Block level elements that initiate blocks
These elements provide the basic page layout.
- horizontal rule: hr
- headings: h1, h2, h3, h4, h5, h6
- paragraph: p
- block quotation: blockquote
- generic block-level container: div
- lists: ul (unordered list), ol (ordered list), dl (definition list)
- tables: table
Block level elements that can contain inline elements
These elements present text and inline images.
- elements that can contain only inline elements:
- headings: h1, h2, h3, h4, h5, h6
- paragraph: p
- elements that can contain inline or block level elements:
- list elements: li (list item), dt (definition term), dd (definition description)
- generic block-level container: div
- table cells: th (header cell), td (data cell)
Block level elements that can contain block level elements
These elements provide for more elaborate page layouts. Containing elements that can contain general block level elements can be thought of (more or less) as "mini-pages".
- elements that can contain general block level elements:
- generic block-level container: div
- block quotation: blockquote
- list elements: li (list item), dt (definition term), dd (definition description)
- table cells: th (header cell), td (data cell)
- elements that can contain only specialized, prescribed elements:
- lists: ul (unordered list), ol (ordered list), dl (definition list)
- tables: table
- table elements: tbody (table body), thead (table head), tfoot (table foot), tr (table row)
In practice we use only the generic div for the mini-page concept. It is common practice to use table data cells (td's) for this purpose, but we believe that this approach is becoming out-dated.
Block level elements that are empty
This element acts as a generic section divider.
- horizontal rule: hr
A block level element is rendered by browsers on a new line (within the containing element), often (natively) with an upper and lower margin. Exceptions are "floating" blocks (including our sidebars and imageboxes - see custom block level elements) which reserve the space required for them, and allow other content to flow around them.
Our grouping of block level elements
We organize these block level elements for documentation purposes into three groups:
- Basic block level elements
- headings: h1, h2, h3, h4, h5, h6
- paragraph: p
- text-block: a custom div
- block quotation: blockquote
- horizontal rule: hr
- block-divider: a custom div
- division-compact: a custom div
- Custom block level elements (custom div's)
- sidebars
- imageboxes
- crossbars
- bicolumns
- Organizational block level elements
- lists: ul (unordered list), ol (ordered list), dl (definition list)
- tables: table