The Head Section

The Thinker Who Whispers to the Search Engine

Welcome to the head section of your HTML page, where the wise thinker resides, subtly communicating with search engines. It conveys crucial information and connects to powerful artifacts like the favicon — the tiny symbol glowing in the browser tab — as well as the legendary external CSS stylesheets and formidable scripts.

At first glance, this section might seem dry and unremarkable, but don’t be deceived. It is of utmost importance. Without it, search engines would treat your page like a lost scroll, and your magical artifacts would remain ineffective. Prepare yourself to explore this mystical area step by step, for this is where true magic begins.

Let’s Keep Going

description
author
icon
robots
stylesheet
<base>

The <head> Element

This Is Where the Page Thinks Before It Speaks

HTML

<head>
    <!-- Meta Information - This is a comment. -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Secrets of Webdesign</title>
    <meta name="keywords" content="HTML, CSS, Webdesign">
    <meta name="description" content="Discover the ancient secrets of web development with this magic book. HTML and CSS will become pure magic in your hands.">
    <meta name="author" content="text-magic">
    <link rel="icon" href="img/favicon.png" type="image/png">
    <meta name="robots" content="index, follow">
    <link rel="stylesheet" href="style.css">
</head>

Basic Elements

So you know what the page is talking about

<meta>

The Secret Puppeteers

<meta>

<link>

The Mediator Between HTML and the World

With <link>, you forge connections to stylesheets, icons, or external resources — acting like a gatekeeper deciding which external files are allowed into your webpage. Without <link>, your page might still run, but it would look like a badly formatted shopping list.

<link>

<!- -Comments- ->

Secret Notes for the Initiated

Inside <!– … –>, you can hide your own thoughts or cryptic messages that will hopefully still make sense to you (or your team) later on. Be sure to remember the shortcut in Visual Studio Code (Alt + Shift + A), because who wants to manually comment all the time when you have a magical shortcut that does it all with a snap of your fingers?

<!-- a comment -->

Attributes in the Head Section

The Little Helpers That Keep the Head in the Game

charset

So Your Text Doesn’t End Up in Hieroglyphics

In the mysterious realm of computers and the internet, there is an invisible system that determines how characters appear on your screen. This system is called a character set or “charset.” “UTF-8” ensures that special characters and emojis are displayed correctly. Additionally, it allows for efficient data storage and processing—all without magic!

<meta charset="UTF-8">

viewport

Because Not Everyone Reads on a Giant Spellbook

Ensure that your website looks just as brilliant on every device as it does on your favorite monitor. With width=device-width and initial-scale=1.0, your page adapts gracefully, whether on a tiny smartphone or a massive desktop. This means less zooming gymnastics for your users and a smile from search engines, which favor mobile-friendly sites.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

keywords

Whispers the Right Magic Words to the Search Engine

Contains magical keywords once intended to explain the content of your page to search engines. But in these modern times, this old spell receives little attention. Today, they value high-quality content, a great user experience, and the speed at which your page loads—these are the true ingredients for digital success.

<meta name="keywords" content="HTML, CSS, Webdesign">

description

The Blurb of Your Website — for Search Engines and the Curious

These magical attributes provide your webpage with a short, concise description that search engines use to highlight your content in search results. A well-crafted description of 150-160 characters attracts more visitors and gives them a glimpse of what awaits them.

<meta name="description" content="Discover the ancient secrets of web development with our magic book. HTML and CSS will become pure magic in your hands.">

author

Big Words, Small Stories — The Art of Storytelling in HTML

The name attribute with the value, “author”, is like a secret spell that reveals the true creator of your webpage. In this case, it’s the wise, “Master Rabbit”, whose knowledge and magic brought this page to life. With this spell, you ensure that search engines and all digital spirits recognize the architect behind this masterpiece.

<meta name="author" content="Master Rabbit">

icon

The Crest of Your Website — Small but Proud

Places a small crest as the symbol of the website in browser tabs, usually simple and concise, as it’s displayed in a tiny size. In this example, the image is located in the “img” folder. The term “favicon” comes from “favorite icon.” A cleverly chosen favicon leaves a lasting impression on visitors.

<link rel="icon" href="img/favicon.png" type="image/png">

robots

The Commanding Voice for Search Engine Crawlers

