What the Head Does

Every HTML document has two main parts:

  • The <head> section contains information about the page (metadata).
  • The <body> section contains the content that appears in the browser.

The head doesn't display in the browser window, which is why there are no screenshots for what your code will look like. But the head does quietly handle background tasks such as: 

  • Naming the page using <title> 
  • Describing the page for search engines with <meta> 
  • Linking to stylesheets, icons, and scripts • Controlling how the page displays on different devices

Without a well-structured head, your page might look fine but will behave unpredictably in search results or on mobile screens. As you work with the HTML of this section, you can always right click in the Playground and click "View Frame Source" to make sure you are on the right track.


The Head in Action

Proper Head Construction in HTML

Here's an example of a complete HTML document with a proper head:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Your Name">
    <meta name="description" content="A short description of my webpage.">
    <title>My Portfolio Homepage</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>
    <h1>Welcome to My Portfolio</h1>
    <p>This content is visible in the browser.</p>
  </body>
</html>


The Essential Head Elements

Element | Purpose | Example

<!doctype html> | Tells the browser to use modern HTML5 | <!doctype html> 

<html lang="en"> | Defines the document language for accessibility | <html lang="en"> 

<meta charset="utf-8"> | Sets character encoding so text displays correctly | <meta charset="utf-8"> 

<meta name="viewport"> | Ensures the page scales properly on mobile devices | <meta name="viewport" content="width=device-width, initial-scale=1"> 

<title> | Sets the browser tab name and bookmark title | <title>My Portfolio</title>

<meta name="author"> | Identifies the page author | <meta name="author" content="Your Name"> 

<meta name="description"> | Describes the page for search engines | <meta name="description" content="Student portfolio for web development."> 

<link rel="icon"> | Adds a small icon (favicon) in browser tabs | <link rel="icon" href="favicon.ico"> 

<link rel="stylesheet"> | Connects your CSS file | <link rel="stylesheet" href="assets/css/style.css">


Title vs. h1 - What's the Difference?

The <title> and <h1> elements both seem like titles, but they serve different purposes.

Element | Appears Where | Used For <title> | Browser tab, bookmarks, search results | Describes the webpage itself <h1> | On the page | Introduces the page content

Example:

<head>
  <title>My Portfolio Homepage</title>
</head>

<body>
  <h1>Welcome to My Portfolio</h1>
</body>

When you bookmark this page, the text "My Portfolio Homepage" comes from the <title> tag, not <h1>.


The Meta Tag: Small Tag, Big Job

The <meta> tag stores information about your page that browsers and search engines use.

  1. Character Encoding
<meta charset="utf-8">

Tells browsers to read the page using UTF-8 encoding, which supports nearly every written language.

  1. Description and Author
<meta name="author" content="Your Name">
<meta name="description" content="My online portfolio and projects.">

These help search engines and assistive tools understand your page content.


Optional but cCommon Metadata

You may also see other types of <meta> and <link> tags. These provide richer data for social media or mobile devices.

Example:

<meta property="og:title" content="My Portfolio">
<meta property="og:image" content="assets/img/preview.png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
  • The og: (Open Graph) tags are used by platforms like Facebook or LinkedIn to display preview images and descriptions. 
  • The apple-touch-icon defines the icon that appears when a user saves your site to an iPhone or iPad home screen.

You don't need to use these now, but you'll recognize them when viewing other sites' source code.


Try It Now: What's in Your Head?

  1. Open the MDN Playground (https://developer.mozilla.org/en-US/play).
  2. Copy this starter template:
<!doctype html>
<html lang="en">
  <head>
    <!-- Add your head elements here -->
  </head>

  <body>
    <h1>Hello from my webpage!</h1>
    <p>This is my test content.</p>
  </body>
</html>
  1. Add the following head elements, one at a time: 
    •  <meta charset="utf-8"> 
    •  <meta name="author" content="Your Name">
    • <meta name="description" content="A practice page for learning HTML heads."> 
    • <title>My Practice Page</title>
  2. Run it and check your browser tab - does your title appear correctly?
  3. Right-click and choose "View Page Source" to see your metadata in action.


Common Fixes

The title doesn't appear correctly or changes in the browser tab

→ Make sure title is inside head (not h1)

Weird characters or symbols appear

→ Add meta charset="utf-8"

Page looks wrong on mobile

→ Add meta name="viewport" content="width=device-width, initial-scale=1"

CSS isn't loading

→ Check the link rel="stylesheet" path and keep it inside head

Meta tags show on the page

→ Meta tags belong in head, not body

Accessibility or validation warnings

→ Add html lang="en"


Reflection

  • What does the <head> section control that the <body> does not? 
  • Why should every HTML page include <meta charset="utf-8"> and <meta name="viewport">? 
  • How does the <title> tag affect bookmarks and search results?

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.