Julien Sellier

Last update: 2024-12-09

HTML Page Boilerplate

Let's first show you the actual full page template, then we'll get into each part and explain why it's there.

Recommended page template:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Page Title</title>
  <meta name="description" content="Your awesome description here.">
  <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32x32 -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180x180 -->
</head>

<body>
  <!-- TODO -->
</body>

</html>

PS:

Standards Compatibality Mode

Ensure you have a <!DOCTYPE html> tag at the beginning of your HTML document: Otherwise, the document will be rendered in "quirks" mode, which would instruct the browser to emulate quirks in CSS and Selectors of old versions of some web browsers (ex: Internet Explorer).

Language Attribute

<html lang="en">

Character set

Should be positioned right after the <head> tag.

<head>
    <meta charset="UTF-8">

The charset declaration should be inserted in the first 1024 bytes of the HTML file. Ideally, put it right after opening the "head" tag.

Viewport

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

Favicon(s)

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32x32 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180x180 -->

Optional: Web App Manifest

Note: ".webmanifest" files should be served with a Content-Type of application/manifest+json.

<link rel="manifest" href="/app.webmanifest">

Example Web App Manifest file:

{
  "short_name": "MDN",
  "name": "MDN Web Docs",
  "icons": [
    {"src": "/favicon.192x192.png", "type": "image/png", "sizes": "192x192"},
    {"src": "/favicon.512x512.png", "type": "image/png", "sizes": "512x512"}
  ],
  "start_url": "/?utm_source=pwa",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Requirements to be installable:

Optional: Structured Data

Various structured formats have been used on web pages over the years to provide information to third party programs that may need structured information about your app such as search-engine crawlers and social media apps.

Common formats are:

They enable third party apps to provide a better user experience by showing your page with more information (ex: picture, author, and metadata).

Optional: Meta Theme Color

<meta name="theme-color" content="#dadec0">

References