Headings

In this blog post I would like to explain what HTML Heading Tags are, and how to use them.

HTML Heading Tags <h1>...</h1> are used for creating titles that can be used for articles, paragraphs and other web page sections. Heading tags can be used anywhere within a web page that seems appropriate for a title to be placed at. Heading elements are defined using the <h#> tag, where # is the font size number.

Heading elements have predefined font sizes, from <h1> being the largest to <h6> being the smallest:

• <h1> Heading Text Example

• <h2> Heading Text Example

• <h3> Heading Text Example

• <h4> Heading Text Example

• <h5> Heading Text Example

• <h6> Heading Text Example

Example use of H1 tags:

<h1>Heading Text Example</h1>
				

The text contained within header tags are usually short, only four or five words at most. You should not write long sentences or paragraphs entirely in header tags, because that is simply not the purpose for header tags.

Some search engine optimizations (SEO), such as Google and Bing, deliberately look for a web pages <h1> in particular, since the <h1> is usually used to denote the main section of that web page, even though most people don't like to use <h1> tags because they are very large in font size.

One way to get around this problem is to restyle the <h1> tag. In this way your web page still has it for the SEO crawlers to find, and yet still display a smaller font size as to your liking. For example :

<h1 style="font-size:16px;">Heading Text Example</h1>
				

In this manner, you specify how large the font size within the header tag should be. In this example we set the font size of this H1 header tag to be 16 pixels in size:

The heading element can also contain other elements within it, which gives you even more control of how they will appear and look on the web page. For example:

<h2>Heading <label style="font-size:12px;">Label</label> More Heading</h2>
			

The heading element tag can also be styled with different background colors, text colors, shadows, font family, font size, font weights, etc..., so that you can fully customize the heading elements to appear and look more like what you actually want them to look like. For example:

<h2><i>Some</i> <span style="color:red;">Styles</span> Examples <span style="font-size:12px;">For</span> <span style="background-color:yellow;color:green;">Headings</span></h2>
			

Final Thoughts

The Heading element is very useful for making all types of attractive titles for your web page.

Thank you for reading. I hope you found this code example helpful and useful in some way.

	(0)
	(0)