@hint/hint-meta-charset-utf-8
Advanced tools
hint for best practices related to the meta charset
utf-8 (meta-charset-utf-8)meta-charset-utf-8 checks if the page explicitly declares the
character encoding as utf-8 using a meta tag early in the document.
The character encoding should be specified for every HTML page, either
by using the charset parameter on the Content-Type HTTP response
header (e.g.: Content-Type: text/html; charset=utf-8) and/or using
the charset meta tag in the file.
Sending the Content-Type HTTP header is in general ok, but it’s
usually a good idea to also add the charset meta tag because:
Content-Type HTTP response header).One should always choose utf-8 as the encoding and convert any
content in legacy encodings to utf-8.
As for the charset meta tag, always use <meta charset="utf-8"> as:
It's backwards compatible and works in all known browsers, so it should always be used over the old
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">.
The charset value should be utf-8, not any other values such as
utf8. Using utf8, for example, is a common mistake, and even
though it is valid nowadays as the specifications
and browsers now alias utf8 to utf-8, that wasn’t the case in
the past, so things might break in some older browsers. The same may be true for other agents (non-browsers) that
may scan/get the content and may not have the alias.
It needs to be inside the <head> element and within the first
1024 bytes of the HTML, as some browsers only
look at those bytes before choosing an encoding.
Moreover, it is recommended that the meta tag be the first thing
in the <head>. This ensures it is before any content that could
be controlled by an attacker, such as a <title> element, thus
avoiding potential encoding-related security issues (such as the
one in old IE).
The hint checks if <meta charset="utf-8"> is specified as the first
thing in the <head>.
The character encoding is not specified in <html>:
<!doctype html>
<html lang="en">
<head>
<title>example</title>
...
</head>
<body>...</body>
</html>
The character encoding is specified using the meta http-equiv:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>example</title>
...
</head>
<body>...</body>
</html>
The charset value is not utf-8:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf8">
<title>example</title>
...
</head>
<body>...</body>
</html>
The meta charset is not the first thing in <head>:
<!doctype html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf8">
...
</head>
<body>...</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>...</body>
</html>
This package is installed automatically by webhint:
npm install hint --save-dev
To use it, activate it via the .hintrc configuration file:
{
"connector": {...},
"formatters": [...],
"hints": {
"meta-charset-utf-8": "error"
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency of
your project.
FAQs
hint for best practices related to the meta charset
The npm package @hint/hint-meta-charset-utf-8 receives a total of 15,306 weekly downloads. As such, @hint/hint-meta-charset-utf-8 popularity was classified as popular.
We found that @hint/hint-meta-charset-utf-8 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.