'My second page' - a basic HTML recipe
[September 2008] The last Tip introduced a little basic HTML, showing you how to make paragraphs and emphasise a few words. In this Tip we add a few headings and link to another website.
Please reread that first Tip to refresh your memory.
Headings summarise chunks of text.
Readers understand a message best when it's broken up into shorter chunks with headings that quickly convey what each chunk is about.
Actually the word 'heading' is a bit misleading — headings are dull and boring. Often they are phrases such as 'Introduction' or 'Membership Benefits'.
Really good headings are much more like newspaper headlines — they summarise what each section is about.
Examples.
| Heading |
Headline |
| Introduction |
Basic HTML is easy and useful |
| Getting Started |
You need a text editor and browser |
If you give readers lots of good headlines they more quickly and easily understand any page of text, whether it's printed or online. And Google also gains a better idea of what your page is about, making it easier for visitors to find your quality information.
The princely 'h1' and the lowly 'h6'.
Your web designer should really use the princely 'h1' tags for the main headings across your website, and maybe 'h2' tags for the main heading on each page. That means you'll probably be using the noble 'h3' and 'h4' headings.
The 1, 2, 3 and 4 aren't connected to the sequence, but to the importance. The most important heading on your website is the one that tells the visitor the name of the site. Usually that happens to come at the top of each page, but that's just life. It's like a monarch preceding all others into a room.
The next most important heading should be the one that describes the page the visitor is viewing: About Us, Resources, Services — that kind of thing. As it happens that's usually near the top of the page too.
In this Tip the heading for the whole Tip ('My second page' - a basic HTML recipe.) is more important than the subheadings for each section of the Tip. If I were putting this Tip on a web page I'd expect the heading for the Tip to look like this:
<h3>Section five: 'My second page' - a basic HTML recipe </h3>
Then the first few subheadings would look like this:
<h4>Headings summarise chunks of text </h4>
<h5>Examples </h5>
<h4>The princely 'h1' and the lowly 'h6' </h4>
H3 is more important than h4, which is more important than h5.
Just for completeness, there is also an h6 which suffers the ignominious fate of being the least important of all, as there is no h7, h8 or any other low-ranking number to act as whipping boy.
Good structure carries the page.
A good set of headings, with carefully chosen 'h' tags carries any page of text and images. Think carefully about which level of importance any heading has within the page. Let the web designer worry about how big the heading will be, or what colour, or whether it's bold. Your job is to make sure the page has a strong framework of 'h' tags.
A complete simple webpage, with headings.
Here's a really simple webpage with everything the Tips have covered so far. Save it as page-02.html and open it into your web browser to see how it reads.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page </h1>
<h2>Community groups and the web </h2>
<p>My <strong>first</strong> paragraph. Type some more stuff in here to make it longer. </p>
<p>Another paragraph. Type some more stuff in here to make it longer. </p>
<h3>Engage your Community </h3>
<p>Another paragraph. Type some more stuff in here to make it longer. </p>
<p>The Engage your Community (http://eyc.org.nz) Conference is one all community organisations should attend. There will be many workshops, including one called Keeping up with the Joneses, run by Miraz Jordan (http://knowit.co.nz). </p>
</body>
</html>
In the next Tip I'll show you how to add a link.
* Web tips contributed by Miraz Jordan, http://knowit.co.nz