Page title

# HTML5 Cheatsheet A quick reference for the most-used HTML5 elements and patterns in this course. ## Document skeleton ```html Page title ``` ## Semantic structure | Element | Use for | |---------------|------------------------------------------------------| | `

` | Top of page or section (logo, nav, intro) | | `

` | Primary navigation links | | `

` | Main page content (one per page) | | `

` | Thematic grouping with a heading | | `

` | Self-contained content (post, card, comment) | | `

` | Side content (sidebar, callouts) | | `

` | Bottom of page or section | | `

A sleeping cat — ` caption | ## Text & inline ```html
–
Headings (one h1 per page)
Paragraph Important text (bold) Emphasised text (italic) Link
Line break
Thematic break Inline code Preformatted text (preserves whitespace) Abbreviation with tooltip Machine-readable date/time ``` ## Lists ```html Unordered list Ordered list List item Description list (term + description) ``` ## Forms ```html Name Email Message ``` ### Input types `text` `email` `password` `number` `tel` `url` `search` `date` `time` `checkbox` `radio` `file` `range` `color` `hidden` ### Useful attributes `required` `placeholder` `pattern` `min` `max` `step` `minlength` `maxlength` `autocomplete` `readonly` `disabled` ## Media ```html ``` Always provide meaningful `alt` text for images. Empty `alt=""` for purely decorative images. ## Tables ```html Quarterly results Quarter Revenue Q1 1,200 ``` ## Accessibility quick wins - One `` per page; don't skip heading levels. - Every `` needs `alt`. - Every form control needs an associated ``. - Use semantic elements over `` whenever possible. - Keyboard-test your page: can you tab through all interactive elements? - Use `aria-label` only when no visible label exists. ## Validate your HTML - W3C Validator: - HTML5 outline:

Hero — ` caption | ## Text & inline ```html
–
Headings (one h1 per page)
Paragraph Important text (bold) Emphasised text (italic) Link
Line break
Thematic break Inline code Preformatted text (preserves whitespace) Abbreviation with tooltip Machine-readable date/time ``` ## Lists ```html Unordered list Ordered list List item Description list (term + description) ``` ## Forms ```html Name Email Message ``` ### Input types `text` `email` `password` `number` `tel` `url` `search` `date` `time` `checkbox` `radio` `file` `range` `color` `hidden` ### Useful attributes `required` `placeholder` `pattern` `min` `max` `step` `minlength` `maxlength` `autocomplete` `readonly` `disabled` ## Media ```html ``` Always provide meaningful `alt` text for images. Empty `alt=""` for purely decorative images. ## Tables ```html Quarterly results Quarter Revenue Q1 1,200 ``` ## Accessibility quick wins - One `` per page; don't skip heading levels. - Every `` needs `alt`. - Every form control needs an associated ``. - Use semantic elements over `` whenever possible. - Keyboard-test your page: can you tab through all interactive elements? - Use `aria-label` only when no visible label exists. ## Validate your HTML - W3C Validator: - HTML5 outline: