Skip to content

The Head Tag

The <head> section does not show anything on screen — but it controls important things about how your page behaves. Let's look at what goes inside it.

<title>

Sets the text that appears in the browser tab.

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

Open a few websites and look at their browser tabs — those words all come from <title>. It is also what shows up when someone bookmarks your page or shares the link.

<meta charset="UTF-8">

Tells the browser what character set to use when reading your file.

<meta charset="UTF-8">

Without it, special characters — accented letters, apostrophes, symbols — can show up as garbled text. Always include it. It is a self-closing tag, so no closing tag needed.

<meta name="viewport">

Makes your page display correctly on mobile screens:

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

Without it, phones zoom way out and show a tiny shrunken version of your page. With it, the page fits the screen properly.

A complete <head> section

Putting it all together:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>

That is the standard starting point for every page you build from now on. You will also add a <link> here later when you start using CSS.

VSCode shortcut — the ! trick

In VSCode, open any .html file, type ! on an empty line, and press Tab.

VSCode fills in the entire skeleton for you automatically — DOCTYPE, html, head with all the meta tags, and body. Try it right now in a new file.

It is faster than typing everything by hand, and you never have to remember the meta tag syntax.

Challenge

Update your first.html:

  • Add <meta charset="UTF-8"> to the head
  • Add the viewport meta tag
  • Change the <title> to something that describes your page

Refresh your browser and look at the tab at the top — do you see your title there?

← The HTML Skeleton    Next: Your First Proper HTML File →