What <meta charset="utf-8"> does in HTML?
⇩
⇩
➊ What is it?
Let's break down.
✛ meta: It's a HTML tag that contains metadata about a web page.
✛ charset: An HTML attribute that defines the character encoding for your browser to use when displaying the website content.
✛ utf-8: It's a specific character encoding.
Let's break down.
✛ meta: It's a HTML tag that contains metadata about a web page.
✛ charset: An HTML attribute that defines the character encoding for your browser to use when displaying the website content.
✛ utf-8: It's a specific character encoding.
➋ Where should it be in HTML?
When we use this, it's recommended to place it inside "head" element near the top of the document which ensures to use the correct encoding.
When we use this, it's recommended to place it inside "head" element near the top of the document which ensures to use the correct encoding.
➌ Why is character encoding important?
✧ Most websites these days has to display characters which are not traditional ASCII characters.
✧ When received such characters in HTML source, Browsers should be able to handle those to display properly.
✧ Most websites these days has to display characters which are not traditional ASCII characters.
✧ When received such characters in HTML source, Browsers should be able to handle those to display properly.
➍ Various Character Encodings
HTML Standards has listed many encodings along with UTF-8 with reference to "Encoding Standards".
Some examples:
⮑ UTF-8
⮑ ISO-8859-2
⮑ windows-1251
⮑ windows-1252
⮑ GBK
⮑ UTF-16BE
⮑ x-user-defined
Find full list:
encoding.spec.whatwg.org/#names-and-lab…
HTML Standards has listed many encodings along with UTF-8 with reference to "Encoding Standards".
Some examples:
⮑ UTF-8
⮑ ISO-8859-2
⮑ windows-1251
⮑ windows-1252
⮑ GBK
⮑ UTF-16BE
⮑ x-user-defined
Find full list:
encoding.spec.whatwg.org/#names-and-lab…
➎ Why should we use UTF-8?
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world.
➏ Alternatives
Are there any alternatives to <meta charset="utf-8">?
Well, yes. Let's explore those.
Are there any alternatives to <meta charset="utf-8">?
Well, yes. Let's explore those.
➏.➀ Content-Type
✧ Allow web server to include the Content-Type header in the response coming to browser.
Example:
Content-Type: text/html; charset=utf-8
✧ Allow web server to include the Content-Type header in the response coming to browser.
Example:
Content-Type: text/html; charset=utf-8
➏.➁ http-equiv metadata
✧ Set content for <meta http-equiv="Content-Type" in HTML.
✧ When present, it must be inside head element near the top of the document.
Example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
✧ Set content for <meta http-equiv="Content-Type" in HTML.
✧ When present, it must be inside head element near the top of the document.
Example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
➏.➂ BOM
✧ BOM (Byte-Order-Mark) is the usage of a special unicode character U+FEFF.
✧ It should be placed within the first 3 bytes of the document.
✧ BOM (Byte-Order-Mark) is the usage of a special unicode character U+FEFF.
✧ It should be placed within the first 3 bytes of the document.
➏.➃ HTML Entities
✧ The fallback that HTML has to display properly all UTF-8 characters by using HTML entities.
Refer this cheat sheet for more idea:
✧ The fallback that HTML has to display properly all UTF-8 characters by using HTML entities.
Refer this cheat sheet for more idea:
https://twitter.com/swapnakpanda/status/1483103112353447936?s=20
➐ Final Words
❐ We have to use appropriate content type (charset encoding) to display all characters properly.
❑ As a fall back, use HTML entities where required. But, don't overuse those.
❐ We have to use appropriate content type (charset encoding) to display all characters properly.
❑ As a fall back, use HTML entities where required. But, don't overuse those.
💭 Feedbacks
✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?
Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.
✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?
Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.
End of 🧵
Hey 👋 I am a Tech Educator from India 🇮🇳
I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.
Are you interested? I am sure, you are.
To never miss anything, Follow Me ✅
Hey 👋 I am a Tech Educator from India 🇮🇳
I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.
Are you interested? I am sure, you are.
To never miss anything, Follow Me ✅
• • •
Missing some Tweet in this thread? You can try to
force a refresh
