HTML page tips

Recommendations for developing HTML pages.

Last updated on: 2024-12-09

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><!-- TODO --></title>
  <meta name="description" content="<!-- TODO -->">
  <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
</head>

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

</html>

Example HTML page.

PS:

Do not forget to modify the `lang`'s attribute to your app's language if needed.
Serve your HTML page with a `Content-Type` of `text/html; charset=utf-8`.

Use "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).

References:

Official Quirks specs Quirks mode explained on MDN

Set the global language attribute

<html lang="en">

References:

Global "lang" attribute explained on MDN

Character set

Should be positioned right after the <head> tag.

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

HTML code

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"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

HTML code

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"
}

Example of a Web App Manifest file

Requirements to be installable:

Web Manifest file explained on MDN PWA installation criteria

Optional: Structured information

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:

JSON+LD
Open Graph (OG) Meta Tags

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

H5BP's HTMl5 boilerplate