The <meta> Element
As defined in the HTML Living Standard, the <meta> element represents various kinds of metadata that cannot be expressed using the <title>, <base>, <link>, <style>, or <script> elements.
The <meta> tag is a void element and must be placed inside the <head> of your document.
Accessibility Impact: The Viewport
The viewport metadata is essential for modern web accessibility. It tells the browser how to scale the page on different screen sizes.
WCAG Requirement: Reflow
Success Criterion 1.4.10 (Level AA): Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions.
A standard meta viewport tag (width=device-width, initial-scale=1.0) ensures that the layout adapts correctly to small screens.
Warning: Never use user-scalable=no or maximum-scale in your meta tag. This prevents users with low vision from zooming into content, which is a significant accessibility failure.
The Danger of Meta Refresh
The http-equiv="refresh" attribute can be used to automatically reload the page or redirect the user.
WCAG Requirement: Timing Adjustable
Success Criterion 2.2.1 (Level A): For each time limit that is set by the content, at least one of the following is true: [The user can turn off the limit, adjust it, or extend it].
Automated page refreshes or redirects via <meta> are disorienting for all users, particularly those using screen readers or those who need more time to read content. Avoid this pattern entirely; use server-side redirects or clear, user-triggered navigation instead.
Standard Categories
- Character Encoding:
<meta charset="UTF-8">should always be the first element in the head to ensure characters are interpreted correctly. - Search Engines:
name="description"provides the summary shown in search results, helping users identify the content before clicking. - Social Metadata: Non-standard but widely used properties (like Open Graph
og:title) help assistive tools parse site previews correctly when shared on social platforms.