By now you've seen a number of elements that can appear in the body of an HTML document. Let's shift our focus to elements that can appear in the head element. Some of these elements alter the decor that the browser associates with your page in its graphical interface, like the title element. You can also add an icon using the versatile link tag:
<!DOCTYPE html>
<html>
<head>
<title>Finders Keepers</title>
<link rel="icon" href="/images/crescent.svg">
</head>
<body>…</body>
</html>
To see the title and icon, which appear not in the content window but in the browser's chrome, you need to view the page in its own tab or window. Click on the popup link to break it out of this page.
Such icons are called favicons, the name that Microsoft developers gave them when they wanted to add little images next to sites that had been added to a list of favorites. After loading an HTML page, the browser frequently and automatically sends a request to your HTTP server for the page's favicon. If you don't have a favicon, you can prevent this request by setting the icon's href attribute to a blank data URL:
<!DOCTYPE html>
<html>
<head>
<title>Finders Keepers</title>
<link rel="icon" href="data:,">
</head>
<body>…</body>
</html>
Soon you'll add stylesheets to change the visual display of your HTML. As will be explained later, this is preferrably done using a link element that points to a stylesheet defined in a separate file. But stylesheet can also be declared directly in an HTML document using the style tag:
Metadata describing your page is added via meta tags. For instance, you can describe what character set you're using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body></body>
</html>
The browser must parse your HTML, and correct parsing requires knowledge of the character set you used. Explicitly setting the charset is a recommended practice.
Search engines pull information about your pages from meta tags to determine how your page appears in search results. For example, the text shown below a result link is pulled from the description metadata:
<!DOCTYPE html>
<html>
<head>
<title>Finders Keepers</title>
<link rel="icon" href="/images/crescent.svg">
<meta charset="utf-8">
<meta name="description" content="We find things, and we keep them.">
</head>
<body>…</body>
</html>
To prevent a search engine from adding your page and any of its links to their database, you add a meta directive for robots:
<!DOCTYPE html>
<html>
<head>
<title>Finders Keepers</title>
<link rel="icon" href="/images/crescent.svg">
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
</head>
<body>…</body>
</html>
Google has published a list of tags that it inspects.
An HTML document can be connected to code written in other languages using the script tag. HTML and JavaScript are frequently paired. An inline script allows you to embed the code directly in the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Greeting</title>
<script>
alert('Happy ' + new Date().toLocaleString('en-us', {weekday: 'long'}) + '!');
</script>
</head>
<body>…</body>
</html>
Inline scripts are not reusable across documents. Prefer using this other form of the script tag, which loads an external file pointed to by the src attribute:
<!DOCTYPE html>
<html>
<head>
<title>Greeting</title>
<script src="greeting.js"></script>
</head>
<body>…</body>
</html>
Note how script is not a void element. Though it's empty, it has a closing tag. You'll read more about script and JavaScript soon.