HTML Charsets


charset (character set) in HTML defines the encoding used to display text characters on a webpage. It tells the browser how to interpret the bytes in your HTML file into readable characters.


🔹 Why Specify Charset?

  • Ensures correct display of text, especially for non-English or special characters

  • Prevents garbled or unreadable characters

  • Supports internationalization and multiple languages


🔹 Common Charsets

  • UTF-8: The most popular charset today, supports almost all characters and languages.

  • ISO-8859-1 (Latin-1): Supports Western European languages.

  • UTF-16: Supports all Unicode characters, less commonly used for web.

  • ASCII: Supports basic English characters only.


🔹 Declaring Charset in HTML

Use the <meta> tag inside the <head> section:

<meta charset="UTF-8" />

This tag tells browsers to interpret the document using UTF-8 encoding.


💻 Example: HTML with Charset Declaration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Charset Example</title>
</head>
<body>
  <p>Example with special characters: ñ, ü, ö, 漢字, 😊</p>
</body>
</html>

🔹 Setting Charset in HTTP Headers

Web servers can send the charset via HTTP headers, e.g.:

Content-Type: text/html; charset=UTF-8

This complements or overrides the <meta charset> tag.


Practice Questions

Q1. Write the correct HTML <meta> tag to set charset to UTF-8.

Q2. Explain why UTF-8 is preferred over ASCII for webpages.

Q3. Show how to declare ISO-8859-1 charset in HTML.

Q4. Describe what happens if no charset is declared.

Q5. Write a webpage that displays characters from multiple languages correctly.

Q6. Explain the difference between UTF-8 and UTF-16.

Q7. Demonstrate how to set charset in HTTP server headers (example for Apache or Nginx).

Q8. Identify charset problems from given garbled text.

Q9. Explain why charset declaration should be as early as possible in HTML.

Q10. Create a sample HTML page with emoji and special symbols and correct charset.


HTML Charsets Quiz

Q1: What does the charset in HTML define?

A. Font style
B. Text encoding for characters
C. Page layout
D. CSS styles

Q2: Which charset is most widely used on the web?

A. ASCII
B. ISO-8859-1
C. UTF-8
D. UTF-16

Q3: How do you declare UTF-8 charset in HTML5?

A. <meta charset="utf-8">
B. <meta charset="UTF-8">
C. Both a and b
D. <meta charset="utf8">

Q4: What might happen if no charset is declared?

A. Browser uses default encoding which may cause text errors
B. Page crashes
C. Page loads faster
D. Nothing happens

Q5: Which tag declares charset in HTML?

A. <charset>
B. <meta>
C. <script>
D. <style>

Q6: Which of the following is NOT a charset?

A. UTF-8
B. ASCII
C. ISO-8859-1
D. HTML5

Q7: What is the purpose of the HTTP header Content-Type: text/html; charset=UTF-8?

A. Set text color
B. Set character encoding
C. Define page title
D. Specify CSS file

Q8: UTF-8 encoding uses how many bytes per character?

A. Always 1 byte
B. Always 2 bytes
C. Variable (1 to 4 bytes)
D. 8 bytes

Q9: Which language characters can UTF-8 represent?

A. Only English
B. Almost all languages
C. Only Asian languages
D. Only European languages

Q10: Where should the charset meta tag be placed?

A. At the end of the document
B. Inside the <head> section, preferably early
C. Inside <body>
D. Inside a CSS file

Go Back Top