Header Tags serve a simple purpose. They set apart a string of text and bring it to your attention. Well... really all they do is define the size of your text and bold it all in one easy step. This is useful for title text and so forth.
Be warned though: Header Tags ALSO place a blank line above AND below the text.
This can make placing text around a Header a little challenging if you are not aware of this rather annoying property. When I first started coding HTML I would often wind up with an extra blank line I could not get rid of and I had no idea where it was coming from. Nobody ever told me that Headers inserted a blank line above and below themselves. So, now I am telling you...:)
CODING THE HEADER TAGS:
Header Tags allow you to assign one of 6 sizes to your text. The 6 Header Tags are written like this:
Header 1: <H1> Testing the Header Tags </H1>
This tag will give you the largest text and looks like this:
Testing the Header Tags
Header 2: <H2> Testing the Header Tags </H2>
This tag will give you the second largest text and looks like this:
Testing the Header Tags
Header 3: <H3> Testing the Header Tags </H3>
This tag will give you the third largest text and looks like this:
Testing the Header Tags
Header 4: <H4> Testing the Header Tags </H4>
This tag will give you the fourth largest text and looks like this:
Testing the Header Tags
Header 5: <H5> Testing the Header Tags </H5>
This tag will give you the fifth largest text and looks like this:
Testing the Header Tags
Header 6: <H6> Testing the Header Tags </H6>
This tag will give you the sixth and smallest text and looks like this:
Testing the Header Tags
THAT ANNOYING BLANK LINE THING:
To illustrate that annoying 'extra blank line' property I was telling you about, here are two blocks of text. I have provided the coding for both examples for you:
Roses Are Red<br>
Violets Are Blue<br>
I Ran Out of Ideas Here
This will display in your browser as:
Roses Are Red
Violets Are Blue
I Ran Out of Ideas Here
As you can see there are no blank lines and the text is displayed correctly.
Now let's code in the same text and apply a Header Tag to the second line of text:
Roses Are Red
<H3>Violets Are Blue</H3>
I Ran Out of Ideas Here
This will display in your browser as:
Roses Are Red
Violets Are Blue
I Ran Out of Ideas Here
As you can see, the text in the Header is bolded, and has those darned blank lines above and below! The easy way around this is to just use the Font Tag and assign a bigger size and then bold the text. You get the exact same effect without those stupid extra blank lines!
