HTML Code Tutorial

Tutor Ebook Download

The Header Tag

You can Test Code in : HTML editor

<h1>The Header Tag</h1>

Use header tags to introduce web pages and paragraphs. The words The Header Tag at the top of this page are an example of its use.

One advantage to using the Header tag is that some search engines rate them higher than regular text, when indexing your site.

They come in six default sizes. (Largest to smallest)

Header tags should be used in their respective order of default size. That means following an h1 tag with an h2 for proper page structure. Don't put an h1 and an h4 on the same page with nothing in between. Try to include keywords in your header tags.

<h1>Ice Creams Flavors</h1>
<p>Brief introduction</p>
<h2>Chocolate</h2>
<p>Paragraph about chocolate flavor.</p>
<h2>Vanilla</h2>
<p>Paragraph about vanilla</p>

Font family, size, alignment, fore and background color can all be set using Style Sheets.
Examples:

Background Color

You can make a header tag a little more interesting by adding color.

Adding Background Color

The code:
<h1 STYLE="font-family: Arial;font-style : italic ;font-size : 14pt; font-weight :bold;text-align : left; color :#000000;background-color :#7696CB; width : 300px">Adding Background Color</h1>

You can even add borders:

Heading Text

The code:
<h1 style="font-family: arial, serif; font-size:16pt; text-align:center; width: 250px; display:block; padding:5px; color:#ffff00; background-color:#ff0000; border: solid #000000 2px">Heading Text</h1>

To make the header appear the same in all browser types,be sure to include the width setting.

Contents

Page Structure

Text Controls

Tables

Forms

Frames

Miscellaneous

You can Test Code in : HTML editor

Take a Quiz on this Information.

Check out our Free Frames Template Kit or try our Free Frames Kit Demo

CGI Online
How to Create a Website -Tutorial
Create a Web Site