<zhead>
HTML tag collections

Essentials

Three declarations worth setting on almost every HTML document: language, UTF-8 encoding, and a responsive viewport.

Start here. The language helps assistive technology pronounce the page, UTF-8 keeps text predictable, and the viewport declaration makes responsive layouts match the device width.

Get started

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</html>
useHead({
  htmlAttrs: {
    lang: 'en'
  },
meta: [
  {
    charset: 'charset',
    content: 'UTF-8'
  },
  {
    name: 'viewport',
    content: 'width=device-width, initial-scale=1'
  }
]
})

Recommendations

  • 01
    Set the document language
    Put lang on the html element so screen readers can choose the right pronunciation rules.
  • 02
    Declare UTF-8 early
    Keep the charset declaration within the first 1024 bytes of the document. UTF-8 is the only conforming encoding for new HTML documents.

Explanation

lang

Declares the document language so browsers and assistive technology can apply the right language rules.

<html lang="en">

</html>
Declares English as the document language.

charset

charset

Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8.

<meta charset="utf-8">
The required character encoding for modern HTML.

viewport

name

Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas.

<meta name="viewport" content="width=device-width, initial-scale=1">
The usual responsive default: match the device width and start at a 1:1 scale.

More collections

Start with the closest collection, then trim it to match your page.

SEO Starter

Social Preview

Icons & Colors

PWA

Article