Why Is My HTML Not Working? Common HTML Errors and Fixes
"My HTML isn't working" almost never means the page crashed or refused to load. HTML doesn't fail the way a program does. It keeps going no matter what, which is exactly why the result can look so confusing. This guide covers what's actually happening when a page looks broken, walks through a real example with the kind of bugs that cause it, and shows how to find and fix them.
Quick Answer
HTML rarely "breaks" outright. Browsers parse HTML permissively, meaning they try to automatically correct badly formed markup rather than stopping and showing an error, so a page with invalid code still renders, just not the way you intended. Most "HTML not working" problems trace back to one of a small set of causes: an unclosed or wrongly nested tag, a missing quote on an attribute, a file saved with the wrong extension, a stylesheet linked with the wrong path or filename case, or a browser showing a cached, outdated version of the page. Finding which one applies is usually faster than it feels.
The One Thing to Understand First: HTML Doesn't Crash
Unlike a programming language, HTML has no concept of a syntax error that stops execution. According to MDN's guide to debugging HTML, browsers have built in rules for interpreting badly formed markup and will silently rewrite it into something valid before displaying it. That's good news and bad news at the same time. Good, because a small mistake won't take down the whole page. Bad, because the browser's guess about what you meant is not always the layout you expected, and there's no error message pointing at the problem the way there would be in a language that actually fails to compile.
That reframes the whole troubleshooting process. The question usually isn't "why did my HTML break," it's "what did the browser guess, and where did that guess diverge from what I wanted."
Quick Checklist: Run Through This Before Anything Else
- Check the file extension. A file saved as
page.txtinstead ofpage.htmlwill open as plain text, not a rendered page. - Hard refresh the browser. What looks like "my changes aren't working" is very often a cached, outdated version of the page still being shown.
- Open the browser's developer console. A JavaScript error here can stop the rest of a script from running, even if the HTML itself is fine.
- Scan for the closing half of every tag and quote. One missing
>or closing quote is the single most common cause of a page rendering incorrectly. - Confirm any linked file's path and exact filename, including case. A working local file and a broken deployed one are very often the same bug, just exposed differently.
If none of these five turn anything up, the example below covers the less obvious causes.
A Complete Example: Finding and Fixing Real Bugs
Here's a small contact card with three real, common bugs mixed into it:
<div class="card>
<h2>Contact Us</h2>
<p>We usually reply within one business day.</p>
<a href="mailto:hello@example.com"><strong>Email us</a></strong>
</div>
<link rel="stylesheet" href="Style.css">
Paste this into an online HTML editor with a live preview and the layout will look wrong, but nothing will "error." Here's what's actually happening, one bug at a time:
- Bug 1, the missing closing quote.
class="cardnever closes its quotation mark. The browser keeps reading everything that follows, including the heading and paragraph, as part of that one attribute's value, until it finds another quote character to close it. That single missing character can silently swallow a large chunk of your markup. - Bug 2, mismatched nesting.
<strong>opens before<a>closes, but the closing tags appear in the wrong order,</a></strong>instead of matching the order they opened. The browser corrects this automatically, but the result can shift which text ends up bold or linked. - Bug 3, a case mismatch. The link points to
Style.css, but the actual file is saved asstyle.css. On a Windows or Mac computer, this often works anyway, since those file systems generally ignore case. Deploy the same files to a typical Linux based host, and the same reference can silently fail, because the filenames no longer match exactly.
Here's the same card with all three fixed:
<div class="card">
<h2>Contact Us</h2>
<p>We usually reply within one business day.</p>
<a href="mailto:hello@example.com"><strong>Email us</strong></a>
</div>
<link rel="stylesheet" href="style.css">
Nothing about the visible content changed, only the quote, the tag order, and the filename case. That's typical of real HTML bugs: small, easy to miss while reading, and completely invisible until you know specifically what to look for.
The Most Common Causes of "HTML Not Working"
Beyond the three in the example above, a handful of other causes come up repeatedly:
- The page is blank or shows raw text. Usually a wrong file extension, or the file was opened in a text editor's preview instead of an actual browser.
- Styling isn't applying at all. Almost always a broken or mistyped path to the CSS file, not a problem with the CSS itself.
- The page looks fine locally but breaks after uploading. Check file and folder name case first, since this is the single most common cause of a "works on my computer" bug that only shows up after deployment.
- Some content is missing entirely. Look for an unclosed tag earlier in the document. A single missing closing tag can affect everything that comes after it.
- An interactive feature does nothing. That's a JavaScript problem, not an HTML one. Check the browser console for an error message before assuming the HTML is at fault.
How to Actually Test and Validate HTML
Since HTML doesn't produce error messages the way other languages do, catching a bug usually means one of these approaches:
- Use a live preview while you write. Seeing the rendered result update as you type makes it far easier to notice the exact moment something breaks. This guide on how to write, edit, and preview HTML in your browser covers that workflow in more depth.
- Inspect the actual rendered DOM, not just your source code. Browser developer tools show you what the browser corrected your markup into, which is often more revealing than the original code, since it shows you exactly where the auto correction diverged from what you intended.
- Run the code through an HTML validator. A validator checks your markup against the actual HTML specification and flags problems a browser would otherwise silently paper over. It's a completely different kind of check than a live preview, since it looks for correctness, not just visual appearance, and many validators also flag basic accessibility issues, like a missing alt attribute, along the way.
For a full page rather than an isolated snippet, how to build and test a complete web page walks through combining these checks into one workflow.
Mistakes That Make Debugging Harder
- Assuming the browser will show an error like other languages do. It won't. Expecting a red error message is often what delays finding the actual problem.
- Rewriting large sections instead of isolating the bug. Removing code piece by piece until the page renders correctly again finds the actual cause far faster than guessing and rewriting.
- Only checking the source code, never the rendered DOM. The two can differ significantly once the browser has auto corrected something, and the DOM is what's actually being displayed.
- Ignoring the console because "it's an HTML page, not a script." Many pages include at least some JavaScript, and a script error there can look exactly like an HTML problem from the outside.
Expert Tips
- When a page looks broken, check the earliest point in the document first. A single bug near the top, like the missing quote in the example above, can distort everything that follows it.
- Keep file and folder names lowercase and consistent from the start. It avoids an entire category of bugs that only appear after deploying to a case sensitive server.
- Use a validator occasionally even on pages that look fine. Some markup issues render acceptably in most browsers but not all, and a validator catches those before a visitor does.
- When asking someone else for help, share the actual rendered result alongside your code. What the browser did with it is often more informative than the original markup alone.
Important Notes
A page that looks broken due to an HTML bug is not a security risk on its own, plain markup and styling can't access your device or personal data. The one exception worth real caution is JavaScript: if a script is misbehaving in a way that seems to be doing more than expected, such as unexpected redirects or requests, treat that as a script problem worth investigating directly, separate from ordinary layout bugs.
FAQ
Why does my HTML file open as text instead of a webpage?
This almost always means the file isn't saved with a .html extension, or it's being opened by a text editor instead of a browser. Confirm the extension, then open the file specifically with a browser.
Why is my CSS not applying to my HTML?
The most common cause is a broken or mistyped path in the <link> tag, including a mismatched filename case, which can work locally and fail once deployed. Confirm the file path and exact filename match precisely.
Does HTML show error messages like other programming languages?
No. Browsers parse HTML permissively and automatically correct invalid markup rather than stopping with an error, which is why a broken looking page rarely comes with any message explaining what went wrong.
Why does my page work locally but not after uploading it?
This is frequently a file or folder name case mismatch. Some local operating systems ignore case in file names, while many web hosts don't, so a reference that worked locally can silently fail once deployed.
How can I test if my HTML code is actually valid?
Run it through an HTML validator, which checks your markup against the specification directly, rather than relying on whether a browser happens to render it acceptably.
My HTML looks correct but the page still looks wrong. What's next?
Inspect the rendered DOM in your browser's developer tools rather than only rereading your source code. It shows you what the browser actually corrected your markup into, which often reveals exactly where things diverged.
Conclusion
"HTML not working" is rarely a dramatic failure. It's almost always one small, specific thing: an unclosed tag, a missing quote, a mistyped path, or a cached page showing old content, made harder to spot only because the browser never stops to tell you where it happened. The contact card example above packs three of the most common bugs into a few lines specifically so they're recognizable the next time you run into one in your own code. Paste the broken version into this site's own live editor and try spotting and fixing all three yourself before checking the corrected version above.
Sources: MDN Web Docs: Debugging HTML, W3C Markup Validation Service.
NO Setups is a self-taught web development team focused on building practical tools and resources for developers. With hands-on experience in web development, open-source projects, and development workflows, the team creates simple solutions that help developers spend less time on setup and more time building.
Related Articles
Loading related articles…
