Have you ever noticed that when you open a website, the browser tab shows a title like "My Portfolio" or "Login · Google Accounts"? Or that your phone displays a website differently from a desktop computer? Or that Google can describe a page in search results without reading its full content?
All of those things happen because of information hidden inside the <head> section of an HTML document · code that the browser reads and uses, but that visitors never see directly on the page.
In this lesson you will learn:
- What the
<head>element is and why every page needs one - Every element that belongs inside
<head>and what each one does - How to set a page title, add styles, link external CSS, define metadata, add
a viewport setting, include JavaScript, and configure a base URL
- Real-world reasons each element matters
- Guided practice exercises
- A complete mini-project combining everything
By the end of this lesson you will be able to write a complete, professional <head> section for any HTML page from scratch.
Before we dive in, make sure you are comfortable with the following ideas. If any of them sound new, read the short explanation provided before moving on.
What is an HTML Document?
An HTML document is a text file that a browser reads and turns into a visible web page. It always has a structure like this:
<!DOCTYPE html>
<html>
<head>
<!-- Invisible setup information lives here -->
</head>
<body>
<!-- Visible page content lives here -->
</body>
</html><!DOCTYPE html>· tells the browser this is a modern HTML5 document.<html>· the root (outermost) tag; everything lives inside it.<head>· the invisible setup zone. The browser reads it but does not
display it on the page.
<body>· everything here is rendered visibly on the page.
What is a Tag?
A tag is a keyword wrapped in angle brackets, like <title>. Most tags come in pairs: an opening tag <title> and a closing tag </title>. Content goes in between.
What is Metadata?
Metadata means data about data. On a web page, metadata is information about the page itself rather than the content you can see. Examples: the page's title, its author, its description for Google, what character encoding it uses.
💡 Analogy: Think of a book. The chapters you read are the
<body>. The cover, copyright page, and ISBN number are the<head>· they describe the book without being a chapter you read.
What Is the <head> Element?
The <head> element is a container for metadata and setup instructions. It sits between the <html> tag and the <body> tag. The browser reads everything inside <head> to learn how to set up the page · but it does not display any of that content on screen.
<!DOCTYPE html>
<html>
<head>
<!-- All setup information goes here -->
</head>
<body>
<p>Visible text goes here.</p>
</body>
</html>What can live inside <head>?
The six elements that belong inside <head> are:
| Element | Purpose |
|---|---|
<title> | Sets the browser tab/window title |
<style> | Adds CSS styling directly in the page |
<link> | Links to an external CSS file (or other resource) |
<meta> | Provides metadata: charset, keywords, description, viewport |
<script> | Adds JavaScript code or links to a JS file |
<base> | Sets a default URL/target for all links on the page |
We will study each one in depth below.
What is it?
The <title> element defines the title of the HTML document. It must contain plain text only · no HTML tags inside it.
Why does it matter?
- It appears in the browser tab at the top of the window.
- It appears in the browser bookmarks when someone saves your page.
- It is the clickable headline shown in Google search results.
- It is critically important for SEO (Search Engine Optimisation) · search
engines use it to rank your page.
⚠️ The
<title>element is required in every HTML document. A page without one is technically incomplete.
Simple Example
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Website</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>What you see in the browser tab:
Welcome to My WebsiteWhat you see on the page:
Hello, world!Notice: "Welcome to My Website" is NOT shown on the page itself. It only appears in the browser tab and bookmarks.
Second Example · A More Meaningful Title
<!DOCTYPE html>
<html>
<head>
<title>David's Photography Portfolio – Landscape & Nature</title>
</head>
<body>
<h1>My Photos</h1>
</body>
</html>Browser tab shows:
David's Photography Portfolio – Landscape & Nature💡 Real-world tip: A good page title is between 50 · 60 characters long, includes the most important keyword first, and accurately describes the page. Example:
"HTML Tutorial for Beginners | W3Schools"· not just"Home".
🤔 Thinking Prompt
What would happen if you wrote <title>My Page | Contact Us | Blog | Gallery</title>? Would that be a good title? Why or why not?
<title>: The Browser Tab Title. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <style> element lets you write CSS (Cascading Style Sheets) rules directly inside your HTML file. CSS is the language that controls how elements look · colours, sizes, fonts, spacing, and more.
Why does it matter?
Without CSS, every page looks plain and identical: black text on a white background in the browser's default font. The <style> element lets you change that for a single page.
💡 Analogy: If HTML is the structure of a house (walls, roof, doors), then CSS is the interior design · the paint colour, the furniture, the lighting.
Simple Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This paragraph is blue.</p>
</body>
</html>Visual output on the page:
- The entire page background is powder blue.
- The heading "Hello, World!" is red.
- The paragraph text is blue.
Breaking Down the CSS Syntax
body {
background-color: powderblue;
}body· the selector: which element to style.{ }· curly braces contain the rules.background-color· the property: what aspect to change.powderblue· the value: what to change it to.;· ends the rule (like a full stop in a sentence).
Second Example · Styling Multiple Elements
<style>
h1 {
font-size: 40px;
color: darkgreen;
}
p {
font-family: Arial, sans-serif;
color: #333333;
}
</style>Output: All <h1> headings will be 40 pixels tall and dark green. All paragraphs will use the Arial font and appear in dark grey.
⚠️ When to use
<style>vs a separate CSS file? The<style>element is useful for small, single-page designs or quick tests. For real websites with multiple pages, you should use the<link>element to connect a separate.cssfile (explained next). That way all pages share the same styling without copy-pasting.
<style>: Adding CSS Directly to the Page. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <link> element defines the relationship between the current HTML document and an external file. It is most commonly used to load a CSS file.
Why does it matter?
Imagine you have a website with 20 pages. If you use <style> in every file, you must update all 20 files whenever you change a colour. With <link>, you connect all 20 pages to ONE CSS file. Change that file once · all pages update instantly. This is how every professional website works.
The <link> Element Attributes
<link rel="stylesheet" href="mystyle.css">rel="stylesheet"· tells the browser the relationship: this external file
is a stylesheet (CSS file).
href="mystyle.css"· the path to the external CSS file.
⚠️ The
<link>element is self-closing · it has no closing</link>tag.
Simple Example
Imagine you have two files in the same folder:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Welcome</h1>
<p>This page uses an external CSS file.</p>
</body>
</html>mystyle.css:
body {
background-color: lightyellow;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}Output: When you open index.html, the browser reads the <link> tag, finds mystyle.css, and applies the styles. The background becomes light yellow, the heading is navy blue, and the paragraph text is 18 pixels.
Second Example · Linking from a Subfolder
If your CSS file is inside a folder called css/:
<link rel="stylesheet" href="css/mystyle.css">💡 Real-world use: Every major website links to one or more external CSS files. The
<link>tag can also be used to link to a website icon (favicon):<link rel="icon" href="favicon.ico">.
<link>: Connecting an External CSS File. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <meta> element provides information about the HTML document to browsers, search engines, and other web services. It is a self-closing element (no closing tag needed) and uses attributes to define what kind of information it carries.
💡 Analogy: A
<meta>tag is like a label on the back of a product. The product itself (the page content) is what you show visitors. The label (metadata) tells behind-the-scenes systems everything they need to know: what language it's in, what it's about, who made it.
The Most Important <meta> Tags
1. Character Set (charset)
<meta charset="UTF-8">What is charset? A character set is the system a computer uses to turn numbers into letters and symbols. UTF-8 is the universal standard that supports almost every language in the world · English, Arabic, Chinese, Yoruba, French accents, emojis, and more.
Why is it important? Without this declaration, some characters (like accented letters or non-Latin scripts) may display as garbled symbols (e.g., é instead of é).
⚠️ Always put
<meta charset="UTF-8">as the very first thing inside<head>. It must come before<title>so the browser knows how to read the title correctly.
2. Page Description
<meta name="description" content="Free web tutorials for beginners and experts.">name="description"· tells the browser this is a page description.content="..."· the actual description text.
Why is it important? Search engines (Google, Bing) read this description and often display it as the grey text below the blue link in search results. A good description can significantly increase how many people click your page.
3. Keywords
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">Why does it exist? This was historically used to tell search engines what topics the page covers. Modern search engines largely ignore it, but it is still part of the standard.
4. Author
<meta name="author" content="Jane Okafor">Why is it useful? Documents the person or organisation that created the page. Useful for CMS (Content Management Systems) and documentation sites.
5. Auto-Refresh
<meta http-equiv="refresh" content="30">What does this do? Tells the browser to automatically reload the page every 30 seconds. Useful for dashboards showing live data (stock prices, sports scores, server status) that need to update regularly.
You can also use it to redirect after a delay:
<meta http-equiv="refresh" content="5; url=https://www.example.com">This redirects the user to example.com after 5 seconds.
6. Viewport (Mobile-Responsive Setting)
<meta name="viewport" content="width=device-width, initial-scale=1.0">This is one of the most important meta tags for modern websites. Let's break it down word by word:
name="viewport"· targets the viewport (the visible area of a web page in
the browser window).
width=device-width· sets the page width to match the screen width of
the device (phone, tablet, laptop). Without this, a mobile phone would try to show the page at desktop width and zoom it out, making text tiny.
initial-scale=1.0· sets the zoom level to 100% when the page first loads.
💡 Real-world importance: If you do not include the viewport meta tag, your page will look bad on mobile phones. It will appear zoomed out with tiny text. Include this in every HTML page you create.
Full <meta> Example Together
<head>
<meta charset="UTF-8">
<meta name="description" content="A beginner's guide to growing tomatoes at home.">
<meta name="keywords" content="tomatoes, gardening, how to grow, vegetables">
<meta name="author" content="Amara Diallo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Grow Tomatoes at Home</title>
</head>Expected output (what the browser/search engine sees):
- Character encoding: UTF-8 (supports all languages)
- Search snippet description: "A beginner's guide to growing tomatoes at home."
- Author documented: Amara Diallo
- Mobile-friendly: Yes
- Browser tab title: "How to Grow Tomatoes at Home"
Nothing is visually displayed on the page from these tags · they all work behind the scenes.
<meta>: Metadata for the Browser, Search Engines & More. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <script> element is used to add JavaScript · the programming language that makes web pages interactive. JavaScript can respond to button clicks, validate forms, animate elements, fetch data, and much more.
Simple Example
<!DOCTYPE html>
<html>
<head>
<title>My JavaScript Demo</title>
<script>
function greetUser() {
document.getElementById("message").innerHTML = "Hello, JavaScript!";
}
</script>
</head>
<body>
<p id="message">Click the button below.</p>
<button onclick="greetUser()">Click Me</button>
</body>
</html>Before clicking the button:
Click the button below.
[Click Me]After clicking the button:
Hello, JavaScript!
[Click Me]Breaking Down the Script
function greetUser() {function· defines a reusable block of code called a function.greetUser· the name we give this function.()· parentheses hold any data passed to the function (none here).{· opens the function body.
document.getElementById("message").innerHTML = "Hello, JavaScript!";document· refers to the entire HTML page.getElementById("message")· finds the element withid="message"..innerHTML· the content inside that element.= "Hello, JavaScript!"· replaces that content with new text.
}- Closes the function body.
💡 Real-world note: In professional practice, JavaScript is usually stored in a separate
.jsfile and linked with<script src="myscript.js">, similar to how CSS is kept in an external file. You will learn more about JavaScript in a dedicated lesson.