Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Structural Meaning

Problem You want to identify the structure of a document using blocks.^

Solution Blocks define the structure of a document, and the structure of a document helps readers and computers
understand the meaning of a document. Everything in a document is related. The block structure
identifies the order and intensity of the relationships. The more elements you wrap around content, the
more closely it relates to ancestors and siblings.
HTML makes four assumptions about the meaning of document structure:

1. A parent element defines the topic of its children.


2. Siblings are ordered unless the parent element specifies otherwise.


3. As the hierarchy deepens, meaning becomes more focused and connected.


4. All content in the document body is related. Content in a division or a form is more closely related.
   Content in lists is even more closely related. Content in tables is the most closely related.
   Two types of structures exist in HTML: hierarchies and sets. You create hierarchies by nesting elements.
   You create sets by placing multiple elements inside a parent. There are two types of sets: ordered and
   unordered.
   Each structure in HTML starts out as a hierarchy and ends in a set.
   For example, a table creates a hierarchy of nested rows and cells. Within that hierarchy, a table contains an
   ordered set of rows, and each row contains an ordered set of cells. Cells in the same column are related,
   and cells in the same row are related. Because a cell is the intersection of a row and a column, it ties
   together the meaning of both. As a result, content in tables is most strongly related (that is why it is called
   relational data).
   Take another example: a list starts out as a hierarchy where a parent list element contains a set of list
   items. An ordered list contains an ordered set of related list items. An unordered list contains an
   unordered set of related list items. A dictionary list is an associative entity containing an unordered set of
   related terms and definitions. Lists can be nested within each other to create a hierarchy of lists. You can
   put content in lists when you want it to be more strongly related than content in the document body, a
   division, or a form.
   As a final example, a division organizes headings and paragraphs into a series of related topics where each
   heading introduces an ordered series of related paragraphs. Divisions can be nested to create a hierarchy
   of subtopics.

Pattern ^

HTML

Location This pattern applies to block elements.

Related to Visual Structure; HTML Structure, Structural Block Elements, Terminal Block Elements, Multi-purpose
Block Elements (Chapter 2)