The Head & Meta Tags

The <head> of an HTML file contains information about the document, including the page <title>, links to stylesheets, and external resources like fonts.

We also include <meta> tags, which perform a range of roles, as determined by their attributes.

<meta> tags are generally used to provide information that helps the browser and search engines to understand the page content.

In this section, we are going to learn about the most commonly used <meta> tags and how we add JavaScript, CSS, and other resources to our web projects.

THE TITLE ELEMENT

The <title> element defines the title of the document, which is important for search engines.

In the image below, we see that the Google search result text matches the browser tab. This comes from the <title> element.

Google search listing

You can check this by opening any page from Google search, then right-clicking and selecting inspect.

If you go to the <head>, you will see that the title matches the browser tab and the Google search result.

Typically, our title will describe our web page and should include relevant keywords. As the title is displayed in search engine results, we want to be descriptive of the page and its content.

The title element is required to produce a valid HTML document, and only one is permitted per HTML file.

The title must reside within the <head> element and can include plain text and HTML entities, but it may not contain other nested HTML elements.

THE META DESCRIPTION TAG

<meta> tags come in various guises and provide information on document keywords, the author's name, character encoding, and other metadata.

The example below is a meta description tag:

<meta name="description" content="The text for your description goes here"/>

The name attribute specifies what kind of metadata it is.

The content attribute contains the information the meta tag provides to the browser. For example, the descriptive text that we see under the titles in Google search listings.

It is a good idea to include relevant keywords in your description. Including keywords has the potential to make your page appear higher in search engine listings. So it is useful for SEO.

NOTE: There is a maximum number of characters that you can have inside a content attribute for the meta description tag. This number represents the visible characters that will display on the screen in search engine listings.

Currently, Google allows 158 characters in a description. Bing and Yahoo allow 168. On mobile devices, you would want around 120 characters.

THE META CHARSET TAG

The <meta> charset or character set tag is set to UTF-8 by default.

To the standard <meta> tag, we add a charset attribute and give it the value of UTF-8.

<meta charset="UTF-8" />

UTF-8 is a universal electronic character set that includes pretty much any character from any language - be it English, Russian, Japanese, to name a few.

With the <meta> charset tag, your web page will be able to handle displaying any language. So, it is a good idea to include this in your head section.

THE META VIEWPORT TAG

The <meta> viewport tag defines the viewport or visible area of the web page. It is required to make web pages responsive and suitable for all devices.

Without the viewport tag, mobile browsers will render web pages at typical desktop screen widths. This is not responsive.

As a result, it requires the user to pinch-and-zoom to view the web page on mobile devices, which is poor UX or User Experience.

with and without meta viewport tags

The code example below shows the viewport set to the width of the device it is being viewed upon.

The initial-scale defines the initial zoom level. This value can help when you are changing orientation on a phone or tablet.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

We can also set maximum and minimum scale, which controls how much a user can zoom in and out. We can even stop users zooming in and out at all.

If we wanted to prevent zooming, we could use the attribute value of user-scalable=no.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.7, user-scalable=no"/>

THE META AUTHOR TAG

The <meta> author tag identifies the author of a page with name="author" and content="author’s name".

Some content management systems like WordPress, for example, automatically extract page author information to display it in blog posts.

<meta name="author" content="John Doe"/>

THE META KEYWORDS TAG

We use the <meta> keywords tag to add keywords that are relevant to our web page. These were once of high importance to search engines but are no longer as relevant as they once were.

The major search engines have cracked down on sites that undertake black-hat practices like keyword stuffing.

So meta keywords are no longer crucial to the Google ranking algorithm. Pay more attention to <title> tags, <meta> description tags, and alternative text, which is helpful for accessibility purposes.

Meta keywords can still play a small part in communicating your message, so it does not hurt to include them. However, it is best to limit these to around eight keywords or so.

<meta name="keywords" content="HTML, CSS, JavaScript, Responsive Design, Sass, React, Node, Git"/>

THE META ROBOTS TAG

The robots <meta> tag informs search engines which web pages to index.

It serves a similar purpose to the robots.txt file.

We use the robots <meta> tag to prevent search engines from indexing individual pages, while robots.txt will prevent search engines from indexing a whole site or section of a site.

A robots meta tag that instructs the search engine crawler not to index a page, or follow any links on it, would be written like this:

<meta name="robots" content="noindex, nofollow"/>

