HTML Head Element

This post covers something I meet for the first time or have forgotten about HTML <head> element after reading What’s in the head? Metadata in HTML on MDN.

Some elements appear inside the <head> element are talked as below.

Metadata

We use <meta> tag to specify metadata, many <meta> elements include name and content attributes:

  • name specifies the type of meta element it is; what type of information it contains.
  • content specifies the actual meta content.

Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let’s look at an example:

1
2
3
4
5
<meta name="author" content="Sichen Wang" />
<meta
name="description"
content="This is my blog, sharing what I learned, mainly about Web development."
/>

Specifying the description that includes keywords relating to the content of your page like the above example is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO).

The description is also used on search engine result pages.

You’ll notice the description <meta> and <title> element content used in the search result — they are definitely worth having!

Many <meta> features just aren’t used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

Proprietary metadata

As you travel around the web, you’ll find other types of metadata, too. A lot of the features you’ll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

Twitter has its own proprietary metadata called Twitter Cards, which has a effect when the site’s URL is displayed on twitter.com. For example:

1
<meta name="twitter:title" content="Mozilla Developer Network" />

Adding custom icons to your site

favicon (short for “favorites icon”, referring to its use in the “favorites” or “bookmarks” lists in browsers).

A favicon can be added to your page by:

  1. Saving it in the same directory as the site’s index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
  2. Adding the following line into your HTML’s <head> block to reference it:

    1
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

Always Setting the Language of the Document

This can be done by adding the lang attribute to the opening HTML tag:

1
<html lang="en-US"></html>

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word “six” exists in both French and English, but is pronounced differently.)

You can also set subsections of your document to be recognised as different languages:

1
2
3
<html lang="en-US">
<p>Hi, I am <span lang="zh-Hans">王思晨</span></p>
</html>

zh-Hans‘s s means simplified, while zh-Hant‘s t means traditional.