pelicin › web › HTML

HTML Tags: Metadata

This chapter is quite technical/advanced. If this is your first time learning HTML, just remember these three:

  • <title>...</title> is used to change the browser's title bar.
  • <link rel="stylesheet" href="..."> is used to load external CSS file
  • <style>...</title> is used write CSS directly in HTML file

This is the list of HTML tags you would normally put inside <head>.

TagTypeDescription
<base>OtherDefines the base URL for all relative URLs in the page
<title>OtherDefines the document's title shown in the browser's title bar
<link>OtherSpecifies relationship with other document. (Normally used to load CSS.)
<meta>OtherRepresents metadata that cannot be represented with other tags.
<style>OtherDefines the style (CSS) for the page.

<base>

Defines the base URL for all relative URLs in the page (you will rarely use this).

Note that relative URLs are URLs without the protocol and host, such as /some/path, ./some/path (same as some/path), and ../some/path.

Possible attributes
  • href=[...] — the base URL
  • target=[...] — where to open it (read here)
<html>
  <head>
    <base href="https://another-site.com" />
  </head>

  <body>
    <!-- Will point to https://another-site.com/#anchor -->
    <a href="#anchor">Click here!!</a>
  </body>
</html>

<title>

Defines the document's title shown in the browser's title bar

<head>
  <title>About Us - Pelicin!</title>
</head>

<link>

Specifies relationship with other document. (Normally used to load CSS.)

Common attributes
  • href=[...] — URL of the linked resource
  • rel=[...] — relation of the linked resource to this document. Click here for the more elaborate list. Common values:
    • stylesheet (it's a CSS for this page)
    • icon (it's a favicon for this page)
    • canonical (it's the preferred URL of this page; i.e., to tell search engines that duplicates of this page should use this URL instead)
    • alternate (it's the alternate version of the page; e.g. in different language)
    • preload (this resource is needed soon, fetch it ASAP)
    • prefetch (this resource may be needed soon, fetch it when idle)
  • media=[...] — only load this resource if the media query matches (e.g. print or screen and (min-width: 600px))
  • type=[...] — MIME type of the linked resource
Attributes related to security
  • integrity=[...] — hash of resource to make sure it hasn't been tampered
  • crossorigin=[...] — read here
  • referrerpolicy=[...] — read here
Only when rel="alternate"
  • hreflang=[...] — indicates the language of the linked resource (e.g. en-US)
Only when rel="preload" OR rel="prefetch"
  • as=[...] — what you would have put as "rel" if you didn't put preload/prefetch
Only when rel="preload" AND as="image"
  • imagesrcset=[...] — srcset value of an <img srcset="..." sizes="..."> you want to preload
  • imagesizes=[...] — sizes value of an <img srcset="..." sizes="..."> you want to preload
<head>
  <!-- Loading CSS and favicon -->
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.ico" />

  <!-- The following URL is the preferred version of this page -->
  <link rel="canonical" href="https://www.mycompany.com/en-id/" />
  <!-- We also have alternate versions of this page -->
  <link rel="alternate" hreflang="id-id" href="https://www.mycompany.com/id-id/" />
  <link rel="alternate" hreflang="en-us" href="https://www.mycompany.com/en-us/" />
</head>

<meta>

Represents metadata that cannot be represented with other tags.

You may want to take a look at Open Graph meta specification to configure how social media sites display the thumbnail of your page.

Possible "key-value" pair attributes
  • name=[...] — Key like author or description (see here for the list)
  • http-equiv=[...] — Key to simulate HTTP response header, like content-security-policy or content-type
  • content=[...] — value for name or http-equiv
Special attribute
  • charset=[...] — What character encoding to use. Only utf-8 is valid.
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!-- Author and description -->
  <!-- Description will appear on search engine result -->
  <meta name="author" content="Ferdinand Antonius" />
  <meta name="description" content="Pelicin makes flight booking easier" />

  <!-- Open graph (for social media thumbnail) -->
  <meta property="og:title" content="Pelicin" />
  <meta property="og:description" content="Pelicin makes flight booking easier." />
  <meta property="og:image" content="http://pelicin.netlify.app/thumbnail.jpg" />
  <meta property="og:url" content="http://pelicin.netlify.app/index.html" />
</head>

<style>

Defines the style (CSS) for the page. You can place this anywhere (even in <body>).

Possible attributes
  • media=[...] — The media to which the style is applied, e.g. screen and (max-width: 600px)
  • nonce=[...] — Nonce for CSP
<head>
  <!-- Make texts red by default -->
  <style>
    body {
      color: red;
    }
  </style>

  <!-- On small screens (width <= 600), they become blue -->
  <style media="screen and (max-width: 600px)">
    body {
      color: blue;
    }
  </style>
</head>

References