HTML / HTML Attributes

HTML Charset Attribute

Oct 12, 2022
2 min read
HTML charset Attribute

Definition

The charset attribute specifies the character encoding for the HTML document.

Applicable Elements

The charset Attribute can be used with the following elements:

HTML <meta> charset Attribute

The <meta> tag specifies metadata, or information, about a HTML document that cannot otherwise be expressed using the <title>, <base>, <link>, <style>, or <script> tags.

The charset attribute specifies the character encoding for the HTML document when used in the <meta> element.

Syntax

<meta charset="UTF-8">

Usage

  • There should only be one <meta> element with a charset attribute in a document.
  • The <meta> element should be located in the <head>.
  • The charset attribute accepts space-separated character encodings. Common values include:
    • UTF-8 - Unicode character encoding.
    • ISO-8859-1 - Latin alphabet character encoding.
  • The HTML5 specification recommends UTF-8 as it avoids unexpected results on form submissions and URL encoding.
  • You should keep the use of attributes and associated values defined on the <head> element to a minimum. This allows for proper detection of the character encoding declaration (e.g. <meta charset="utf-8"/>) within the first 1024 bytes.

Values

The HTML5 recommended value is:

  • UTF-8

But you can use any character encoding set. See here for a full list.

Examples

The following example shows a <meta> element that sets the the document charset to the UTF-8 character encoding:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Title Element goes here.</title>
</head>
<body>
    <h1>Displayed Page Title</h1>
    <p>The main content of your page goes here.</p>
</body>
</html>

Specification

The charset HTML specification for the <meta> element is as follows:

Browser Support

The charset attribute has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
<meta>YesYesYesYesYesYes
<script>YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
<meta>YesYesYesYesYesYes
<script>YesYesYesYesYesYes