CHAPTER 13 ■ BLOCKSSection
Problem You want to organize your document into sections, and you want to style various sections
differently.
Solution HTML provides the section element to identify sections of a document. A section is generic
and has no meaning by itself. A section is a part of a document that contains content
relating to a specific theme or purpose. A section normally contains a heading followed by
blocks of supporting statements that are logically related to each other. Subsections are
often nested within sections to identify subthemes relating to the theme of the parent
section.
Any heading element can be used, such as
, , , , , and . The
heading level identifies the relative importance of the section. is the most important
heading in a document. Following the heading are blocks of content and subsections.
This design pattern imposes no constraints on the structure of sections and subsections,
other than each section should contain a heading as its first content-containing child
element. I use the phrase “content-containing child element” because a section may
contain any number of decorative child elements, such as divisions and spans, prior to the
heading. Such decorative child elements could be used to layer background images behind
the section, for example.
, , , and . The
heading level identifies the relative importance of the section. is the most important
heading in a document. Following the heading are blocks of content and subsections.
This design pattern imposes no constraints on the structure of sections and subsections,
other than each section should contain a heading as its first content-containing child
element. I use the phrase “content-containing child element” because a section may
contain any number of decorative child elements, such as divisions and spans, prior to the
heading. Such decorative child elements could be used to layer background images behind
the section, for example.
, and . The
heading level identifies the relative importance of the section. is the most important
heading in a document. Following the heading are blocks of content and subsections.
This design pattern imposes no constraints on the structure of sections and subsections,
other than each section should contain a heading as its first content-containing child
element. I use the phrase “content-containing child element” because a section may
contain any number of decorative child elements, such as divisions and spans, prior to the
heading. Such decorative child elements could be used to layer background images behind
the section, for example.
heading level identifies the relative importance of the section.
is the most important
heading in a document. Following the heading are blocks of content and subsections.
This design pattern imposes no constraints on the structure of sections and subsections,
other than each section should contain a heading as its first content-containing child
element. I use the phrase “content-containing child element” because a section may
contain any number of decorative child elements, such as divisions and spans, prior to the
heading. Such decorative child elements could be used to layer background images behind
the section, for example.
Pattern
HTML
<section class="TYPE">
<HEADING> content </HEADING>
<BLOCK> content </BLOCK>
...
</section>CSSsection { STYLES }
section.TYPE { STYLES }
section.TYPE HEADING { STYLES }
section.TYPE BLOCK { STYLES }
section section { STYLES }Location This pattern applies to block elements.
Tips There are no limits to the names you can use to classify your sections. Here are a few
examples: callout, caution, content, example, figure, introduction, listing, note, quote,
summary, table, tip, and warning. For 200 more examples, see the file Common Section
Names.txt in the example folder.
Related to Structural Meaning, Run-In; Floating Section (Chapter 17)^