HTML5 hgroup Tag Deprecated

The "hgroup" element was introduced into the working draft to allow the grouping of one or more headline tags (h1 - h6) to be used for section headlines + subtitles, subheadings or tag lines.

As HTML5 is still a working draft changes can and are made on a regular basis when elements are found to be inappropriate, not thoroughly thought through or simply of no real use (this statement is simplified - there is a lot more than that).

With the removal of the "hgroup" tag from the HTML5 spec. we face a problem, as do many thousands of others do, who have made use of the tag in their HTML source code.

What this means for those who use our templates:

We have started to use different HTML mark-up / formatting, meaning future templates will not have the "hgroup" tag in them.

The majority of the free HTML5 website templates that can be found on our site (as of publishing this document) use the "hgroup" tag and will in turn be updated, but, due to our workload, this could take some time to accomplish.

You may now think what will happen to my website, don't get worried, browsers will support the "hgroup" tag for quite some time to come, simply because the tag is deprecated doesn't mean it won't display properly in your browser(s).

If you would like to update your template yourself you can follow the example below (we have used the "RS-4 Clean" template for this demo):

Steps to Take

Step 1:

Locate the "hgroup" code found in the header:

<div class="wrapper row1"> <header id="header"> <hgroup> <h1><a href="#">RS-4 Clean</a></h1> <h2>Free Responsive Website Template</h2> </hgroup> </header> </div>

There is other HTML mark-up in the header tag, but that's not of interest for this example, so it has been removed.

Step 2:

Change the hgroup tag:

<div class="wrapper row1"> <header id="header"> <div id="hgroup"> <h1><a href="#">RS-4 Clean</a></h1> <h2>Free Responsive Website Template</h2> </div> </header> </div>

As you can see above, we have changed the "hgroup" tag into a "div" tag and given it an "id" of "hgroup" - you can of course add your own name, it doesn't have to be "hgroup" we have used the name for ease of use, as you will see shortly in the CSS modifications.

We have modified the tag, now we have to modify the CSS that controls the appearance of the tag.

Step 3:

Find and modify the CSS for the "hgroup" in the header:

(The following code can be found in the "layout.css" file - for this template)

#header hgroup{ display:block; width:100%; margin-bottom:40px; text-align:center; } #header hgroup h1, #header hgroup h2{ margin:0; font-weight:normal; text-transform:none; } #header hgroup h1{ font-size:3em; margin-bottom:15px; } #header hgroup h2{ font-size:1em; }

You can see from the following code that the changes are simple, in this case we have simply added a "#" in front of the word "hgroup" which indicates an "id" - we now no-longer reference the "hgroup" tag, we now reference an element with the "id" = "hgroup".

#header #hgroup{ display:block; width:100%; margin-bottom:40px; text-align:center; } #header #hgroup h1, #header #hgroup h2{ margin:0; font-weight:normal; text-transform:none; } #header #hgroup h1{ font-size:3em; margin-bottom:15px; } #header #hgroup h2{ font-size:1em; }

If you intend on using a name of your own, you will have to modify the code as such:

#header #nameofchoice{ display:block; width:100%; margin-bottom:40px; text-align:center; } #header #nameofchoice h1, #header #nameofchoice h2{ margin:0; font-weight:normal; text-transform:none; } #header #nameofchoice h1{ font-size:3em; margin-bottom:15px; } #header #nameofchoice h2{ font-size:1em; }

Replace "nameofchoice" with the name you have given to the "div" in the header.

Conclusion:

As soon as you have modified the HTML files and the CSS, clear your browser cache and refresh your website page.

If all has gone well, you shouldn't see any difference at all - if there is a difference, check the changes have been made correctly, clear browser cache and refresh the page again.

NOTES:

Some HTML coders will now say that the code is not semantically correct, which is true, the "<h2>" is now no-longer in the correct document / tag flow.

If you are worried about HTML semantics and want to ensure the header code is 100% semantically correct, we suggest you change the "h2" tag into a "p" tag and make the appropriate changes to the CSS.

The CSS for the "h2" is in the "hgroup" CSS block, as shown in our example(s) above, all you need to do is simply change "h2" into "p" e.g.

From:

#header #hgroup h2{ font-size:1em; }

To:

#header #hgroup p{ font-size:1em; }