Headings and Subheadings
<h1>Heading...</h1><h2>Sub-Heading...</h2><h3>Sub-Heading...</h3><h4>Sub-Heading...</h4><h5>Sub-Heading...</h5><h6>Sub-Heading...</h6>If you would like to format the text on your web pages into titles and subtitles, you don't have to use the
font element and the size attribute. Instead of using size 6 bold text for the title of your page, you can use the h1 element which will accomplish the same thing.You can also use the
h2 element to create smaller subheadings (font size 5, bold) or the h3 element to create an even smaller subheading (font size 4, bold). This goes on down the line to the lowest heading level, h6, which equates to font size 1, bold. The following table will illustrate:
<h1>...</h1>Heading...
<h2>...</h2>Sub-Heading...
<h3>...</h3>Sub-Heading...
<h4>...</h4>Sub-Heading...
<h5>...</h5>Sub-Heading...
<h6>...</h6>Sub-Heading...
To create a heading, place your heading text between the heading tags according to the desired size as per above. For example, a heading that you would normally place at the top of your web page (and quite often mirrors the same text used in the
title element) would use the <h1>...</h1> tags:Example 1 - SOURCE CODE
<h1>My Home Page</h1>
Example 1 - RESULT
Each heading element (
h1, h2, h3, etc...) is a block element and performs like a paragraph by separating itself from other block elements with a line of blank space.Moreover, text placed within heading tags are given special treatment by search engines crawling the web looking for keywords to associate with your web page. For this reason (and if it matters to you how search engines categorize your page) it is important to use headings properly and in the right order. In other words always use
<h1>...</h1> tags for the first heading on your web page, <h2>...</h2> tags for the next smaller size subheading, <h3>...</h3> tags for the next smaller, etcetera.
We'll conclude this section by learning how to create the mother of all web page effects, the hyperlink...
| <~ BACK | TOP | NEXT ~> |
