About HTML Files

A typical <head> of an HTML file

You will find the same elements inside <head>…</head> of every HTML file. A typical example is shown below. The values that will be different on different web pages and websites are highlighted in red.

Let’s review the various parts of a typical <head>…</head> in an HTML file.

Character encoding: The first line within the <head> controls the display of characters (letters, numbers and symbols) on your web page. This includes special symbols such as ® and €, and non-English characters such as ä and Ó. Note that this is a self-closing tag.
```
   <meta charset="utf-8">   
```
Microsoft web browsers: This line applies only to how your web page is displayed on web browsers made by Microsoft.
```
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
```
In summary, this forces the web page to use Microsoft Edge, if available. If that is not installed on the user’s computer, it forces the web page to use the most recent version (2016) of Internet Explorer. This is also a self-closing tag.
Responsive display: Users view web pages on a range of devices, such as mobile phones, tablets, laptops and desktops. By including this line in the <head> of your HTML file, and using media queries in your CSS file(s), you can ensure your web page will be able to shrink or expand according to the width and height of the user’s screen. This is another self-closing tag.
```
   <meta name="viewport"  content="width=device-width, initial-scale=1.0">  
```
<title>…</title>: This pair of tags contains the title you want to give to your web page. It is displayed at the top of the web browser window; when the web page is added to a user’s list of bookmarks/favourites; and as clickable text in search engine results.
<meta name="description">: This tag is where you write a brief description of your web page. It is typically up to 160 characters in length and is a self-closing tag. Here is an example:
```
   <meta name="description" content="How to set up a domain name and website in four easy-to-follow, quick and affordable steps.">   
```
This description is typically displayed on the search engine results page (SERP) of Google and other search engines, underneath the clickable page title.
<meta name="author">: Another self-closing tag. This is where you identify yourself as the author/creator of the web page. For example:
```
   <meta name="author" content="Mary Smith">   
```
Stylesheet link: A web page (HTML file) typically includes a link to at least one stylesheet (CSS file). Here is an example of this self-closing tag:
```
   <link rel="stylesheet" content="mystyle.css">   
```
Linking a web page to a stylesheet is covered in this Tutorial: Styling Web Pages with CSS.

Google Analytics snippet: This ‘snippet’ (a few lines of code) is usually placed as the last item just before the closing </head> tag. Note that the code is preceded by a comment, and contains two pairs of opening <script> and closing </script> tags.

    <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-NNNNNNN-1"></script>  
  <script>  
       window.dataLayer = window.dataLayer || [];  
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', 'UA-NNNNNNN-1');
  </script>

Working with Google Analytics and generating the unique tracking code for your website is covered in this Tutorial: Setting Up Google Analytics.

Return to Contents.

Contents >

Learning Goals

Contents

HTML files: The basic structure

A typical <head> of an HTML file