Declare UTF-8 character encoding
The charset (UTF-8) is declared correctly as the first element in the head.
- Add `<meta charset="UTF-8">` as the first element in <head>
- Must appear within the first 1024 bytes of the document
- UTF-8 supports all languages and special characters
Rule Details
The UTF-8 character set must be declared early in the HTML head to ensure proper character rendering across all languages and symbols.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<!-- Content with international characters: Café, 北京, العربية -->
</body>
</html>Why It Matters
- International Support: Enables proper display of all Unicode characters
- Security: Prevents character encoding attacks
- Early Declaration: Must be within first 1024 bytes of document
- Consistency: Ensures same rendering across all browsers and platforms
Framework Examples
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Best Practices
✅ Position Early: Place as first meta tag
<head>
<meta charset="UTF-8">
<!-- Other meta tags follow -->
</head>✅ Use UTF-8: Universal character support
<meta charset="UTF-8">❌ Avoid Old Syntax: Don't use verbose XHTML syntax
<!-- Don't use this -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Tools & Validation
- W3C Markup Validator (opens in new tab)
- HTML5 Validator (opens in new tab)
- Browser DevTools Network tab to check response headers
Standards
- Use MDN: HTML as the standard for the final rendered HTML and browser-facing behavior.
- Use WHATWG HTML Living Standard as the standard for the final rendered HTML and browser-facing behavior.
Verification
Automated Checks
- Inspect the final rendered HTML in the browser or page source to confirm the rule is satisfied.
- Validate the affected markup with browser tooling or an HTML validator where appropriate.
- Test one representative route or template that uses the pattern.
- Re-check shared components that emit the same markup so the fix is consistent.
Manual Checks
- Verify the rendered browser behavior manually on representative routes and supported browsers so the user-facing outcome matches the rule.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Verify that this HTML document declares UTF-8 character encoding in the head section and that it's positioned early in the document.
Fix
Auto-fix issues
Add <meta charset="UTF-8"> as the first meta tag in the head section of the HTML document.
Explain
Learn more
Explain why UTF-8 character encoding is essential for international content support and preventing character display issues.
Review
Code review
Review templates, server-rendered HTML, and shared components that output markup related to Declare UTF-8 character encoding. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.