HtmlHow-ToBeginner · 3 min read

How to Set Charset in HTML: Simple Guide

To set the character encoding in HTML, use the <meta charset="UTF-8"> tag inside the <head> section. This tells the browser how to read and display the text correctly.

📐

Syntax

The charset is set using a <meta> tag inside the <head> of your HTML document. The attribute charset specifies the character encoding.

<meta>: HTML tag for metadata
charset: attribute to define encoding
"UTF-8": the most common encoding supporting many characters

html

<meta charset="UTF-8">

💻

Example

This example shows a complete HTML page with the charset set to UTF-8. It ensures that all characters, including special symbols and emojis, display correctly in the browser.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Charset Example</title>
</head>
<body>
  <h1>Hello, world! 👋</h1>
  <p>This page uses UTF-8 charset to display emojis and special characters correctly.</p>
</body>
</html>

Output

Hello, world! 👋 This page uses UTF-8 charset to display emojis and special characters correctly.

⚠️

Common Pitfalls

Common mistakes when setting charset include:

Placing the <meta charset> tag too late in the <head>. It should be near the top for browsers to detect early.
Using outdated or incorrect charset values like ISO-8859-1 instead of UTF-8.
Not including the charset tag at all, causing text to display incorrectly.

html

<!-- Wrong: charset tag too late -->
<head>
  <title>Wrong Charset</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
</head>

<!-- Correct: charset tag first -->
<head>
  <meta charset="UTF-8">
  <title>Correct Charset</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

📊

Quick Reference

Remember these tips when setting charset in HTML:

Always use <meta charset="UTF-8"> for broad character support.
Place the charset tag as the first element inside <head>.
Include lang attribute in <html> for language clarity.

✅

Key Takeaways

Set charset using inside the section.

Place the charset tag near the top of the for best browser support.

UTF-8 encoding supports most characters and emojis worldwide.

Omitting or misplacing charset can cause text display errors.

Always include the lang attribute in the tag for accessibility.