Search engine robots are famous for their tireless curiosity—they want to know everything and crawl through every page. These magical commands help you give them clear instructions:

index: commands the robots to explore the page and include its content in the vast directories of the internet. With noindex, you politely ask them to ignore your page and keep it out of search results.
follow: instructs the robots to follow the links on your page and explore the linked pages as well. nofollow, on the other hand, advises them to leave the links alone.

These commands give you control over your website’s visibility on the web and help you guide the search engine bots in the right direction before their curiosity gets the better of them.

<meta name="robots" content="index, follow">

stylesheet

The Style Advisor for Your Website

The <link> element is like a call to a design spellbook that defines how your website should look. It points to an external CSS file holding all its stylish secrets. The href attribute shows the way to it. And if you need even more magic—JavaScript files can be linked in a similar way.

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

<base>

The reference point for all links on the page

The <base> element is like an old lighthouse keeper, guiding relative links with its lantern. It sets a base URL so that all those links, images, and other wandering resources don’t get lost in the vastness of the web. The href attribute points them in the right direction, ensuring they follow the correct path—all without having to write out the full URL every time. Convenient, isn’t it?

<base href="https://www.yourdomain.com/folder/">

In this lesson, you have learned…

How the <head> element organizes your website by providing important meta information.
Why <meta> tags are crucial for supplying invisible yet vital data to search engines, browsers, and crawlers.
How to use <link> to connect external resources, such as stylesheets or favicons, for your site’s design.
The role of attributes like charset, viewport, and description in managing character encoding, mobile optimization, and search engine visibility.
How to control indexing and link structure using robots and base to guide your page intentionally.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Alchemy Shop: Eldria’s Essences

The mysterious alchemy shop, Eldria’s Essences, is a renowned place in Aetheron, run by the old and wise Eldria Moonspark. Eldria, who has been crafting magical potions and tinctures for centuries, specializes in healing potions, protective elixirs, and alchemical ingredients. Her shelves are filled with rare herbs, glowing crystals, and bottles shimmering gently in all the colors of the rainbow. Visitors seeking to unravel her secrets will find everything they need here for their adventures and magical experiments.

Your Task

Use the description above to create the following meta tags and the head section of your HTML page. Think about how to integrate the information in a meaningful way for a magical page like Eldria’s Essences. Use the text and the task instructions to apply the meta tags in your HTML document within the head section.

Set the meta charset to UTF-8.
Add a meta name=”viewport” tag to ensure the page looks good on all devices.
Create a title tag with an appropriate title for the alchemy shop.
Add a meta name=”keywords” tag with relevant keywords like “alchemy, potions, Eldria.” Use ten suitable words.
Create a meta name=”description” tag with a short summary of the shop. Pay attention to character length!
Use a meta name=”author” tag and set Eldria Moonspark as the author.
Link an icon (favicon) for the shop, e.g., a small potion.
Add a meta name=”robots” tag to instruct the search engine. The search engines should index the page and follow the links.
Link a stylesheet to enhance the magical appearance of the shop. The file is located in the CSS folder as style.css. Your page will look different after applying it.
In the body, write a heading, “Welcome to Eldria’s Essences,” and a short text: Here you will find magical potions, healing tinctures, and rare ingredients for your adventures and experiments.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Basic Meta Information -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title and Keywords -->
    <title>Eldria's Essences – Your Alchemy Shop in Aetheron</title>
    <meta name="keywords"
        content="Alchemy, Potions, Tinctures, Eldria, Healing, Magic, Protection, Ingredients, Crystals, Adventure">
    <meta name="description"
        content="Visit Eldria's Essences, the magical alchemy shop in Aetheron – healing potions, protection elixirs, and rare alchemical ingredients await you!">
    <meta name="author" content="Eldria Moonspark">

    <!-- Search Engines and Icon -->
    <meta name="robots" content="index, follow">
    <link rel="icon" href="img/favicon.png" type="image/png">

    <!-- Stylesheet Integration -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <!-- Welcome and Shop Description -->
    <h1>Welcome to Eldria's Essences</h1>
    <p>Here you will find magical potions, healing tinctures, and rare ingredients for your adventures and experiments.</p>
</body>

</html>

Let’s Keep Going