Skip to content
Laviyx Learn

Try

HTML course menu

The HTML head Element: title, meta, link, style, script and base

Learn what goes in the HTML head: the title element, meta charset and viewport, link for stylesheets, icons and other resources, style and script, the base element, and the recommended order of head elements.

Intermediate5 min readUpdated
On this page

The <head> holds information about the page: its title, character encoding, how it should scale on phones, which stylesheets and scripts to load, its icon, and how it appears in search results and social media. None of it is shown in the page body, but all of it matters.

A typical head#

HTML
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lemon Rice Recipe | Laviyx Kitchen</title>
  <meta name="description" content="A quick South Indian lemon rice recipe ready in 15 minutes.">
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/styles.css">
  <script src="/js/app.js" defer></script>
</head>

The elements allowed in head#

ElementPurpose
<title>The page title. Required, exactly one.
<meta>Information as name-value pairs: charset, viewport, description and more
<link>Connects external resources: stylesheets, icons, canonical URL, preloads
<style>CSS written inside the page
<script>JavaScript, inline or loaded from a file
<base>The base URL for every relative link on the page (rarely needed)
<noscript>Content used when JavaScript is turned off

title#

The title is shown in the browser tab, in bookmarks, in history, and usually as the clickable headline in search results. It is also the first thing a screen reader announces when a page loads.

  • Make each page's title unique and descriptive.
  • Put the specific part first: "Lemon Rice Recipe | Laviyx Kitchen", not "Laviyx Kitchen | Recipes | Lemon Rice".
  • Keep it reasonably short. Search engines cut off long titles, often after about 50 to 60 characters.

meta charset#

HTML
<meta charset="utf-8">

Declares the text encoding. Put it first in the head: browsers need it within the first 1024 bytes of the file.

meta viewport#

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

Without this, phone browsers pretend to be a wide desktop screen (often about 980 pixels) and zoom out, so text is tiny. With it, the page is laid out at the device's real width, which is the starting point for responsive design.

Do not add user-scalable=no or maximum-scale=1: they stop people from zooming, which many users need to read.

<link> connects the page to other files. The rel attribute says what the relationship is:

relMeaning
stylesheetLoad and apply a CSS file
iconThe site icon (favicon) shown in tabs and bookmarks
apple-touch-iconIcon used when an iPhone user adds the site to their home screen
canonicalThe preferred URL of this page, for search engines
preloadStart downloading an important file (a font, a hero image) early
preconnectConnect early to another server you will load files from
manifestA web app manifest, for installable web apps

style, script and base#

<style> and <script> are covered in Adding CSS and JavaScript.

<base> changes the starting point of every relative URL on the page:

HTML
<base href="https://www.example.com/docs/">

With this, href="intro.html" points to https://www.example.com/docs/intro.html. Because it affects every link, image and fragment link, it causes surprising bugs and is rarely used.

Order#

A good order is: charset first, then viewport, then title, then everything else. The meta, link and script elements can then follow in whatever order suits you, with stylesheets before scripts that depend on them.

Practice#

Practice exercise

Write the head for a page called "Contact Us" on a site called "Green Leaf Café". Include the charset, viewport, title, a description, an SVG icon at /icon.svg and a stylesheet at /styles/main.css.

Show solution
HTML
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Us | Green Leaf Café</title>
  <meta name="description" content="Find the Green Leaf Café address, opening hours and phone number, or send us a message.">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/styles/main.css">
</head>

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML Meta Tags for SEO and Social Sharing: description, canonical, robots and Open GraphLearn the HTML meta tags that matter for search engines and social media: title and meta description, canonical URLs, the robots meta tag, Open Graph and Twitter card tags, hreflang, and structured data basics.Intermediate5 min readHTMLAdding CSS and JavaScript to HTML: link, style, script, defer and asyncLearn the ways to add CSS to HTML (external stylesheets, style elements and inline styles) and JavaScript (external files and inline scripts), where to put script tags, and the difference between defer, async and type=module.Intermediate6 min readHTMLHTML Document Structure: DOCTYPE, html, head and body ExplainedUnderstand the structure of an HTML document: the DOCTYPE declaration, the html root element and the lang attribute, what belongs in head and body, character encoding, the viewport meta tag, and how browsers build the DOM tree.Beginner5 min read