Path // www.yourhtmlsource.com → Text → HEADINGS AND FONT SIZE

Headings and Font Size

by Ross Shannon

In order to give your documents correct structure, you should use graded HTML heading tags to show the main points and subpoints of the page. The font tag described below is no longer used, so it's only here for completeness.

Clock This page was last updated on 2012-08-21


Headings

In the beginning, heading tags were invented as a graded method of information layout and division. You used big headings for the main points in a page and go down through the numbers. There are 6 gradings or levels of HTML headings: <h1> to <h6>. Graphically, these create decreasingly large text, with h1 being the biggest, and h6 being the smallest of the group.

So let's see them!

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Oh, that's my cue. Ok: here are the examples:

You just wrap the preferred heading tag around the text, like so:

<h3>Heading 3</h3>

The text will then appear bold and big. One thing to note is that headings are always apart from the rest of your text, like a paragraph. This is a property of block-level tags. You cannot flow headings and normal text together. If you want text to follow straight away, you should just change the font size and not use a heading.

sourcetip: Headings take on the color and font face of the surrounding text, so you can change a headings color, say, by wrapping a font color around the h tag. Read this tutorial on font and color for more.

Headings can also be aligned. Values are center, justify, left or right.

Changing the font size

FUTURE WATCH:

Ever since HTML 4.0 came out in 1998, the <font> tag has been deprecated. This means that it should not be used anymore, since we have the vastly superior stylesheets at our disposal to format the text in our HTML pages.

Somewhat tragically, there has been very little decline in <font> tag usage since then, so many years ago. To this end, I strongly discourage you from using the <font> tag at all in your HTML. It is highly restrictive and can add multiple kilobytes to the filesizes of every one of your HTML files.

CSS on the other hand, gives you far more control over how your text looks, and adds almost nothing to your download times. If you have yet to tackle stylesheets at all, don't be afraid — they're really not all that hard to get to grips with. Read the introduction to stylesheets, and then CSS and text and you'll never look back.

Further reading:

The following is just a description of how the <font> tag used to work. Since you won't be using it, of course, you should read this purely out of interest.

There are two ways to denote the size you want your text: relatively and definitely. Relative sizes mean that if all the other text is normal sized, your will be relatively big or small, in relation to the rest. The tag and attribute for this is
<font size="x">.

<font size="+2">text</font>
<font size="-2">text</font>

You have a range between +6 to +1 and -1 to -6. Plus 1 and minus 1 will be the ones you'll use most. As shortcuts to these two sizes, there are the tags <big></big> and <small></small>, which helps.

Now absolute or definite sizes. This is similar, but you only have between 1 and 7. The default font size is 3. Most sites will stick with size 3 or 2 (the text you're now reading is probably at size 2).

<font size="2">text</font>

Try to stay away from really small text, as it's always too hard to read and big text can swamp a page. Get a balance going on.