And this, if you do want to tell the crawler to index and also follow your page:

<meta name="robots" content="index, follow"/>

If you refrain from adding a robots meta tag, then the default is for crawlers is to index and follow your page. So it is opt-in by default.

If you want ≈nofollow on an individual link on your page, you can add rel=”nofollow” attribute.

OPEN GRAPH & SOCIAL MEDIA

New types of Metadata have become prevalent in recent years due to the rise of social media.

Open Graph Data is one of these new types. It is a metadata protocol created by Facebook to provide richer experiences for websites sharing their content.

In the head section of the Assembly website, you will find the following code:

<meta property="og:image" content="/og.png" />
<meta property="og:title" content="assembly" />
<meta property="og:description" content="Learn JavaScript, React, Node.js, and CSS with Assembly. Video lessons, written tutorials, and courses on web development."/>

So when you post a link to assemblyJS.com on Facebook, an image and a description are embedded into the post.

assembly Open Graph Metadata

Twitter uses similar proprietary metadata called Twitter Cards, which produces a similar result when a URL is tweeted.

<meta property="twitter:card" content="Assembly" />
<meta property="twitter:url" content="https://assemblyjs.com/" />
<meta property="twitter:description" content="Learn JavaScript, React, Node.js, and CSS with Assembly. Video lessons, written tutorials, and courses on web development."/>

ADDING CUSTOM ICONS OR FAVICONS

You can add references to custom icons in your metadata, which will be displayed in various contexts.

For example, the favicon is used to display your logo in browser tabs, and when your page is bookmarked.

Favicons improve user experience and enforce brand consistency. When a familiar icon is seen in the browser's tab, it reassures users that they are in the right place.

Favicon displaying in a browser tab

A favicon can be added to the <head> of your page like so:

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

We add it to the index.html file with a .ico extension, which ensures the icon will be compatible as far back as Internet Explorer 6.

APPLYING CSS & JAVASCRIPT TO HTML

The <head> also accepts references to external CSS and JavaScript files.

These are attached to a HTML document using the <link> tag for CSS and the <script> tag for JavaScript.

Script

The script element can reside in the <head>, but it is better to add scripts at the bottom of the<body> element.

Adding external JavaScript files in the <body> ensures that all HTML content has loaded before the browser attempts to run any JavaScript.

The browser reads the HTML document from top to bottom, and we want the page content to display before JavaScript gets to work.

Scripts need time to run, and the page content will load slower if scripts are run first. If JavaScript tries to access an element unknown to the browser, this could cause an error.

So we add scripts at the bottom of the <body> section, though they can also go inside the <head>.

<script src="app.js" />

Tip: In VS Code, you can use the Emmet shortcut of script:src to create this script tag. You then only need to specify the path to the JavaScript file once the <script> tag is created.

There is also a <noscript> tag which defines alternate content that will be displayed if users have disabled scripts in their browser, or if they are using an older a browser that does not support the script you are running.

Link

The <link> element always goes inside the <head> of your document.

It takes two attributes, rel="stylesheet", which indicates that it is a stylesheet, and href="", which contains the path to the stylesheet file as its value.

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

Tip: If we use the Emmet shortcut of link:css and hit tab, Emmet will build the link tag for us, with a default path to a stylesheet named style.css.

Style

The <style> tag is used to define embedded style information for an HTML document.

Nested inside the <style> tags, we add CSS selectors and style rules which specify how HTML elements are presented.

So we can use this element to embed style declarations within our HTML document rather than linking to an external stylesheet.

<style>

h1 {
color: blue;
text-decoration: underline;
}

p {
color: red;
}

</style>

Summary

This section has covered the most common meta tags and the HTML elements that reside in the head section of an HTML document. These are:

  • <title> (required in every HTML document)
  • <base>
  • <link>
  • <style>
  • <meta>
  • <script>
  • <noscript>

The meta tags we have covered in this section represent just a small amount of the total that are available to us, and you can see the full range at this link.

Take the time to look through these as there may be some you will find useful that have not been covered here.

You will also note that there is a <base> element, which we have not covered in this section.

We will cover this later on once we have discussed hyperlinks, as the base element is concerned with setting behavior for all of the links on your web page.

In the next section, we will return to the body to discuss the difference between block and inline elements.

FURTHER RESOURCES

GITHUB REPO USED IN THE VIDEO

Next section →