Last month My first page – a basic HTML recipe introduced some basic concepts of HTML for people wanting to understand a bit more about writing blog posts or adding content to a Content Management System. It assumed a web designer would set up and maintain a website — all the tricky stuff that requires an expert. My article was intended for people who would benefit by knowing just a little bit about HTML. This article adds another layer of expertise.
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>’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 Conference (http://eyc.org.nz) 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>
Next time: how to make those links clickable.
Written by Miraz Jordan for, and reproduced from CommunityNet Aotearoa Panui, September 2008. This article may have been modified for publication here.
Update: The whole series:
These Posts may interest you too:
- ‘My fourth page’ – a basic HTML recipe How to link to a photo from inside a web page. Recently I have explained the HTML coding for headings, paragraphs, and links. The HTML for an image combines techniques...
- My first page – a basic HTML recipe A grasp of some of the basics of HTML gives you more knowledge, more power and a greater ability to produce great results on a website. And the basics are...
- My third page – a basic HTML recipe The previous Tips in this series introduced a little basic HTML, showing you how to make paragraphs and headings and emphasise a few words. See: My first page — a...
- Use Plain Text options for TextEdit when writing HTML files If you were going to write some HTML using the Mac’s free text editor TextEdit you need to make sure the Preferences are set for plain text, not for RTF....
- Semantic HTML tips Roger Johansson has some sensible and simple tips for semantic HTML — something we should all be doing — in his post POSH – Plain Old Semantic HTML. Here are...
Add your Comment
{ 1 trackback }