Phase 2 — Allowed

This file is the gauge for everything in phase2/. Do not use anything outside this list.

HTML tags allowed

Document structure

html
head
title
body
header
main
section
article
aside
footer
link (stylesheet only)

Content / controls

div
p
h1, h2, h3, h4, h5, h6
img
figure, figcaption
input
button
ul, ol, li
nav
a

CSS properties allowed

Only these property names may appear in styles.css:

margin
padding
font-size
font-weight
width
height
background
display
border
border-radius
color

CSS selectors allowed

Element selectors: body, h1, input
Class selectors: .card
Descendant selectors: nav a, .card img
Attribute selectors: input[type="email"]
Grouped selectors: h1, h2

Keep selectors short and prefer reusable classes. ID selectors, pseudo-classes, and more advanced combinators are introduced in later phases.

Sizing note (overflow)

Phase 2 does not allow max-width, overflow, or box-sizing. To keep images/inputs inside parents, set child width (and image height) so that:

child width + horizontal padding + horizontal border ≤ parent content width

Default box-sizing is content-box, so padding and border sit outside the declared width.

Attributes allowed (as needed)

On html: lang
On link: rel, href
On a: href
On elements: class, id when used for labelling or fragment links
On landmarks and sections: aria-label, aria-labelledby
On img: src, alt, width, height
On input: type, name, id, placeholder, value, min, checked, readonly
On button: type

Rules from `./rules.html` that apply here

#	Rule	How we use it in Phase 2
1	Vertical margins can collapse	Prefer padding or single-side margins when stacking boxes so spacing stays predictable
2	Text contrast	Keep text/background contrast ≥ 4.5:1 (normal) or ≥ 3:1 (large)
3	Center a block with auto margins	`.page` uses `width` + `margin: 0 auto`
5	Know block vs inline	Choose tags and `display` values deliberately
6	`display` can change default behavior	Use `block`, `inline-block`, or `none` only
11	Lean on inheritance	Set shared text styles on a parent when possible
12	Keep CSS DRY	Prefer shared classes/selectors over duplicated declarations
13	Relative paths	Stylesheet via `href="./styles.css"`; page links stay in-folder
15–19	`alt` text rules	Same accessibility rules as Phase 1
32	Always set `lang` on `<html>`	Every page uses `<html lang="en">`
60–64	Common CSS selectors	Element, class, descendant, attribute, and grouped selectors
72–80	Semantic HTML	Preserve meaningful landmarks, content relationships, and heading hierarchy

Rules from `./rules.html` that do not apply yet

#	Rule	Why not yet
4	`text-align: center`	`text-align` is not an allowed property
7	Flexbox	`display: flex` is outside this phase’s intent; stick to `block` / `inline-block` / `none`
8	`justify-content`	Not an allowed property
9	`align-items`	Not an allowed property
10	`gap`	Not an allowed property
14	Root-relative paths	Not needed for this local folder setup