Basic Html Heading and hgroup tag.

Heading tags are used in any part of the document to be published as a theme or title. It has six heading text. H1 is the large size of heading tags and H2 is the small size. At first, open the default software on your computer to understand the subject of heading tag practically. Then click start> notepad. When open the notepad and then you will see the following image.

Here enter the code inside the body tag. HTML tags are not case sensitive . So you can write tags as shown below . As you I write h1  or H1 tags in the body tag so  HTML page looks like this.

HTML CODE DISPLAY IN BROWSERS
<html>
<body>
<h1>Heading 1</h1> <br/>
<H1>Heading 1</H1>
</body>
</html>

Heading 1

Heading 1

If you want to see in the web browser, open the file the default software – Windows Explorer from your computer. If you do not open, then go to the file location where saved the file and double-click on the file.

Then you can see the file in your browser.

You can come back again to your Notepad code window and Change the 1’ into 3’s.

Save the change and go back to your existing browser. Then press F5 to refresh the page. You can see it in the below. Example :

Heading 1

In this way the header tags to write h4, h5 and h6 display in a browser to comparing a tag to another tag when you use a tag importantly.

You can also use the heading tags with CSS. As a result, it will look more beautiful on your web pages.

An example is given below for clear concept of heading tags :

HTML CODE DISPLAY IN BROWSERS
<html>
<body>
<h1>heading tag 1</h1>
<h2>heading tag 2</h2>
<h3>heading tag 3</h3>
<h4>heading tag 4</h4>
<h5>heading tag 5</h5>
<h6>heading tag 6</h6>
</body>
</html>

   heading tag 1

    heading tag 2

    heading tag 3

     heading tag 4

     heading tag 5
      heading tag 6

 

<hgroup> tag

This tag is a new addition to html5.  Usually this tag is used for wrapping the element from <h1> to <h2>. This element is quite useful to create a group in multi headers.

The syntax used for this is <hgroup> h1 to h6 tag will go here </ hgroup. But this element should not be used more than two headings.

One of the new elements mentioned in HTML5 is <hgroup>, used for grouping titles with their related subtitles. However, why do we require <hgroup> once we’ve already got the <header> element? In this article, we’ll do our best to reply that question.

 

What is <hgroup> element?

The <hgroup> tag is usually used to group a set of at least one or a lot of h1-h6 elements — to group, can be a locality title and an accompanying subtitle.

So what will that mean?

<hgroup> acts as a wrapper for  one or a lot of  related heading elements likely contained in a <header> element. It will only contain a group of <h1>–<h6> element(s), and ought to be used for subtitles, alternative titles and tag lines.

syntax :

<hgroup>

<h1>…………………</h1>

<h2>…………………</h2>

</hgroup>

The simplest way to show proper use of <hgroup> is through a few examples.

An article with one title:

The title consists of a single <h1>, therefore neither <hgroup> nor <header>is needed.

<article>
<h1>Title goes here</h1>
<p>Text or images can be included here</p>
</article>

An article with a title and metadata:

Here we’re using <header> to group the title and related metadata, so an <hgroup> is not needed:

<article>
<header>
<h1>Title goes here</h1>
<p><time datetime=”2010-03-20″>20th March, 2010</time></p>
</header>
<p>Text or images can be included here</p>
</article>

An article with a title and subtitle:

An <hgroup> contains the title and subtitle in this article:

<article>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p>Text or images can be included here</p>
</article>

An article with a title, subtitle and metadata:

An <hgroup> element includes the title and subtitle of the article, then a <header> element includes the metadata and also the <hgroup>:

<article>
<header>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p><time datetime=”2017-03-20″>20th March, 2017</time></p>
</header>
<p>Text or images can be included here</p>
</article>

In this article, we’ve shown how to utilize the <hgroup> element adequately.

    1. If you have a title with one heading element <h1> – </h6>, you need not with a <hgroup> element.
    2. If you have a title with subtitle or tag lines (<h1> – </h6>), group them in an <hgroup>.
    3. Suppose you have a title with subtitle and another metadata related with the segment or article, put both the <hgroup> tag inside a single <header> element.

 

7 thoughts on “Basic Html Heading and hgroup tag.

  1. After study a couple of the blog posts on your own site now, and I actually like your manner
    of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls check out my web site also and let me know
    what you believe.

    Feel free to visit my weblog; shadow fight 2 hack android (http://www.darkhacks24.com)

  2. I used to be very happy to search out this internet-site.I needed to thanks in your time for this glorious read!! I positively having fun with each little bit of it and I’ve you bookmarked to take a look at new stuff you weblog post.

Leave a Reply

Your email address will not be published. Required fields are marked *