In some cases, you might want to group the <h1> to <h6> elements together. As an example, you may want to create a section title that uses an <h1> element. Then, right under that, place a subtitle that uses the <h2> element. In HTML5, you can group the <h1> and <h2> elements in a new structural element called <hgroup>.
The structural <hgroup></hgroup> gives you the ability to show that you are grouping headings (<h1> to
<h6>) together for needs such as alternative titles and subheadings.
In this case, <h1> and <h2> headings were used within the <hgroup>.
<header><span style="color:red;font-style:italic;">
Baking Cheesecakes
</span>
<hr>
</header><hgroup draggable="true"><h1>Cheesecake Tips and Techniques</h1>
<h2>Professional Tips</h2>
</hgroup><aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">
To create a water bath, use a pan that will allow you to fill it with boiling water that
goes halfway up the spring form pan in which the cake is placed.
</aside>
<p>
When baking a cheesecake, it is important not to over bake it. You only want to bake it
until the middle has a slight wiggle, not until it is rock solid.
</p>
<p>It is important that you use a water bath, discussed at the right, to ensure even baking of
your cheesecake.</p>
Notice that we placed the <hgroup> element below the <header></header> element. While this is not required, it is a good practice. You can use the <hgroup> element in any section of the HTML5 document.
In a well-built HTML5 document, the <hgroup></hgroup> element is a great way to tie together various headings and subheadings. This is especially true if you are using the <article></article> element. You are assured then that any headings and their connected subheadings will move as a group.
0 comments:
Post a Comment