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.
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 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.
In HTML, an attribute defines a property of an element. Attributes are found inside element tags and are most often written in the format
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:
Let’s look at each part of the code:
<img>– the element used to display an image
src="…"– the attribute used to set the name and location of the image file
alt="…"– the attribute used to set the text to display when the image can’t be loaded
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.
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
wwwroot on the web server. That might sound a bit confusing so here’s a visual representation of the example:
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
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="_blank"to force the link to open in a new browser window
HTML supports these list types:
(<ul>)– bulleted lists
(<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:
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:
For more about lists, take a look at my HTML lists post.
Before we wrap up, let’s update the hierarchical view of the page we started in part 1:
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:
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.
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,
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