Lab Practice & Assignment 01

Semantic HTML foundations using Norman, GOMS, and KLM (Dix et al., Human–Computer Interaction, Ch. 12, p. 437: KLM/GOMS operators; plus Ch. 9: evaluation techniques)

Official Starter Code & Live Demo

Starter Code (GitHub Repository):
https://github.com/humeraaa/hci-cg-2026

Live Demo (GitHub Pages):
https://humeraaa.github.io/hci-cg-2026/

This page is the single source of truth for Lab & Assignment 01.

Purpose

The purpose of Lab & Assignment 01 is to bring all students to the same baseline level of semantic HTML skill with minimal CSS and no JavaScript. Your work should clearly communicate the differences between Norman’s model, GOMS, and KLM.

Starter Project

You will receive a starter website repository (5 pages). Your task is to improve the HTML structure, clarity, and accessibility while keeping within the rules below.

You may add content related to our Week 01–Week 04 discussion (e.g., Toggle Switch, Automatic Syringe, Who Paid Problem), but all work must remain within Lab 01 scope and the Norman/GOMS/KLM comparison theme.

Content Scope (Strict)

Use only content related to:

Source restriction: Use selective and relevant content from Dix et al., Human–Computer Interaction (Ch. 9 and Ch. 12). You may add hand-designed UI sketches/layouts for interaction analysis, but do not introduce unrelated topics or external sources.

HTML Requirements (Tabular)

HTML Requirements for Lab & Assignment 01 (Semantic Structure, IA, and Accessibility Basics)
Requirement Area HTML Element(s) Rule (What to Do) Purpose (Why) Common Mistakes to Avoid
Semantic Structure header, nav, main,
section, article, footer 		Use semantic elements according to their meaning: header for page header, nav for navigation, main for main content, section for thematic grouping, article for self-contained content, footer for footer. Improves clarity, maintainability, and screen-reader navigation. Using only div; using nav for non-navigation content.
Navigation Structure nav, ul (unordered list),
li (list item), a (anchor/link) 		Navigation must be structured as a list: nav contains a ul, the ul contains li, and each li contains an a link. Screen readers expect menus as a list of destinations. Placing a directly inside ul (missing li); inconsistent navigation across pages.
Headings h1, h2, h3, h4 Use exactly one h1 per page. Use h2, h3, etc. for subsections without skipping levels. Provides a clear content hierarchy and supports assistive navigation. Multiple h1 elements; skipping from h1 to h3.
Tables (Comparisons) table, caption, thead,
tbody, th, td 		Use tables only for comparison/tabular data. Include caption, thead, tbody, and use th with correct scope. Makes comparisons readable and accessible to screen readers. Using tables for layout; missing caption; using only td with no headers.
Links a (anchor/link) Use descriptive link text that clearly indicates the destination (avoid generic text like “click here”). Links should make sense when read alone (e.g., by a screen reader). “Click here”, “Read more”, or vague links that do not describe the destination.
Images img, alt Every img must have an alt attribute. Use meaningful alt text for informative images; use alt="" for decorative images. Provides accessible alternatives and fallback when images fail to load. Missing alt; using file names like “norman.jpg” as alt text.

Accessibility Requirements

CSS Rules (Strict: Minimal Only)

You may use CSS only for the following properties:

Not allowed in Lab 01:

CSS can be included using <style> in the page <head> (internal CSS) or inline styles, but keep it minimal.

Submission

Lab Exam Practice (HTML Foundations)

These practice questions are within Lab 01 scope. They focus on semantic HTML, navigation structure, accessibility basics, and tables.

Part A: Find Mistakes (Identify + Fix)

In the exam, you will (1) identify the mistake in one sentence and (2) write the corrected HTML.

Sample exam questions: fix common HTML structure and accessibility mistakes
UI Element / Issue Wrong HTML (with mistake) Correct UI Element Correct HTML
Navigation menu has a link directly inside ul (missing li) 
<nav>
  <ul>
    <a href="index.html">Home</a>
    <li><a href="cv.html">CV</a></li>
  </ul>
</nav>
 Navigation list where each link is inside a list item 
<nav aria-label="Primary navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="cv.html">CV</a></li>
  </ul>
</nav>
Form label is not associated with its control (for ≠ id) 
<label for="msg">Message</label>
<textarea id="message" name="message"></textarea>
 Label correctly connected to form control 
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
Heading hierarchy is incorrect (skips a level) 
<h1>Interaction Analysis</h1>
<h3>Norman vs GOMS</h3>
 Headings follow proper hierarchy (no skipping levels) 
<h1>Interaction Analysis</h1>
<h2>Norman vs GOMS</h2>
Comparison table missing caption and header cells (th) 
<table>
  <tr><td>Model</td><td>Predicts</td></tr>
  <tr><td>KLM</td><td>Time</td></tr>
</table>
 Accessible table with caption + headers + scope 
<table>
  <caption>Models and what they predict</caption>
  <thead>
    <tr>
      <th scope="col">Model</th>
      <th scope="col">Predicts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">KLM</th>
      <td>Execution time</td>
    </tr>
  </tbody>
</table>
aria-current used incorrectly (more than one “current page”) 
<nav aria-label="Primary navigation">
  <ul>
    <li><a href="index.html" aria-current="page">Home</a></li>
    <li><a href="cv.html" aria-current="page">CV</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
 Only the active page link is marked as current 
<nav aria-label="Primary navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="cv.html" aria-current="page">CV</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Part B: True / False

Part C: Short Answer