Module 3: Document Structure and Metadata
Language, Character Encoding, and Viewport
Set the document language, UTF-8 encoding, and mobile viewport correctly.
Three small declarations make a noticeable difference to how browsers and assistive technologies interpret a page.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
The lang attribute on the root element identifies the primary language. Screen readers use it to choose pronunciation rules, and translation tools can use it to identify the source language. Use a language tag such as en, en-IN, or hi when it accurately describes the content. Mark a passage in another language with its own lang attribute when appropriate.
The character encoding declaration tells the browser how to decode text bytes. UTF-8 is the standard choice for modern web documents. Keep the declaration near the beginning of the head so the browser encounters it early.
The viewport declaration tells mobile browsers to size the layout viewport to the device width. Without it, a mobile browser may use a wider virtual layout viewport and scale the page down, making text appear too small.
Avoid setting user-scalable=no or restrictive maximum-scale values. People who need to zoom should be able to do so.