HTML Techniques-06
1.2 Structural grouping
Checkpoints in this section:
- 12.3 Divide large blocks of information into more manageable
groups where natural and appropriate. [Priority 2]
The following HTML 4.01 mechanisms group content and make it easier to
understand.:
- Use FIELDSET to group form
controls into semantic units and describe the group with the LEGEND element. - Use OPTGROUP to organize long lists of menu options into smaller
groups.. - Use tables for tabular data and describe the table
with CAPTION. - Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP.
- Nest lists with UL, OL, and DL.
- Use section headings (H1 - H6) to create structured
documents and break up long stretches of text. Refer to the following section
for more information. - Break up lines of text into paragraphs (with the P
element). - Group related links. Refer to the section Grouping
and bypassing links
All of these grouping mechanisms should be used when appropriate and
natural, i.e., when the information lends itself to logical groups. Content
developers should not create groups randomly, as this will confuse all users.
1.2.1 Section
headings
Checkpoints in this section:
- 3.5 Use header elements to convey document structure and use
them according to specification. [Priority 2]
Long documents are often divided into a variety of chapters, chapters have
subtopics and subtopics are divided into various sections, sections into
paragraphs, etc. These semantic chunks of information make up the structure of
the document.
Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to
improve presentation (e.g., the HR element to create a
horizontal dividing line), but visual presentation is not sufficient to
identify document sections.
Since some users skim through a document by navigating its headings, it is
important to use them appropriately to convey document structure. Users should
order heading elements properly. For example, in HTML, H2 elements should
follow H1 elements, H3 elements should follow H2 elements, etc. Content
developers should not "skip" levels (e.g., H1 directly to H3). Do not use
headings to create font effects; use style sheets to
change font styles for example.
Note that in HTML, heading elements (H1 - H6) only start sections, they
don't contain them as element content. The following HTML markup shows how
style sheets may be used to control the appearance of a heading and the content
that follows:
Example.
<HEAD>
<TITLE>Cooking techniques</TITLE>
<STYLE type="text/css">
/* Indent heading and following content */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
<BODY>
<H1>Cooking techniques</H1>
... some text here ...
<DIV class="section2">
<H2>Cooking with oil</H2>
... text of the section ...
</DIV>
<DIV class="section2">
<H2>Cooking with butter</H2>
... text of the section ...
</DIV>
End example.
