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.
- Using HTML Attribute Values Inside CSS With attr()
CSS attr() reads HTML attributes for generated labels and typed calculations. Use working examples, check support, and handle missing or invalid values.
- What the Browser Already Does Without a Framework
Before adding a frontend framework, check what HTML, CSS, forms, responsive images, preferences, and browser navigation already provide.
- Choosing Between srcset and picture
Choose srcset when the image stays the same and picture when the crop, composition, or format needs to change.
- Finding Hidden Content With hidden="until-found"
Let Find in Page and fragment navigation reveal collapsed content with hidden=until-found, while keeping a usable fallback.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Why Images Need width and height Attributes
Width and height attributes tell the browser an image's aspect ratio early enough to reserve space and prevent layout shifts.
- When to Use fetchpriority on Images
Give a genuinely important image a priority hint without marking every request urgent or combining contradictory loading instructions.
- What You Get With a Real HTML Button
A native HTML button includes keyboard, focus, form, disabled, and accessibility behaviour that a clickable div must rebuild.
- When to Use a Link or a Button
Choose links for navigation and buttons for actions, then style either element to match the interface.
- The Difference Between HTML meter and progress
Use the HTML meter element for a value within a known range and progress for work moving towards completion.
- Showing Calculation Results With HTML output
Use the HTML output element for totals, slider values, estimates, and other results produced by form controls.
- Input Suggestions With HTML datalist
Add native suggestions to an HTML input with datalist while still allowing values outside the provided list.
- HTML autocomplete Values Worth Using
Give browsers useful autocomplete tokens for identity, contact, address, password, and one-time-code fields.
- What the HTML search Element Is For
Use the HTML search element to identify search and filtering controls without changing how the form submits or looks.
- Show Form Errors After Interaction With :user-invalid
Use :user-invalid and :user-valid to style native HTML validation states without marking untouched fields as errors.
- Image Alt Text: When to Use It and When Not To
Write useful image alt text by deciding what an image contributes, including when the right alt value is empty.
- Expandable sections with HTML details and summary
Build simple accordions and disclosure sections with the native HTML details and summary elements.
- Building a modal with HTML dialog
Build modal windows from the native HTML dialog element, including backdrops, forms, Escape handling, and practical examples.