HTML Elements

Accessible Skip-to-Content Link

A skip-to-content link lets keyboard and screen-reader users jump past the navigation straight to the main content. Most sites get the markup right but hide it permanently with `display: none`, which screen readers also skip. This snippet covers the visually-hidden-until-focus pattern, the matching CSS to keep it usable, and the required `<main>` target so the link actually works.

Responsive Image with picture

Serving the right image at the right size saves bandwidth on phones and avoids blurry assets on retina displays. The `<picture>` element plus `srcset` lets the browser pick the best source for the device. This snippet covers density-based srcset for retina, width-based srcset with sizes for fluid layouts, and art direction with multiple `<source>` entries for different aspect ratios.

Accessible Semantic Form Markup

A login or signup form is the highest-traffic interaction on most apps, and getting the semantic markup right pays dividends in screen-reader support, autofill quality, and form validation. This snippet covers a labelled email-and-password form, a form-with-error-summary using `aria-describedby`, and a multi-step fieldset pattern for grouped inputs.

HTML Data Attributes, Highlight, and Media Elements

Three HTML features people forget about: `data-*` attributes for stashing state and config on elements (queryable from CSS and JS), the semantic-highlight elements (`<mark>`, `<dfn>`, `<kbd>`, `<samp>`, `<var>`) that newcomers reach for `<span>` instead, and the HTML5 media elements (`<video>`, `<audio>`, `<source>`, `<track>`) with their key attributes. Treat this as a reference; you do not need to memorize it.

HTML Media and Interactive Elements Quiz

Six drills on HTML5 media: responsive video embeds, the progress element, canvas drawing, custom audio controls, the picture element for art direction, and image maps.