meta charset attribute
The charset attribute on the meta element:
- → represents the document character-encoding declaration
- it allows you to specify the character set used to encode your document - see the List of all Character sets
- charset is a specific attribute → can be applied ONLY on the next HTML5 elements: meta, script
Warning
- only one element with a charset attribute (e.g. < charset="UTF-8">) is allowed per HTML5 document
- for security purposes, you need to specify the character set used by your document otherwise you are vulnerable to XSS attacks (e.g. scripts UTF-7 encoded could be injected into your web page)
- it is important to specify the character set used to encode your document for your browser to know how to decrypt it in order to render it properly
Encoding HTML5 documents
Examples
| <meta | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 3. | charset | = | character encoding name | < charset="UTF-8"> < http-equiv="content-type" content="text/html; charset=UTF-8"> |
Video demonstration meta charset attribute
HTML5 meta charset attribute Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: charset attribute on meta element: declaring the character encoding set of the HTML document |
| 00:02 | the charset attribute on meta element represents the document character-encoding declaration |
| 00:08 | due to this declaration the browser knows how to decrypt the characers of your page in order to render them properly |
| 00:14 | let's add the character-encoding declaration to our page |
| 00:19 | the character set should be specified inside the head element (as first element) if not already set at the server level (which is even better) |
| 00:29 | the character set can be specified in 2 ways (1 is enough) in your HTML5 document (we recommend the new way) |
| 00:31 | specifying the character set and the MIME type, the old way (HTML5, HTML4.01): <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 00:37 | specifying the character set the new way (HTML5): <meta charset="UTF-8"> |
| 00:44 | we just declared that out document is UTF-8 encoded |
| 00:47 | Note 1: it is important to specify the character set used by your document for security purposes |
| 00:52 | Note 2: it is important to specify the character set used by your document for your browser to know how to decrypt it in order to render it properly |
| 00:57 | in this way we specified the character set at document level BUT declaring the character encoding set at the server level reduces browser processing and the page load time (page speed increased) |
| 01:03 | Firefox test: testing the html file in Firefox without any character set specified |
| 01:15 | Note the Firefox warning: "The characater encoding of the HTML document was not declared. The document will render with garled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." |
| 01:29 | declaring the characater encoding of our HTML document |
| 01:32 | file saved, file in browser refreshed and → Firefox warning message no longer displays |