HTML
Browse 41 articles in this topic. View all topics.
- 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.
- Checking editable text with HTML spellcheck
Use the HTML spellcheck attribute to request spelling and grammar checks in editable elements.
- Use aria-current to mark the active item
Mark the current page, step, date, or location in a related set with the aria-current attribute.
- A simple print style sheet for your website
Add print-specific CSS with a separate stylesheet or an @media print rule.
- Marking up abbreviations with HTML abbr
Use the HTML abbr element for abbreviations and acronyms, with accessible expansion text and optional CSS styling.
- Highlighting Relevant Text With HTML mark
Use the HTML mark element to highlight text that is relevant in the current context, then style it without losing its meaning.