HTML Tutorial
HTML Charset
UTF-8 is the default encoding. Set it early in the head so emojis and names render correctly.
Encoding is how bytes become letters
A file on disk is bytes. A character encoding is the agreement that says which bytes mean “é” or “ß.” If the file is saved as one encoding and the browser guesses another, names turn into garbage: José becomes José, and a copyright sign becomes a pair of odd characters.
HTML’s default encoding is UTF-8. UTF-8 can represent every Unicode character: accented Latin letters, Greek, Arabic, CJK, and emoji characters. You still have to declare it. Do not rely on the browser to guess.
Declare UTF-8 in the first 1024 bytes
The HTML specification requires a character encoding declaration in the first 1024 bytes of the file. The practical rule is simpler: make <meta charset="UTF-8"> the first thing inside<head>, before <title> and before any other metadata that might contain non-ASCII text.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eastside Bakery</title>
</head>
<body>
<h1>Eastside Bakery</h1>
<p>Welcome.</p>
</body>
</html>The browser starts reading from byte zero. Until it knows the encoding, it cannot safely interpret a title like “Café” or an author’s name. Putting charset first means the rest of the head is decoded correctly — including the title that appears in the tab.
A charset tag buried after a long <style> block, a comment, or a tracking script can sit past the 1024-byte limit. Then the declaration is ignored and the browser guesses. Keep it first in <head>.
Names with accents
Save the .html file as UTF-8 in your editor (VS Code’s status bar says the encoding). Then type the real characters. You do not need entities for é, ñ, or ø when the charset is UTF-8.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Staff</title>
</head>
<body>
<h1>Bakers this week</h1>
<ul>
<li>José García</li>
<li>François Dupont</li>
<li>Søren Nielsen</li>
<li>Chloë Müller</li>
</ul>
<p>The café opens at 8. Rye is 900 g.</p>
</body>
</html>Click Try it in HTML and confirm every accent is intact in the preview. If you see replacement diamonds or a jumble of extra letters, the file was not saved as UTF-8, or the meta tag is missing or too late.
UTF-8 versus windows-1252
Before UTF-8 took over the web, Western European Windows machines often saved text aswindows-1252 (sometimes labeled ISO-8859-1 in old pages). That encoding has bytes for French and German accents, but it cannot store Greek, CJK, or emoji characters. It is also not the same mapping as UTF-8. Mixing them is how “José” becomes “José.”
| UTF-8 | windows-1252 | |
|---|---|---|
| Typical use | Every modern HTML page | Old Windows documents and legacy mail |
| Accented Latin | Yes | Yes, for Western European letters |
| Other scripts | Yes | No |
| Declare it | <meta charset="UTF-8"> | Do not use this for new pages |
If you open a downloaded file and names look wrong, reopen it with the correct encoding, then save as UTF-8 and keep the meta tag. Do not “fix” the page by sprinkling entities over every accent unless you cannot control the file encoding.
What the editor and the server must agree on
Three places must all say UTF-8 or you get mojibake:
- The file on disk — save as UTF-8 (with or without a BOM; without is fine).
- The HTML —
<meta charset="UTF-8">in the first 1024 bytes. - The HTTP header, when you publish —
Content-Type: text/html; charset=utf-8.
StudyGrid’s live preview at /html/try already serves the preview as UTF-8. Your job in the tutorial is the meta tag and saving the file correctly when you download it.
<meta charset="utf-8"> is the same as UTF-8. The name is case-insensitive. Pick one spelling and stay consistent. This track uses UTF-8.
What to remember
- Put
<meta charset="UTF-8">first in<head>so it lands in the first 1024 bytes. - UTF-8 is the encoding to use. windows-1252 is a legacy Western European mapping — not for new pages.
- Type real letters: José, François, Søren. Entities are for reserved markup characters, not for accents.
- Save the file as UTF-8. The meta tag cannot repair a file stored in a different encoding.
Next: forms. A <form> collects input and decides where that data goes when someone submits.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
Names and micro-litres
UTF-8 is the encoding of the web. Put <meta charset="UTF-8"> early in head so café, μL, and emoji decode. A missing charset turns them into mojibake.
The lang attribute is language, not encoding. You need both: lang="en" and UTF-8.
Example
<p>Dose: 250 µL</p>
<p>The café opens at eight.</p>Astronomy
A name that is not ASCII
Ångström and SI prefixes need a real encoding. Latin-1 pages still exist in old files. Do not copy them. UTF-8 is the default you set on purpose.
Example
<p>Visible light is hundreds of nanometres, not ångströms in this course — but the letter å must still render.</p>