Thursday - Character Sets & Code Validation

Character Sets

We're going to start class by addressing character sets. In the ‹head› element of each HTML document, you should add the following line above the title line: ‹meta charset="UTF-8"›. We put it above the title line because even the title draws upon a character set to display. You may be wondering why we need to specify the character set even though our Web pages have all rendered fine so far. Most of the Web is English-based, but in Asia there are other character sets that are standard in regional Web browsers. If you want your Web page to render correctly overseas or even domestically by visitors who use multi-language supports, then you should assign a character set to your code. UTF-8 is a common standard; it is an 8-bit collection of characters that can properly render a wide variety of languages.

In addition to defining the character set in our HTML, we should also define the character set in our CSS. This is just to ensure compatibility between your HTML document and the CSS code it is referencing; if these sets do not match, your style will not render properly. To define the character set in CSS, the first line of your CSS code must be: @charset "UTF-8";.

Linters

Linters are built into text editors. Whether you are using Atom or Sublime Text or VS Code, you can install linters to highlight suspect code as you write it. These typically work the same way a spell checker in a word processor works, where red dots and lines will highlight irregular code and flag it for your attention. With linters, you do not need to wait until the code is tested before getting a specific warning for where likely problem areas are. For this reason, linters should be your go-to resource. You should always use linters as you code, and take their warnings seriously.

Code Validators

But sometimes linters miss things. I will show you some examples in class of this, so you can get a sense for the mistakes that linters struggle to identify. As a back-up to linters, we should also make use of code validators, like the HTML validator and the CSS validator provided by the W3C. With these, you will paste your raw code into the text box of the validator and the validator will compare your code against international standards. Any place where your code deviates from those standards, an error will post. You can debug your code by identifying the line of code that is non-standard and editing it to be compliant. With each correction, you should re-validate the code to ensure that you have properly debugged that line.

Not to state the obvious, but even validators will miss some mistakes. That means the ultimate debugging tool is the one between your ears. Always scan over your code and test it by rendering it in a Web browser to ensure that it displays properly.