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
Description
address
Contact information (usually rendered as
italicized
text)
blockquote
An extended quotation (usually indented from the left and right margins)
A definition from a description list
dd
A generic grouping element
div
dl
A description list
A definition term from a description list
dt
A figure or illustration (HTML5 only)
figure
figcaption
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
li
ol
An ordered list
p
A paragraph
Preformatted text, retaining all white space and special characters (usually
displayed in a
fixed width
font)
pre
ul
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
folder.
◗
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.
