A web page containing just a paragraph (or even several paragraphs) would be really boring to look at and difficult to work out what the page is about. To resolve this problem and break up our page content we can add some headings.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<h1>Top Heading</h1>
<h2>Section One</h2>
<p>The content of our page appears below the heading.</p>
<p>We can have multiple paragraphs in the same page. Each paragraph is enclosed in its own paragraph container.</p>
<h2>Section Two</h2>
<p>The content for the second section goes here.</p>

Here's what the Headings page looks like in your web browser.

What we have done here is to define a heading one container at the top of the body section of our page so as to place a heading above the paragraphs of text. We also have two heading two containers to break our document up into two parts. (We have also added some more paragraphs of content).

Notice that the heading text appears much larger than the paragraph text and is bold. How it looks though isn't the important thing because you can always change how your page looks once it is done using cascading stylesheets (see separate tutorial series). The important thing with marking up your web page content is in defining what the things are - in this instance defining a top heading, two section headings, and three paragraphs.

To allow us to define separate levels of headings to correspond to the sections and sub-sections we can define headings using level numbers between 1 and 6 (<h1> <h2> <h3> <h4> <h5> and <h6>). Level 1 is for the main heading at the top of the page. Levels 2 through 6 provide progressively lower level headings that can be used to subdivide your document.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow