OrglobalAcademy

Lab: Wikipedia-style article page

Practical

~90 min

Recreate the structure of an encyclopedia article in pure semantic HTML — no CSS at all. Ugly is fine; meaningful is the goal.

Steps

  1. Pick a topic you know well (a city, a band, a technology).
  2. Create index.html with the full document skeleton (<!DOCTYPE html>, <html lang="en">, <head> with <title> and <meta charset>).
  3. Build the page with:
    • <header> with the article <h1> and a short intro paragraph
    • <nav> "Contents" box — a <ul> of same-page links (#history, #geography, …)
    • <main> with at least 4 <section>s, each with an <h2> (and at least one <h3> sub-section)
    • one <figure> with an <img> (real alt text) and a <figcaption>
    • one data table with <thead>, <th scope="col">, and at least 4 rows
    • <footer> with references as an <ol> of links
  4. Validate at validator.w3.org and fix every error.

Deliverable

Push the repo to GitHub and submit the URL. Your reviewer checks: correct element choice, one <h1>, no skipped heading levels, working contents links, alt text quality, and a clean validator run.

Sign in to submit your work.

← PreviousNext →