Technical writing services by Espirian

Anatomy of an HTML page – part 2

In this post:

In part 1, we learned how to create a basic HTML document. This time, we’ll look at some elements that can be found in almost every web page: headings, images and lists.

Headings

HTML supports 6 levels of heading. Here’s the code you’ll need:


This is a level 1 heading
This is a level 2 heading
This is a level 3 heading
This is a level 4 heading
This is a level 5 heading
This is a level 6 heading

The level 1 heading () is the most important on the page. It should appear at or very near the top of the page, and it’s best to use just one per page.

So long as we’re sensible about it, we can use other headings any number of times. It’s logical for an to be used after an , for an to be used after an , and so on. But HTML won’t enforce this: how you use the headings is ultimately up to you.

Use headings to break up body text

It’s not a good idea to write walls of text on the web. Use headings to break up text into readable chunks. Your readers will thank you!

By default, an is the largest heading and an the smallest. There’s a way to change the styling of headings (and indeed of every other HTML element), but we’ll get to that in a future post.

Images

Images are added by using the self-closing element. We use ‘attributes’ inside the element to specify which image to display and to provide some information about the image.

Definition: attribute

In HTML, an attribute defines a property of an element. Attributes are found inside element tags and are most often written in the format attribute="value".

Here’s an example of an element with 3 attributes:


src="kitten.jpg" alt="A cute kitten" title="A cute kitten">

This code produces the image below:

Let’s look at each part of the code:

  1. – the element used to display an image
  2. src="…" – the attribute used to set the name and location of the image file
  3. alt="…" – the attribute used to set the text to display when the image can’t be loaded
  4. title="…" – (optional) the attribute used to set the text to display when the pointer hovers over the image.

The order of the attributes (items 2, 3 and 4 above) doesn’t matter, though consistency makes for a better world. Note that these are not the only available attributes, though they’re certainly the most important ones for now.

Image sources

The src="…" attribute has to be written so that the image can be located. This sounds rather obvious but it’s important to know how to locate the image on your website so you don’t end up with a broken (missing) image on your page.

In my example above, I’ve shown only the filename of the kitten image. In the real world, this would be correct only if the HTML page and the image were in the same folder on the website. In most cases, images will be placed in some other folder and so our src="…" attribute would need to point not only to the right image but also to the right folder that contains the image.

There are a couple of ways to define the correct ‘path’ to an image. I find the easiest method is to start from the top level of the web server and list every folder that has to be opened to reach the image.

Here’s an example: let’s say that I keep my favourite kitten photo in a folder called images, which is inside my blog folder. Let’s also say that this blog folder is at the highest level of my web server. This highest (or ‘root’) level is usually a folder labelled either public_html or wwwroot on the web server. That might sound a bit confusing so here’s a visual representation of the example:

A graphical view of the path to an image

In this case, our code would be written as follows:


src="/blog/images/kitten.jpg" alt="A cute kitten" title="A cute kitten">

See how I’ve adjusted the src="…" attribute. I begin with a forward slash, which says ‘look at the root of the web server’. I then list all the folders between the root and the image, with each separated by a forward slash. This code lets me display my kitten image on any page of my website. Just bear in mind that this approach means there’ll be trouble if I ever rename my blog or images folders.

Before we move on, I should mention that it’s possible to quote a whole web address as part of an image path. For example, this is valid code:


src="http://resources.espirian.co.uk/anatomy-of-an-html-page/kitten.jpg" alt="A cute kitten" title="A cute kitten">

This means it’s possible to link to images from other websites; however, you must check that this is permitted – something that ought to be second nature to the copy-editors in the audience. As a content-protection measure, some websites automatically block third parties from linking to their images.

To link from one page to another, we use the <a> element (it stands for ‘anchor’). This takes an href="…" attribute, which is used to specify the address of the destination page.


"https://espirian.co.uk/">Technical writing

Note that a closing </a> tag is necessary, and the text between the tags is what turns into the familiar, clickable hyperlink, e.g. Technical writing.

Useful attributes of anchor links:

Lists

HTML supports these list types:

Individual entries in each type of list are created with the (‘list item’) element. Here’s an example of an unordered list:



    Apples
    Oranges
    Pears


Notice that I’ve chosen to indent the list items, which makes the structure clearer. Good news: this won’t affect the output in a web browser.

Here’s the browser output of this unordered list:

And here’s the code for an ordered list:



    First
        Second
      Third


I’ve deliberately messed up the spacing but the code will still work. As you might expect, it’s best to be a little more logical with real code.

Here’s the browser output of this ordered list:

  1. First
  2. Second
  3. Third

For more about lists, take a look at my HTML lists post.

The result

Before we wrap up, let’s update the hierarchical view of the page we started in part 1:

The HTML structure is a little more complex than last time

Just as we did in part 1, let’s take a look at the whole set of code. Here’s a side-by-side screenshot of my own code editor and web browser:

HTML code (left) and browser output (right)

And if you wish to view the real HTML page in question, here it is: sample2.html.

If you notice that the sample’s a bit plain compared with the right-hand side of the above screenshot, don’t worry: my browser applies some automatic styling to web content so that it doesn’t look so drab. Styling web content through the use of Cascading Style Sheets (CSS) will be the topic of one or more future posts.

End of part 2

We’ve now seen a good handful of HTML elements. In part 3, we’ll take a look at comments, tables and special characters.

I’m interested to know what you think of the content, so please leave a comment below or drop me a line on Twitter (@espirian). For other ways to get in touch, take a look at my Contact page.

Read the whole HTML series

Want relentlessly helpful emails? Join Espresso ☕️

Get writing tips, web advice & goodies.

💙 606 digital caffeine fans

🍩 No spam or the doughnuts are on me • privacy

Who wrote this?

John Espirian – the relentlessly helpful technical copywriter

I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.

I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️