Page Headings

Open up your web page in a text editor.

You should see the following:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>This is my very first web page.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic,
text</em></strong></p>
</body>
</html>

Now, immediately after the <body> tag, press the ENTER key and then type in the following:

<h1>Welcome to My Page!</h1>

You should now see:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<p>This is my very first web page.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Resave your web page and then view it in your web browser. If you still have it loaded in the browser window just select Refresh to view the updated version.

You have just added a page heading!

Headings

There are 6 heading tags in HTML.

They are numbered

<h1>,<h2>,<h3>,<h4>,<h5> and <h6>

Each one is accompanied with their respective closing tags(eg. <h1>...</h1> etc.

This is an h1 heading!

This is an h2 heading!

This is an h3 heading!

This is an h4 heading!

This is an h5 heading!
This is an h6 heading!

Whenever you use a heading tag, the browser automatically adds an extra blank line before and after the displayed heading text.

Try this:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Play around with different heading tags to get a feel for the displayed text size.