Technical writing services by Espirian

Anatomy of an HTML page – part 5

In this post:

This series has covered some of the common elements found within the <body> element of HTML documents. This time, we’re going to look at the <head> element, which contains the essential metadata that helps give our content both meaning and style.

The <head> element revisited

Back in part 1, we created a very simple <head> element that contained only one thing: the page’s title. Here’s how that looked:

<head>
<title>Page title goes here</title>
</head>

To remind ourselves of where the <head> element should appear in the context of the whole HTML document, here’s a slightly larger example:

<!DOCTYPE html>
<html>
<!-- The head starts here -->
<head>
<title>Page title goes here</title>
</head>
<!-- The head ends here -->

<!-- Everything below this line is the main body of the page -->
<body>
<p>This text sits within a paragraph element.</p>
</body>
</html>

We can visualise this as shown below:

Hierarchical HTML view

OK, we have a <head> element that allows us to include information that supports the main body content. But what sort of information can we place into the <head>?

Adding some style with CSS

One of the most common components to see in the <head> element are Cascading Style Sheets (CSS). If you’ve read the previous posts in this series, you’ll recall I’ve mentioned CSS on more than one occasion.

Definition: Cascading Style Sheets (CSS)

CSS controls the look and feel of web pages by using simple text rules to target and style HTML elements.

Size, position, colour, transparency, borders, margins, padding: these are some of the features we can control through CSS rules.

There are a couple of ways to add CSS to the <head> element.

1. External CSS (recommended)

The code for ‘attaching’ an external CSS file to an HTML page looks like this:

<link rel="stylesheet" type="text/css" href="/style.css">

Here’s how that breaks down:

As with previous examples, the order of the attributes isn’t important. For consistency, it helps to define attributes in a regular order, especially when several elements appear next to each other in the <head>.

In the above example, we link to a separate file (style.css) that contains rules defining the look of the page.

2. Embedded CSS

Rather than attaching an external stylesheet, it’s possible to embed a stylesheet directly within the <head> element. We do this with the following code:

<style type="text/css">
/* CSS comments look a little different from HTML comments */
p {
    color: red;
}
</style>

In the example above, we’ve placed a simple CSS rule into the HTML document. In this case, the rule targets all paragraphs and sets their text colour to red.

Whether we embed or externalise our styles, the syntax of CSS is quite different from that of HTML. I may go into this in a future series of posts, but, if you just can’t wait, take a look at this CSS Introduction on W3Schools.

Adding supporting information with metadata

It would be natural to assume that the main part of the HTML content – the meat and potatoes that fills the <body> element – is enough to explain what any given page is about. And when we actually view a page, that’s true enough.

However, at the point before we view a page, it might be difficult for us to determine what the page is about. Perhaps we can see the full web address and take our cue from it, but what other cues are there? This is where ‘metadata’ plays a big part.

Definition: Metadata

Metadata is often referred to as ‘data about data’. In HTML, it is the supporting information that helps search engines and other systems to categorise what a page is about.

Here’s an example of a ‘meta tag’ used to define what a page is about:

<meta name="keywords" content="HTML, CSS">

And here’s the breakdown:

A quick digression on keyword metadata

In the early days of the web, it was common to see basic keyword metadata appear in the <head> element of web pages. Search engines would use this information to categorise the page and then display it when a relevant search was made. When people became wise to this and starting stuffing large numbers of keywords into their metadata in order to boost their rankings, search engines quickly reduced their reliance on this particular set of information.

These days, it’s far, far harder to fool a search engine: fresh, relevant, well-written material is now the standard by which all web content is judged.

OK, the first example I’ve provided turns out not to be of much use on the modern web. Let’s try some more helpful examples.

Describing the page content

Although search engines don’t like long lists of keywords stuffed into metadata, they do like short summaries of the page content – a sentence or two capturing the essence of whatever the page is about.

Here’s an example of one of these metadata summaries, taken from part 4 of this series:

<meta name="description" content="In the fourth post in this series, we'll cover HTML's handling of displaying quoted material, using the blockquote and cite elements.">

This time, I’ve set the name="" value to description and then written a short summary of the post.

Crucially, the description appears when you find the page through a search engine. Here’s how Google presents the search result for this page:

Google’s summary for part 4 of this series

If you don’t add the description meta tag to your page, you allow search engines to control what goes in to the page summary.

Without the relevant metadata to rely on, a search engine will probably use the opening section of text on your page as the summary it displays in its search results. But those words won’t necessarily be the right ones to describe the whole page.

It’s best to take control over the display of the page description so that you can write a summary that will appeal to potential viewers. For that reason alone, you should aim to include a ‘description’ meta tag on all pages.

Meta tags for social sharing

The advent of social sharing has meant it’s important to have a way of previewing content before an entire page is viewed or shared. Many of us expect to see more than just a boring web address, and metadata allows us to build rich links to content we wish to share.

Here’s an example of how the Facebook sharing feature treats my recent post on Powerline:

Facebook sharing for a previous post

Had no metadata been added to the page, it’s possible that the same content would have been sucked into Facebook’s sharing page – but there’s no guarantee of that. It’s better, then, to define the metadata we’d like to see used by this sort of service.

Here are some real examples of metadata that the likes of Facebook will look at when we try to share a page:

<meta property="og:title" content="Powerline – Espirian – Technical writing">
<meta property="og:url" content="https://espirian.co.uk/powerline/">
<meta property="og:site_name" content="Espirian – Technical writing">
<meta property="og:image" content="https://espirian.co.uk/wp-content/uploads/2014/11/powerline_port_cable.jpg">

The ‘og’ in each of these tags is short for ‘Open Graph’, which is a special metadata system. You can read more about this on the Open Graph protocol site.

Adding scripts

As if styling and metadata weren’t enough, the <head> element can also be used to add scripts to a page.

Definition: Script

In HTML, a script is a set of text instructions written in a programming language compatible with the web. The most popular scripting language on the web is JavaScript. (Despite its name, JavaScript is not the same as Java.)

Scripts are used to add interactivity to web pages. For example, a script could be used to make a new window pop up when a button is clicked.

Here’s an example of some code that, when placed in the <head>, will ‘attach’ a JavaScript file to the page:

<script type="text/javascript" src="/js/respond.min.js"></script>

And here’s the breakdown:

Just as CSS can be embedded or externalised, so too can scripts. The above shows an externalised example, which is the most common way of including scripts. Scripts themselves are made up of text instructions that define variables, functions and other components. I may post about this topic in the future but even to scratch the surface would probably be a bit too much in this article.

End of part 5

In this last part of the series, we’ve seen how metadata (or data about data) can play an important role in how search engines and other web services perceive our HTML pages. We’ve also touched on how the look and behaviour of our pages can be affected through the inclusion of styling rules (CSS) and scripts (JavaScript).

Conclusion

I hope this series has provided a useful introduction to those who are getting to grips with HTML, the principal language of the web. If you have any thoughts to share, 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

Thanks for reading,

Subscribe for tips

Join 413 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy