HTML and CSS Reference
In-Depth Information
Marking Grouping Content
• To mark a heading, enter
<h
n
>
content
</h
n
>
where
n
is an integer from 1 to 6 and
content
is the text of the heading.
• To mark a paragraph, enter
<p>
content
</p>
• To mark a block quote, enter
<blockquote>
content
</blockquote>
To see how these headings appear on your computer, use the demo page.
To view heading elements:
◗
1.
Click in the blue box in the lower-left corner of the demo page, type
<h1>The
J-Prop Shop</h1>
and then press the
Enter
key to go to a new line.
◗
2.
Type
<h2>Quality Juggling and Circus Props</h2>
.
◗
3.
Click the
Preview Code
button located below the blue code window. Your
browser displays a preview of how this code would appear in your Web browser
(see Figure 1-14).
Figure 1-14
Previewing h1 and h2 headings
h1 and h2 headings
click to preview
the H
T
ML code
h1 and h2 headings as
rendered by the browser
Trouble?
If you are using a browser other than Internet Explorer 9 running
on Windows 7, your screen might look slightly different from that shown in
Figure 1-14.
◗
4.
To see how an
h3
heading would look, change the opening tag for the store
description from
<h2>
to
<h3>
and change the closing tag from
</h2>
to
</h3>
.
Click the
Preview Code
button again.
Your browser renders the code again, this time with the store information displayed
in a smaller font. If you continued to change the heading element from
h3
to each
of the elements down to
h6
, you would see the second line in the Preview box get
progressively smaller.
