HTML Head

❮ Previous Next ❯
Lesson 35 of 58

The <head> element is like the control center of your web page. It holds information about the page that is not shown to visitors. This includes the page title, character set, styles, scripts, and instructions for search engines.

What is the Head Element?

The <head> element sits between the <html> tag and the <body> tag. Everything inside the head is metadata. Metadata is data about your data. It describes your page to browsers, search engines, and social media sites.

Basic Head Structure

Notice that nothing from the head appears on the actual page. It is all behind the scenes.

The title Element (Required!)

The <title> element is required in every HTML document. It defines the title of your page. The title shows up in:

  • The browser tab
  • Bookmarks and favorites lists
  • Search engine results (as the clickable headline)

For SEO (Search Engine Optimization), the title is very important. Search engines use it to understand what your page is about.

Title Element Example
Tip: Make your title descriptive and under 60 characters. Put important keywords at the beginning. And make every page on your site have a unique title.

The style Element (Internal CSS)

The <style> element is where you put CSS rules that apply only to this page. This is called internal CSS.

Style Element Example

Internal CSS is fine for single pages. For multi-page websites, external CSS is usually better.

The link Element (External CSS)

The <link> element connects your HTML page to an external CSS file. This is the best way to style a website with many pages.

Link to External CSS 
<link rel="stylesheet" href="styles.css">

The rel="stylesheet" tells the browser it is a stylesheet. The href attribute gives the path to the CSS file.

Note: The link element has no closing tag. It is an empty element.

The meta Element (Metadata)

The <meta> element provides metadata about your page. It is not visible on the page, but browsers, search engines, and social media sites use it.

Here are the most important meta tags you should know:

Character Set (UTF-8) 
<meta charset="UTF-8">

This ensures your page shows all characters correctly, including emojis and special symbols.

Page Description (for search engines) 
<meta name="description" content="Learn HTML for free with easy examples">

This description often appears under your page title in Google search results.

Keywords (for search engines) 
<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">

Keywords help search engines understand your page topics.

Author 
<meta name="author" content="Jane Doe">
Auto Refresh (every 30 seconds) 
<meta http-equiv="refresh" content="30">

This makes the page reload automatically every 30 seconds.

The Viewport Meta Tag (Mobile Responsive)

This is one of the most important meta tags. It makes your website look good on phones and tablets. You should include this on every page.

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

What does this do?

  • width=device-width – Sets the page width to match the device screen width
  • initial-scale=1.0 – Sets the initial zoom level to 100%

Without this tag, mobile browsers assume the page is 980px wide and zoom out, making text tiny. With this tag, your page fits perfectly on any screen.

Tip: Always include the viewport meta tag in every HTML page you make. It is essential for mobile-friendly websites.

The script Element (JavaScript)

The <script> element is used to add JavaScript to your page. You can put JavaScript directly inside the tag or link to an external file.

Script Element Example

The script can also be placed in an external file:

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

The base Element (Base URL for All Links)

The <base> element specifies a default URL and default target for all links on your page. It is rarely used, but good to know about.

Base Element Example 
<base href="https://www.example.com/" target="_blank">

With this base tag, every relative link on your page will start with “https://www.example.com/” and open in a new tab.

Note: There can only be one <base> element in a document. If you have multiple, only the first one works.

Complete Head Example

Here is a complete head section with all the important elements:

Complete Head 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free HTML tutorials for beginners">
  <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
  <meta name="author" content="Your Name">
  <title>My Awesome Website - Learn HTML</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
  <style>
    /* Internal CSS if needed */
    body { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <!-- Your page content here -->
</body>
</html>

Quick Summary

  • The <head> contains metadata about your page. Nothing inside it is visible on the page.
  • <title> is required. It shows in browser tabs and search results.
  • <style> is for internal CSS.
  • <link> connects external CSS files.
  • <meta> provides metadata like character set, description, and viewport.
  • The viewport meta tag is essential for mobile responsiveness.
  • <script> adds JavaScript to your page.
  • <base> sets a default URL for all relative links.

What Just Happened? Let Me Explain

  • The head is like the ID card of your webpage. It tells everyone who you are, what language you speak, and how to display you properly.
  • Google uses the title and description meta tags to understand your page and show it in search results.
  • The viewport meta tag is the difference between a website that works on phones and one that does not.
  • Always put your CSS links and JavaScript scripts in the head (or just before the closing body tag for better performance).
  • Every HTML page you create should have at least: meta charset="UTF-8", meta viewport, and a good title.
Tip: Open VS Code and create a new HTML file. Start with the boilerplate and add all the head elements you learned. Add a title, description, viewport, and link to an external CSS file. Then open the page on your phone or use Chrome DevTools to see the mobile view. This will teach you why the viewport meta tag matters.

HTML Head Reference

Here are the tags we covered in this chapter:

Tag Description
<head> Container for metadata (not displayed on page)
<title> Defines the page title (shown in browser tab and search results)
<style> Defines internal CSS styles
<link> Links to an external resource (usually CSS)
<meta> Provides metadata (charset, description, keywords, viewport)
<script> Defines client-side JavaScript
<base> Sets base URL for all relative links
❮ Previous Next ❯
Lesson 35 of 58