HTML Document Tags

The previous tutorial addressed the syntax and global structure of an HTML document. It consisted of three parts. This tutorial will cover document tags which are available to use in the <head> section of an HTML document.

The <head> section of an HTML document contains information about the document, such as the title, description, keywords and CSS or JavaScript. The following tags are available to use in the head tag.




Meta Data

Meta data is used to specify data such as document description, author and keywords. The meta tag does not have an ending tag.


<meta name="description" content="This is the document description"/>

Search engines and browsers do not have to read the <meta> data, and most search engines such as Google do not rank using <meta> data, as it is commonly used to spam.

The name attribute specifies a property and the content specifies the value. It is good practice to provide unique descriptions for each page, as they can appear in the SERP which can result in more website traffic.

Meta Description In SERP

This is how this website currently appears in Google’s SERP (Search Engine Results Page). Providing a short but snappy description can lead to increased traffic and sales if you have an e-commerce website.

Example 2

<meta name="keywords" content="some, keywords"/>
<meta name="author" content="thecodingguys"/>
<meta name="copyright" content="2012-2013"/>

Meta description, keywords and author are mostly used, there are others but it’s beyond the scope of this tutorial to show all of them. Just remember that meta description and keywords are ignored by search engines to rank your website so don’t spend time trying to spam it. Meta author can be useful for blogs are Google can show the authors name in the SERP.

Link Tag

The <link> tag can link to external style sheets, a different version of the current document, and to next and previous documents. The <link> tag may only appear in the <head> section of a document, and you can create as many as you like. You specify the type of link using the rel attribute.

Style Sheet

<link rel="stylesheet" href="url to stylesheet.css"/>

The above links to an external style sheet.

Alternative Documents

You might have the same document in different languages or different versions, so you can specify the secondary document.

<link rel="alternate" href="" lang="fr"/>

This specifies that the document is also available in French. It is a good idea to use the lang attribute if the document is written in multiple languages.

Other types

There are many more types of links, such as:

Link Type Description
Copyright Copyright page for current document
Next The next document in a sequence of documents
Prev The previous document in a sequence of documents
Start The starting point of multiple documents.

The values of rel attribute are not case-sensitive, so for example ‘Start’ and ‘start’ are the same. Browsers and search engines may have their own ways to interpret the links, and some browsers might provide a navigation bar for a sequence of documents while search engines might give you the option of different versions of the document.

Title Tag

The <title> tag can only appear once in an HTML document, and it requires the end tag. It is used to provide a title for the current document.

<title>Untitled 1</title>

The title tag should be kept short (around 10-16 characters) and to the point of the document, as this may help increase site traffic. Just remember that search engines will only show a limited number of characters before it starts cutting them.

Document Title In SERP

This is how this website appears if you Google “webpages membership” (first result to appear). As you can see, Google has highlighted the keywords as well as the URL.