XHTML Tutorial #2 - Text Elements, Page 2
Header elements
Header elements may be even more important than paragraph elements. Some search engines are reported to use the text in header elements to establish keywords for searching. Whether or not this is true, headers can be used to highlight different sections of your XHTML page and make it easier for the user to find what they are looking for.
Headers come in different sizes, numbered 1 to 6. It's a good practice to use headers like titles of sections and subsections without skipping numbers. For example <h1> for the main sections, <h2> for sections within the main sections, <h3> for subsections within the sections, etc.
It's actually kind of rare to see <h4>, <h5> and <h6> used.
Let's create a page to show the various header tags. Open your favorite text editor and enter the following code. Save the file as example_2c.htm. If you need help saving the file, check back with Tutorial #1 here.
<html>
<head>
<title>Example 2C - Header Tags </title>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>
<p>This is regular paragraph text</p>
</body>
</html>
Now open this example in your favorite browser. It should look something like this:
The browser has interpreted the different header levels and displayed them using the defaults built into the browser. We added the paragraph text to show it in comparison to the headers. In our browser, it appears that headers 5 and 6 are actually a little smaller than the paragraph text, and all the headers are actually in a different font, as well as bold text.
Please note again that we have not applied any styling to these header elements. Also remember that different browsers will render the various header levels differently.
On the next page of this tutorial, we will look at an element that isn't really a text element, but aids in the display of text on the page.
Additional resources
BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:
- Link to us
- Tell a friend
- Correct any you might find
- Make for improvement
- Make a donation
BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.
For further information please review our Terms of Use and Privacy Policy.
Copyright 2005-2008 CrystalClearWeb.net. All rights reserved.
