Charset set for a HTML file.

Devin Johw — Sun, 17 Mar 2024 09:09:22 +0000

Today, I rethought the HTML meta tag <meta charset="UTF-8">. I got some new knowledge.

Two ways to specify charset in a HTML file

When I use VSCode, I found an interesting abbreviation meta:utf, then I inset the corresponding code <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> into the editor. It was right then I thought it seemed this line of declaration was used to specify a charset of a HTML file. If so, what about <meta charset="UTF-8">. Then I Googled it, and I found this article on stackoverflow.

In HTML5, they are equivalent. Use the shorter one, as it is easier to remember and type. Browser support is fine since it was designed for backwards compatibility.

So I should always use <meta charset="UTF-8">.

HTTP Header `Content-Type` or `<meta charset="UTF-8">`

As I know, we can also specify a charset for a HTML file with HTTP Response Header Content-Type: text/html; charset=UTF-8. But I want to know which has higher priority. So I built a simple Node.js server to figure out it. Here's the code:

const http = require("http");

http
  .createServer((req, res) => {
    res.writeHead(200, {
      "Content-Type": "text/html; charset=UTF-8"
    })
    res.write(`<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; windows-1252">
  </head>
  <body>
    <p>你好</p>
  </body>
</html>`);
    res.end();
  })
  .listen(3000);

Then I access http://localhost:3000, then I got the Chinese Characters. Obviously, HTTP Response Header has a higher priority.

Default character set for a HTML file in Chrome

The default character set is windows-1252. If you open the HTML file directly with Chrome, it seems to be UTF-8. So in Firefox, while no in Safari whose defalut character set is still windows-1252.

Best practice

Always specify the <meta charset="UTF-8"> declaration and Response Header Content-Type. And we should keep this in mind that the later one has a higher priority.

React curly braces

Devin Johw — Sun, 14 Jan 2024 12:53:37 +0000

JSX curly braces can be used either between an opening HTML tag and closing HTML tag or after an HTML attribute. JSX curly can convert a JavaScript number, string into a string. It works both for HTML text and HTML attribute.

const numberForHTMLText = 20;
const stringForHTMLText = "This is a string for HTML text.";

const numberForHTMLAttribute = 30;
const stringForHTMLAttribute = "This is a string for HTML attribute.";

export default function App() {
  return (
    <>
      <h1>JSX convert a JavaScript number and string into a string.</h1>

      <h2>For HTML Text</h2>
      <h3>A number for HTML text</h3>
      <p>This is a number: {numberForHTMLText}</p>
      <h3>A string for HTML text</h3>
      <p>This is a string: {stringForHTMLText}</p>

      <h2>For HTML attribute</h2>
      <h3>A number for HTML attribute</h3>
      <p number={numberForHTMLAttribute}>This is a number.</p>
      <h3>A string for HTML attribute</h3>
      <p string={stringForHTMLAttribute}>This is a string.</p>
    </>
  );
}

JSX curly braces can even convert a JavaScript object into a stirng, while it can only work for HTML style attribute with some certain properties. You can use either an object variable name or javaScript object literal.

const objectForHTMLAttribute = {
  width: 90,
  height: 90,
};

export default function App() {
  return (
    <>
      <h1>JSX convert a JavaScript number and string into a string.</h1>

      <h2>For HTML attribute</h2>
      <h3>An object for HTML attribute</h3>
      <p style={objectForHTMLAttribute}>This is an object.</p>
      <p style={{ width: 90, height: 90 }}>This is an object.</p>
    </>
  );
}