The 'head' element
The 'head' element (often called here the head 'section') is one of the four essential parts of an HTML document you learnt about in the previous lesson. It contains 'metadata', information that the browser needs to know about the page. None of the content of the 'head' section is visible on the web page.
The list you see below shows a typical selection of items in the head section, and they will probably be enough for most websites. However, there are others to choose from, so once you get started in your web designing you may wish to find out more about the head section.
The title of the page will appear in the browser tab. You can call it anything you like.
<title>Page title</title>
This tells the browser the path to (i.e. location of) the external CSS stylesheet. (File paths are explained in Lesson 3.) The location below (highlighted) is just an example. It refers to a CSS file called 'style.css' that is located in a directory called 'css'. The other text tells the browser to look for a stylesheet and that it is a css text file.
<link rel="stylesheet" type="text/css" href="css/style.css">
This is more-or-less standard, but there are others.
<meta charset="UTF-8">
Like it says, a description of the content (highlighted) .
<meta name="description" content="A plain English introduction to web design">
Keywords for search engines.
<meta name="keywords" content="html, css">
Name of author
<meta name="author" content="Joe Bloggs">
Setting the viewport like this allows mobile devices to display the page properly. This setting is a good default until you find out more.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Putting it all together
This is what the head section could look like when you put all the above items together. Adjacent to each item is a description in brackets.
<head>
<title>Page title</title> [page title]
<link rel="stylesheet" href="style.css"> [path to stylesheet]
<meta charset="UTF-8"> [character set]
<meta name="description" content="My webpage"> [for search engines]
<meta name="keywords" content="html, css"> [for search engines]
<meta name="author" content="My Name"> [author]
<meta name="viewport" content="width=device-width, initial-scale=1.0"> [viewport]
</head>