HTML problems.
Solved in 3 minutes each.
Every page here answers one specific question — the exact thing you typed into Google. No filler. Just the answer, working code, the reason it works, and the mistakes to avoid. This is what you need when the layout breaks, the form won't submit, or the screen reader skips your image.
How to use this page. Find your problem in the list below. Click it. The answer is the first thing on the page — no scrolling required. Every page has a "Short answer" box at the top, followed by the working code, then the explanation. If you're looking for a structured learning path instead, the HTML learning path covers every concept from scratch.
🏗️ Structure & semantics
The elements that describe what content is — and why it matters.
What is semantic HTML?
Why <header> beats <div> for SEO and accessibility.
What does <!DOCTYPE html> do?
Standards mode vs quirks mode — and why it breaks your CSS when missing.
Block vs inline elements
Which elements take full width, which don't, and how display overrides both.
The viewport meta tag
Why mobile pages look wrong without it, and the line that fixes it.
What are void elements?
<br>, <img>, <input> — why they have no closing tag.
📝 Forms
Inputs, labels, validation, and the submit button that does nothing.
Why use <label for>?
Clicking the label focuses the input — and screen readers announce it correctly.
Why does my form not submit?
Missing type="submit", a preventDefault, or a name attribute — three causes.
How does the required attribute work?
Browser-side validation without JavaScript — and where it falls short.
The 20 HTML input types
Email, tel, number, date, file — the mobile keyboard and validation each one triggers.
Textarea vs input
Multi-line text, the rows attribute, and why value on a textarea is tricky.
🖼️ Media
Images, video, audio, and the attributes that make them work.
The alt attribute on images
Accessibility, SEO, and what to write — including when alt should be empty.
Responsive images with srcset
Serve the right image for the screen — one line of HTML, no JavaScript.
Lazy-load images with loading="lazy"
One attribute, no JS library. When to use it, and when not to.
Video and audio elements
Multiple sources, fallback text, and the controls attribute.
♿ Accessibility
The HTML attributes that make your page usable by everyone.
When to use aria-label
Not every element needs it. The rule: use native HTML first, ARIA only when needed.
The tabindex attribute
Why tabindex="1" is almost always wrong, and the only two values you need.
<button> vs <a>
Navigation vs action — using the wrong one breaks keyboard and screen reader users.
⚡ Performance
Meta tags and attributes that make the page load faster.
The meta charset attribute
Why <meta charset="UTF-8"> must be the first line — or characters break.
Preload and preconnect
Load fonts, scripts, and APIs before the browser knows it needs them.
The iframe sandbox attribute
Embed third-party content safely — the attribute that limits what an iframe can do.
📋 All 20 problems
Sorted by category. Click any to jump straight to the answer.