Create a Free Website

HTML Code Tutorial


The Header Tag


The code:
<h1>The Header Tag</h1>


Use the header tag to introduce web pages and paragraphs. The words HTML Code Tutorial 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)


<h1></h1> through <h6></h6>


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.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



<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.

Note: for W3C compliance use pixels (px) when setting font-size.
Examples:

h1 {
font-family: Arial Black, serif ;
font-size : 18px;
font-weight : normal;
text-align :center
}

h2 {
font-family: Times New Roman, serif ;
font-size : 16px;
font-weight : normal;
color :#FF0000;
background :#FFFF00
}

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, serif;font-style : italic ;font-size : 20px; text-align : center; color :#000000;background :#7696CB; width : 300px; padding: 10px 10px">Adding Background Color</h1>

You can even add borders:

Heading Text

The code:
<h1 style="font-family: arial, serif; font-size:20px; text-align:center; width: 250px; display:block; padding:5px 5px; color:#ffff00; background:#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. For liquid headers use percentages for width settings.


You can Test Code in this HTML editor.

Take a quiz. Take a Quiz on this Information.