html tutorials web design help css tutorials free web graphics diy search engine optimization


Headings serve to draw attention to important points, to break up long passages of text into sections that seem less wearisome to read, to label various sections of page content, and for search engine optimization.

Headings come in six different sizes. From largest to smallest, they are written as:

<h1> heading text here </h1>
<h2> heading text here </h2>
<h3> heading text here </h3>
<h4> heading text here </h4>
<h5> heading text here </h5>
<h6> heading text here </h6>
Here's what the heading sizes look like on a web page:

As you can see there is a good deal of space in between each heading. A heading creates a blank line above and below itself, so headings generally can't be used to create larger text for emphasis within the flow of a sentence, although CSS can be used to change that behavior.

The reason these headings have text flowing beside them is because it's really an image of headings you're looking at, although there are other ways to create the same text flow. I used an image instead of real headings because I use CSS to reprogram my heading sizes. You can learn how to do that in the Advanced CSS Text Formatting section of the tutorials in Inner Circle member site.

The way headings are used online is similar to the way titles and subtitles are used in a newspaper article or magazine column, with the title being written using a larger heading and subtitles using smaller headings.

Typically, the h1 through h3 size headings are displayed in a larger font than normal. An h4 heading is the same size as the default text only in a heavier font weight, and h5 and h6 are smaller than normal text. All are usually rendered in bold type, although some browsers may deviate from that and render them in italics, underlined, or in some other manner to bring emphasis to the heading text.

The h1 through h4 headings are typically used for titles and subtitles. The h5 and h6 are seldom used because they are so small, which makes them appropriate for use in disclaimers, copyright notices and other boilerplate messages.

That's the heads up on headings, now go buy me something cool.

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)