Home / MAD1 / Week 11

Week 11 · HTML5, accessibility, encoding and beyond HTML

The one-minute story

By the end of this week you can:

• say how HTML 4, XHTML and HTML5 differ and use the semantic elements;
• name the four accessibility principles and the guideline under each, and spot which principle an example follows;
• calculate the size of a text in bits for a fixed-length encoding, and explain ASCII, Unicode, UTF-8 and UTF-16;
• compare cookies, localStorage, sessionStorage and IndexedDB;
• explain, at concept level, WebSockets, service workers and PWAs, web components, and the formats JSON, XML and Markdown.

Words you need

Idea 1: A short history and what HTML5 added

So XHTML is based on XML, which is itself based on SGML. HTML5 is a living standard kept by WHATWG and W3C. Two facts that exams love: "HTML gets separated from SGML in HTML4" is false (that happened with HTML5), and "HTML5 is not backwards compatible" is false (old pages still work).

Other facts: HTML tag names and attribute names are case-insensitive (<DIV> and <div> are the same). The HTML5 doctype is just <!DOCTYPE html>. For large sites, external CSS is preferred over internal or inline CSS (one cached file, shared by all pages).

Idea 2: Semantic elements, new inputs, media

A page made of only <div> tags is called "div soup": a screen reader cannot tell the menu from the footer. Semantic tags fix this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Recipe blog</title>
</head>
<body>
  <header><h1>Recipe blog</h1></header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main>
    <article>
      <h2>Masala dosa</h2>
      <section>
        <h3>Ingredients</h3>
        <ul><li>rice</li><li>urad dal</li></ul>   <!-- order does not matter -->
      </section>
      <section>
        <h3>Steps</h3>
        <ol><li>Soak</li><li>Grind</li><li>Cook</li></ol>   <!-- order matters -->
      </section>
    </article>
    <aside>Related: sambar recipe</aside>
  </main>
  <footer>Copyright 2026</footer>
</body>
</html>

Use <ul> for an unordered list (ingredients) and <ol> for an ordered list (steps); a paper question asks exactly this. Semantic tags have no visual effect by default; they help screen readers, search engines and you.

New input types and form attributes give free validation and the right mobile keyboard:

<form>
  <label for="em">Email</label>
  <input type="email" id="em" name="em" required placeholder="you@example.com">

  <label for="dob">Date of birth</label>
  <input type="date" id="dob" name="dob">

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="18" max="60">

  <input type="range" name="vol" min="0" max="10">
  <input type="color" name="c">
  <input type="url" name="site">
  <input type="tel" name="phone" pattern="[0-9]{10}">
  <input type="search" name="q" autofocus>
  <button>Send</button>
</form>

Other new types: time, datetime-local, month, week. Attributes: required, placeholder, pattern (a regular expression), min/max/step, autofocus, autocomplete, disabled, readonly, and <datalist> for suggestions. Remember: this browser-side checking is only for convenience. The server must still validate (the user can bypass the browser).

Multimedia and graphics

<video controls width="320" poster="cover.jpg">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  <track kind="captions" src="clip.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

<audio controls src="song.mp3"></audio>

<canvas id="c" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById("c").getContext("2d");
  ctx.fillStyle = "teal";
  ctx.fillRect(10, 10, 80, 50);      // x, y, width, height: a pixel drawing
</script>

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="orange"/></svg>

• <audio> and <video> play without Flash or other plug-ins; controls shows the player buttons; several <source> lines let the browser pick a format it knows; <track> adds captions or subtitles.
• <canvas> is a pixel grid you paint with JavaScript (games, charts). Pixels do not remember what shapes they came from.
• SVG is vector graphics written as XML; each shape stays an element in the page that can be styled, scripted and scaled without blur.

Idea 3: Accessibility

Many people live with some disability: blind, low vision, colour blind, deaf, with motor problems, or with dyslexia. Accessibility also helps everyone (captions in a noisy bus, keyboard use when the touchpad is broken). The standard is WCAG, built on four principles, remembered as POUR:

<!-- Perceivable: text alternative for an image -->
<img src="chart.png" alt="Bar chart: sales rose from 10 to 40 in 2025">

<!-- Understandable: label and instruction attached to the input -->
<label for="word">Search for a word:</label>
<input type="text" id="word" aria-describedby="hint">
<p id="hint">Enter a word to find relevant results.</p>
<button>Start Search</button>

<!-- Operable: a real button works with Tab, Enter and Space. A div does not. -->
<button onclick="save()">Save</button>
<div onclick="save()">Save</div>      <!-- bad: not focusable, no role -->

<!-- Robust: ARIA when no native tag fits -->
<div role="alert" aria-live="polite">Saved successfully</div>
<button aria-label="Close dialog">X</button>

ARIA (Accessible Rich Internet Applications) adds role="..." (what it is), aria-label="..." (a name for screen readers), aria-live (announce changes), aria-expanded, aria-hidden. The first rule of ARIA: use a native HTML element if one exists (<button>, <nav>); use ARIA only to fill gaps. Also: alt="" (empty) for purely decorative images; never use colour alone to show meaning; contrast ratio at least 4.5 to 1 for normal text (WCAG AA); every form control gets a <label>; the page must be fully usable with the keyboard (Tab, Shift+Tab, Enter, Esc).

Idea 4: Character encoding

A computer stores only numbers. To store text, we agree on a character set (a table: number for each character) and an encoding (how the number becomes bytes).

• ASCII: 7 bits per character, 128 characters (English letters, digits, punctuation, control codes). Usually stored in one byte with the top bit 0. A is 65, a is 97, 0 is 48.
• Unicode: one table for all writing systems (over a million possible code points, written U+0041 for A, U+20B9 for the rupee sign, U+1F600 for a smiley). Unicode is the table; UTF-8, UTF-16 and UTF-32 are three ways to encode it.
• UTF-32 (UCS-4): fixed 4 bytes (32 bits) for every character. Simple, but wasteful.
• UCS-2: fixed 2 bytes (16 bits), only the first 65,536 code points.
• UTF-16: 2 bytes for the common ones, 4 bytes (a surrogate pair) for the rest; variable length.
• UTF-8: variable length, 1 to 4 bytes. Can encode every Unicode character. The first 128 code points are encoded exactly like ASCII (1 byte), so every ASCII file is already valid UTF-8. UTF-8 is the encoding of the web.

(All checked with Python.) For the text made of h, é, l, l, o, a space, the rupee sign, a space and the smiley U+1F600, we get 9 characters but 15 bytes in UTF-8, 20 bytes in UTF-16 and 36 bytes in UTF-32. Lesson: number of characters is not number of bytes.

s = "héllo"
print(len(s))                       # 5 characters
print(len(s.encode("utf-8")))       # 6 bytes (é takes 2)
print(len(s.encode("utf-32-le")))   # 20 bytes (5 x 4)

Declaring the encoding. Put <meta charset="utf-8"> as one of the first things in <head> (within the first 1024 bytes), and make the server send Content-Type: text/html; charset=utf-8. If the browser guesses wrongly, you get mojibake. For example, the UTF-8 bytes C3 A9 of é read as Latin-1 become the two characters é, so "café" shows as "café". Another bug: saving the file in one encoding and declaring another. Fix: save as UTF-8 and declare UTF-8 everywhere (also the database and the response header).

The exam sums on encoding

Fixed-length "minimum encoding". If a text uses a character set with N distinct characters, each character needs at least the ceiling of log2 N bits. Total bits = (number of characters in the text) times (bits per character).

Idea 5: Storing data in the browser

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));    // "dark"
localStorage.setItem("count", 5);
console.log(typeof localStorage.getItem("count"));   // "string"  (everything is text)
localStorage.setItem("user", JSON.stringify({name: "Asha"}));
const u = JSON.parse(localStorage.getItem("user"));   // back to an object
console.log(u.name);                                  // "Asha"
localStorage.removeItem("theme");
sessionStorage.setItem("draft", "hello");             // lost when the tab is closed

Rules: storage is per origin (scheme + host + port); pages on other sites cannot read it. The API is synchronous and stores only strings (so use JSON.stringify and JSON.parse). Never store passwords or secrets there: any script on your page can read it (an XSS attack). IndexedDB is asynchronous and holds objects, indexes and files.

Idea 6: Beyond request and response

WebSockets. Normal HTTP: the browser asks, the server answers, the connection ends. A WebSocket keeps one connection open in both directions, so either side can send a message at any time (chat, live scores, multiplayer games). It starts as an HTTP request that is "upgraded" (URL starts with ws:// or wss://).

Server-sent events (SSE). The browser opens a connection and the server pushes text events down it one way only (server to browser): a news ticker, progress bar, notifications. Simpler than WebSockets; the browser reconnects automatically (EventSource in JavaScript).

Polling (older idea): the browser asks again and again, for example every 5 seconds. Simple, but wasteful.

Progressive Web Apps (PWA) and service workers. A service worker is a JavaScript file that the browser runs in the background, separately from the page. It sits between the page and the network and can cache files and answer requests when offline, and receive push notifications. A PWA is an ordinary website plus: HTTPS, a web app manifest (a JSON file with name, icons, colours so it can be "installed" on the home screen), and a service worker (offline and speed).

// register the worker from your page
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}
// sw.js: cache a file at install time, answer from cache first
self.addEventListener("install", e =>
  e.waitUntil(caches.open("v1").then(c => c.addAll(["/", "/style.css"]))));
self.addEventListener("fetch", e =>
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))));

Web components let you make your own HTML tags that work in any page. They are three technologies: Custom Elements (define <my-card>), Shadow DOM (private DOM and CSS that does not leak out) and HTML Templates (<template>, inert markup you clone). WebAssembly is something else (fast compiled code in the browser) and is not a web component; neither is SVG.

<hello-user name="Asha"></hello-user>
<script>
  class HelloUser extends HTMLElement {
    connectedCallback() {
      const root = this.attachShadow({mode: "open"});   // Shadow DOM
      root.innerHTML = "<p>Hello, " + this.getAttribute("name") + "!</p>";
    }
  }
  customElements.define("hello-user", HelloUser);       // names must contain a hyphen
</script>

This shows "Hello, Asha!" Custom element names must contain a hyphen.

Idea 7: Data formats and responsive design

Checked with Python: json.loads of {"name": "Asha", "marks": [90, 85], "passed": true, "address": null} gives a dictionary whose marks[1] is 85, passed is the Python True and address is None. XML parsing with xml.etree.ElementTree gives tag student, attribute id equal to '7', and element text always as strings.

Responsive design means one page that fits phone, tablet and desktop. Three tools:

1. The viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, a phone pretends to be about 980 pixels wide and shrinks the page.
2. Flexible layout: percentages, flex, grid, max-width.
3. Media queries: @media (max-width: 600px) { .menu { display: none; } }.

Your turn

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 42 real questions on this week   All End Term papers