HTML and CSS Reference
In-Depth Information
Working with Grouping Elements
You're now ready to begin entering content into the body of Dave's Web page. The fi rst
elements you'll add are grouping elements , which are elements that contain content that
is viewed as a distinct block within the Web page. Paragraphs, which were presented in
the last session, are one example of a grouping element, as are page divisions marked
using the div element. Figure 1-13 lists some of the commonly used grouping elements.
Figure 1-13
Grouping elements
Grouping Element
Contact information (usually rendered as italicized text)
An extended quotation (usually indented from the left and right margins)
A definition from a description list
A generic grouping element
A description list
A definition term from a description list
A figure or illustration (HTML5 only)
The caption of a figure, which must be nested within the figure element
(HTML5 only)
A heading, where n is a value from 1 to 6, with h1 as the most prominent
heading and h6 the least prominent (usually displayed in bold text)
h n
A list item from an ordered or unordered list
An ordered list
A paragraph
Preformatted text, retaining all white space and special characters (usually
displayed in a fixed width font)
An unordered list
To explore how grouping elements are typically rendered by your Web browser, a
demo page has been prepared for you.
To open the HTML Tags demo page:
1. Use your browser to open the demo_html.htm file from the tutorial.01\demo
2. If your browser prompts you to allow code from the Web page to be run, click the
Allow blocked content button.
Marking Content Headings
The fi rst grouping elements you'll explore are heading elements , which contain the text
of main headings on a Web page. They're often used for introducing new topics or for
dividing the page into topical sections. The syntax to mark a heading element is
<h n > content </h n >
where n is an integer from 1 to 6. Content marked with <h1> tags is considered a
major heading, and is usually displayed in large bold text. Content marked with <h2>
through <h6> tags is used for subheadings, and is usually displayed in progressively
smaller bold text.
Search WWH ::

Custom Search