HTML Head

The <head> element is a container for information about the page, called metadata. Nothing inside the head is shown on the page, except the title which appears on the browser tab.

---

Tags used inside the head

Tag	Use
<title>	Title of the page. It is required
<meta>	Information like character set, description and viewport
<link>	Connects an external file, mostly a CSS file or a favicon
<style>	CSS code written inside the page
<script>	JavaScript code or a link to a JavaScript file
<base>	Sets the base URL for all relative links of the page

---

Example of an HTML head

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML step by step.">
  <title>Learn HTML - Tutorials Class</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
  <script src="app.js" defer></script>
</head>

---

The title tag

The title is shown on the browser tab, in bookmarks and as the blue link in search results. A page must have exactly one title. Keep it short and clear, about 50 to 60 characters.

<title>HTML Head - Tutorials Class</title>

---

The link tag

Use <link> to attach an external CSS file. It has no closing tag.

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

---

The style tag

For a few CSS rules you can write them directly in the head. For bigger sites an external file is better.

<style>
  body { font-family: Arial, sans-serif; }
  h1 { color: navy; }
</style>

---

The script tag

The defer attribute makes the browser load the script without blocking the page, and run it after the page is ready.

<script src="app.js" defer></script>

---

The base tag

The <base> tag sets one base address for all relative links and images on the page. A page can have only one base tag, and it must come before other tags that use URLs.

<base href="https://www.example.com/images/">

---

Summary

• The head holds information about the page, and is not shown on the page.
• Always include charset, viewport and title.
• Use link for CSS, and script with defer for JavaScript.
• Next: Meta tags in HTML.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.