HTML
Make the most of native HTML. Semantic elements, accessible forms, browser features, and simpler ways to structure content for the web.
Browse 46 articles in this topic. View all topics.
- HTML Popover API: Popovers Without JavaScript
Create menus, help boxes, and other lightweight overlays with the native HTML Popover API and very little code.
- Native HTML and CSS Features That Replaced JavaScript
Choose native HTML and CSS before custom JavaScript. Compare dialogs and popovers, then use native forms and layout rules without rebuilding behaviour.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.
- Why You Shouldn't Lazy-Load Every Image
Lazy loading helps below the fold, but adding loading=lazy to every image can delay important content and hurt Largest Contentful Paint.
- When to Use preload, prefetch, and preconnect
Choose between preload, prefetch, and preconnect without turning resource hints into extra work for the browser.
- What HTML forms can do without JavaScript
Native HTML forms already provide input types, validation, autocomplete, mobile keyboard hints, and other useful behaviour.
- Show Better Mobile Keyboards With HTML inputmode
Use HTML inputmode to request a more useful mobile keyboard for numbers, phone numbers, email, URLs, and search.
- Making a page section inactive with HTML inert
Use the HTML inert attribute to temporarily remove a page section from focus and interaction.
- Loading videos only when they're needed
Delay video downloads with preload settings or Intersection Observer, depending on whether the video waits for a click or plays automatically.
- Cutting Elements Into Shapes With CSS clip-path
Use CSS clip-path to reveal circles, polygons, insets, and other shapes without editing the original image.
- Preload, Preconnect, or Prefetch?
Choose between preload, preconnect, and prefetch based on when the browser will need a resource.
- Make an Iframe Responsive With CSS
Keep videos, maps, and other iframes responsive with an aspect-ratio wrapper and a small amount of CSS.
- Practical image loading improvements for the web
Reduce image cost with lazy loading, async decoding, dimensions, responsive sources, WebP, and image CDNs.
- Showing task progress with HTML progress
Use the native progress element for task completion, and style its browser-specific inner parts when needed.
- Use an emoji as a favicon
Put an emoji in a small inline SVG and use it as a favicon without creating a separate image file.
- Respecting prefers-reduced-motion with animated GIFs
Serve a still image instead of an animated GIF when a user prefers reduced motion.
- Semantic HTML and SEO
Use semantic HTML to describe page structure clearly for browsers, search engines, and assistive technology.
- Give every meaningful iframe a useful title
Give embedded iframes a useful title so screen-reader users know what each frame contains.
- Using the HTML autofocus attribute
Use the HTML autofocus attribute to focus a form control when a page loads.
- Embedding video with the HTML video element
Embed video with HTML, provide multiple sources, and add a subtitle track.