CHAPTER 13 ■ BLOCKSVisual Structure
Problem You want to reveal the structure of a document visually.^
Solution CSS provides a number of ways you can style blocks to reveal document structure. You can
put vertical margins between blocks or use first-line indents to visually separate content
into blocks. You can put bullets or numbers in a block’s margin to enumerate blocks. You
can use margins, borders, and padding to put boxes around blocks to reveal how they are
nested inside each other. You can also assign font sizes to heading levels so that headings
with a larger scope have a larger font size—this can reveal the nesting of blocks without
having to put them inside boxes.
You can help the user see the structural meaning of a document by visually styling the
structure. To emphasize a close structural relationship, you can position elements closer
together and give them a similar look. For example, elements inside lists and tables have a
similar look to show they belong together. To set elements apart, you can position them
further apart and style them differently. For example, lists, tables, and blocks have different
default styles to emphasize the different meanings of their structures. Also, unordered lists
use bullets to point out that their items are unordered.
To create a consistent look and feel, it is a common practice to apply a standard set of styles
to all blocks of the same type. For example, you may want all paragraphs and list items to
have a 2-pixel vertical padding. In your style sheet, you can select all elements of a certain
type or all elements of a certain class and style them as desired. This is demonstrated in the
example.
Occasionally, you may want to change the space between two specific blocks. You can bring
them closer together to emphasize the closeness of their relationship or push them further
apart to emphasize their differences. Structurally, you are styling the space between the
blocks. Since the relationship is not part of either block, but is between the blocks, it is more
structurally accurate and simpler to insert a spacer block than it is to style the margin of one
of the two blocks as an exception to its normal styling.
HTML provides the
element for the purpose of inserting a structural break between
blocks (and
to insert a line break between inlines). The Horizontal Rule design
pattern shows how to use and style
.
When you want to insert a structural break that is not as strong as a horizontal rule or you
want to bring two blocks closer together, you can use the Block Spacer and Block Space
Remover design patterns.
Using a horizontal rule, a block spacer, or a block space remover should be the exception,
not the norm. The structural meaning of breaks and links between elements is not as strong
as nested structures.
You may want to merge two blocks to emphasize a very close relationship between them.
This is explored in the Inlined and Run-In design patterns.
Related to Structural Meaning, Horizontal Rule, Block Spacer, Block Space Remover