Anatomy of an HTML page – part 2

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:

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

The level 1 heading (<h1>) 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 <h1> per page.

So long as we’re sensible about it, we can use other headings any number of times. It’s logical for an <h2> to be used after an <h1>, for an <h3> to be used after an <h2>, 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 <h1> is the largest heading and an <h6> 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 <img> 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 <img> element with 3 attributes:

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

This code produces the image below:

A cute kitten

Let’s look at each part of the code:

  1. <img> – 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:

Image path

A graphical view of the path to an image

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

<img 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:

<img 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.

<a href="https://espirian.co.uk/">Technical writing</a>

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:

  • title="…" – the text that appears when hovering over the link (not for essential info, though: mobile users and users with accessibility issues won’t see this text)
  • target="…" – use target="_blank" to force the link to open in a new browser window

Lists

HTML supports these list types:

  • Unordered (<ul>) – bulleted lists
  • Ordered (<ol>) – numbered lists

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

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pears</li>
</ul>

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:

  • Apples
  • Oranges
  • Pears

And here’s the code for an ordered list:

<ol>
    <li>First</li>
        <li>Second</li>
      <li>Third</li>
</ol>

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:

Tree view

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:

Code sample

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

  • Series index – an overview of each part
  • Part 1 – building blocks of HTML
  • Part 2 – headings, images, links and lists
  • Part 3 – comments, tables and special characters
  • Part 4 – quoting and citing
  • Part 5 – the head element, CSS and metadata
  • HTML lists – ordered and unordered lists

Thanks for reading,

John Espirian

Keep in touch

Join 323 others on my free Espresso ☕️ list and you'll receive:

  • 🔍 blog updates
  • 📘 free ebooks
  • 💰 discounts on consultancy
  • 🎟 offers and secret stuff

🔒  No spam, I promise