Document structure and the positioning model

Two areas that every later task depends on.

Landmark elements. <main> marks the dominant content of the document and appears once per page. <header>, <nav>, <footer> and <aside> mark the regions around it. Screen reader users navigate a page by jumping between these regions, so a document built entirely from <div> offers them no way through it. The elements also carry meaning for search engines and for anyone reading the source.

Headings describe structure, not size. One <h1> per page, then <h2> and <h3> in descending order without skipping levels. Choose the level for the position in the outline and set the size in CSS.

The alt attribute. It is a text alternative for people who cannot see the image, read aloud in place of it. It is not a caption, and it is not a field for keywords. Describe what the image conveys in its context: for a product photo, the product; for a chart, the finding rather than the shape. An image that carries no meaning takes alt="" so that it is skipped. Omitting the attribute altogether is different again: the reader may fall back to announcing the file name.

The positioning model. static is the default and ignores top, left, right and bottom entirely. relative offsets an element from where it would normally sit while leaving its original space reserved. absolute removes the element from the flow and positions it against its nearest positioned ancestor, meaning the nearest ancestor whose position is anything other than static. fixed positions against the viewport. sticky behaves as relative until a scroll threshold is crossed and as fixed afterwards.

Where absolute positioning goes wrong. If no ancestor is positioned, an absolutely positioned element is placed against the initial containing block, which usually means the far corner of the page rather than the corner of the card it was intended for. Setting position: relative on the intended parent is the fix, and it is why that declaration appears so often with no offsets beside it.