HTML and CSS Reference
In-Depth Information
Now let's use the
<hgroup>
element and two heading elements to complete the main feature section on the home
page.
The code for this exercise can be found in the download code for Chapter 4, folder 1.
Follow these steps:
1.
Open the
index.html
file.
2.
Locate the
<section>
element in your code that has the ID
feature
.
3.
Delete the dummy text that you added to this element in Chapter 2 (“The Main Feature Banner Goes Here”).
4.
Create a new
<hgroup>
element within the
<section>
element.
5.
Create a new
<h1>
element within the
<hgroup>
element.
6.
Add the following text to this new
<h1>
element:
New York's Best Pizza
7.
Create a new
<h2>
element underneath the
<h1>
that you just created.
8.
Add the following text to this new
<h2>
element:
joe's pepperoni special
9.
Save the
index.html
file.
The code for your main feature section should look like this:
<!-- Feature -->
<section id="feature">
<hgroup>
<h1>New York's Best Pizza</h1>
<h2>joe's pepperoni special</h2>
</hgroup>
</section>
Now take a look at the
index.html
file in your web browser; you will see that the main feature now has a main
heading and a subtitle, as shown in Figure 4-1.
