Working with the HTML Head Tag
This tutorial explains how to use the HTML <head> tag to encapsulate meta data that is processed by the browser, including the website title, SEO data, and encoding.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Now that we broke the surface of the basic structure of a HTML document, let's explore the possibilities of the <head> tag, the location for all your meta-data.

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

The first line defines the charset (short for "character set"). Unless you are creating an international website that requires Chinese and/or Korean symbols,UTF-8is perfect for utilizing all English alphabets and characters.

The second line uses the <title> tag, where you control the title of your web page. For example, if you go to "google.com", it is coded to display the word "Google" on the tab (see below).

large

Besides these two tags, you are able to enter anything that is considered "meta-data". Some common things you can put include:

  • <meta description>
    • This will describe your meta-data and is what search engines, like Google, look for while indexing.
  • <meta keywords>
    • This tag will contain all the relevant keywords associated with your web page (also something that Google looks for).
  • <meta author>
    • This gives the name of the person creating the page.

Here, there are two details to take note of. First, the meta tags do not include a closing tag, but rather have the entire content between the angle brackets. Second, these meta tags are primarily for search engine optimization and do not change the content on your browser.
If you're curious of their orientation, open your file on the browser, right click on the page, and choose the "View page source" option (shown below).

medium

As you are able to see, this content is the same as the content within your file.

large

Although you are able to see the contents of the body, Google simply looks at the code. The amount of content inside the <head> tag is practically unlimited. Shown below is one of my websites. By following the same right click on the page, and choosing "view page source", it is visible that there is a multitude of content within the <head> tag.

large

Most of the above meta-data was generated dynamically by rails, but they can be used within our site too. In this tag, the meta tag also incorporates name and content sections, as so:

<head>
  <meta charset="UTF-8">
  <title>My Great website</title>
  <meta name="description" content="In this post we&#39;ll">
  <meta name="keywords" content="software engineering">
  <meta name="author" content="Jordan Hudgens">
</head>

If you're building a website, it is necessary to include meta-data information because it's the only way your website is able to be found. If you're interested in more examples, you can go to different websites and see their sources by right-clicking on the page. This should give you an idea of the different tags that are possible under the <head> tag. Just remember, none of this information will be visible to the users or visitors of your site.