Heading Tags

Earlier, I showed you how to mark plain paragraphs of text in HTML using the P tag.

Example:

<p>Here is a paragraph of text</p>

<p>Here is another paragraph of text.</p>

Paragraphs alone are not enough to lay out text, of course. When you want to create headings in the course of text, you will use variations on the H, or heading, tag.

Headings would be used to label sections or subsections in a document; you've already seen headings at work in this very page. Here's an example:

<h2>Important Stuff</h2>

<p>Look at this area! We are filled with important stuff!.</p>

<h3>More Detailed Stuff</h3>

<p>This sub-section is filled with more detailed stuff!</p>

<p>Look at all the paragraphs which are needed to describe this more detailed stuff. This must be very very important stuff, too!</p>

Here's what the above example would look like:

Important Stuff

Look at this area! We are filled with important stuff!.

More Detailed Stuff

This sub-section is filled with more detailed stuff!

Look at all the paragraphs which are needed to describe this more detailed stuff. This must be very very important stuff, too!

Tags: H1, H2, H3, H4, H5, H6
Description: Creates headings and sub-headings for a document. Always closes.

Example:

<h2>Important Stuff</h2>

There are six heading tags: H1, H2, H3, H4, H5, and H6. H1 has the largest font size, H6 has the smallest font size. Heading tags automatically make text bold, and align to the left of an HTML page, just as paragraphs do. Heading tags automatically create line spacing following themselves; this following space grows smaller as the H tag numbers grow larger. Heading tags don't require extra BR tags to set themselves off from surrounding materials; they do this automatically as well. Heading tags ALWAYS close.

Here is a link to a page which demonstrates all of the heading tags in action, without the interference of the CSS style sheet which has been applied to THIS page.

Heading tags and paragraph tags are the workhorses of everyday HTML coding. Almost every page on the Web contains headings and paragraphs of one sort or another. Don't be concerned that these tags have limited variety in layout; right now, we're just learning about them in their default states. We'll learn more about controlling the position and appearance of heading and paragraph tags in later modules.

Main Menu