Chaque page
web est une
ville.

Quartier

section · article · main

Une partie de la page : un quartier, séparé des autres par de grandes avenues.

Îlot

div (avec enfants)

Un bloc qui en regroupe d'autres : un pâté de maisons, bordé de ses rues.

Porte de la ville

header

L'en-tête : la place d'entrée, avec son arc monumental.

Port

footer

Le pied de page : les quais, les grues, un cargo à quai.

Lotissement

ul · ol

Une liste : des maisons sur gazon, desservies par de petites rues.

Immeuble

div

Un bloc de texte : un immeuble de bureaux. Avec beaucoup de texte, une tour de verre.

Chantier

div (vide)

Un élément vide : un chantier clôturé, parfois avec sa grue. Du balisage pour rien.

Habitation

p · blockquote · pre

Un paragraphe : un immeuble d'habitation. Plus il est long, plus il a d'étages.

Galerie

bloc d'images

Un bloc qui ne contient que des images : un immeuble couvert d'écrans, comme à Times Square.

Maison

li

Un élément de liste : une maison, son toit et sa cheminée.

Monument

h1

Le titre principal : la tour Art déco qui domine la ville, son nom gravé au sommet.

Beffroi

h2

Un titre de partie : un beffroi à horloge, qui nomme son quartier.

Kiosque

h3

Un sous-titre : un pavillon à coupole.

Statue

h4 · h5 · h6

Un petit titre : une statue de bronze sur son socle.

Place de la mairie

form

Un formulaire : une place pavée, ses guichets et sa fontaine.

Affiche

img

Une image du site, en affiche sur une façade du bâtiment le plus proche dans la page (sur son toit quand les façades sont pleines). Une icône devient une enseigne, un petit drapeau flotte sur un mât au toit.

Écran géant

video · canvas

Une vidéo ou une zone de dessin : un écran géant sur une façade du bâtiment voisin.

Ambassade

iframe

Un autre site, enclavé dans celui-ci : un édifice à colonnes, sous son drapeau.

Sculpture

svg

Une illustration vectorielle : une sculpture abstraite sur son socle.

Guichet

button · input · select

Un bouton ou un champ à remplir : un petit kiosque à auvent.

Allée

nav

Le menu de navigation : une place pavée, plantée d'arbres.

Parc

aside

Le contenu secondaire : un parc planté d'arbres, traversé d'allées.

Champs

table

Un tableau : des champs cultivés en rangées.

Canal

hr

Une ligne de séparation : un canal entre deux quais, franchi par des ponts.

Aéroport

liens externes

Les liens vers d'autres sites : un aéroport hors les murs, à l'est. Plus il y en a, plus il a de pistes et d'avions. Dans une mégalopole, le site a un grand aéroport et chaque ville son petit aérodrome.

Ruine

img cassée

Une image cassée dans la page : son panneau s'est effondré, au milieu des gravats.

Usines

script

Le JavaScript de la page : des usines qui fument dans la ceinture verte, une pour six scripts.

Caméras

traqueurs

Les traqueurs publicitaires que la page appelle : des caméras au bord des rues, trois par traqueur.

Graffitis

<!-- commentaires -->

Les commentaires laissés dans le HTML : des tags bombés au pied des immeubles.

Météo

poids de la page

Le poids de la page (octets chargés, éléments) : grand soleil pour une page légère, orage pour une page très lourde.