You wrote the HTML, you opened it, and the page is blank, half-missing, or nothing like what you expected. Work down this list in order — the cause is nearly always in the first four.
1. Are you opening the file you edited?#
Genuinely the most common cause, and the one people check last.
Add this as the very first line inside <body> and reload:
<p style="background: red; color: white">THIS IS THE RIGHT FILE</p>No red bar means you are looking at a different file, an old copy in another folder, or a cached version. Hard refresh with Ctrl + Shift + R (Cmd + Shift + R on Mac) before assuming anything else.
2. Is a tag left unclosed?#
An unclosed tag does not error — the browser guesses, and its guess is often “everything after this belongs inside”. A missing </div> can push the rest of your page into a container that is hidden or positioned off-screen.
<div class="card">
<h2>Title</h2>
<p>Some text.
</div>
<p>This paragraph may now be inside the card.</p>Two fast ways to find it:
- Open DevTools and look at the Elements panel. It shows the tree the browser actually built. If your footer is nested inside a card, you have found your missing tag — it is just above where the nesting goes wrong.
- Run the file through the W3C HTML validator. It names the line.
Turning on format-on-save with Prettier prevents most of these outright, because badly nested HTML reformats into an obviously wrong shape. See VS Code setup for beginners.
3. Are your quotes and angle brackets balanced?#
<a href="/about>About</a>The closing quote is missing, so the browser reads everything up to the next quote as part of the attribute — and the link text vanishes along with it. A missing > does the same thing.
Your editor’s syntax colouring is the tell: when a large block suddenly turns the colour of a string, the mistake is at the start of that block.
4. Is the doctype there and first?#
<!DOCTYPE html>
<html lang="en">Without it, browsers fall back to “quirks mode” and emulate rendering behaviour from the 1990s. Layouts look subtly wrong in ways that are very hard to diagnose because nothing is technically broken.
It must be the very first thing in the file — not even a blank line or a comment before it.
5. Is the element actually invisible rather than missing?#
Inspect the element. If it appears in the Elements panel but not on screen, it is a CSS problem rather than an HTML one. Usual causes:
display: noneorvisibility: hiddensomewhere- Text the same colour as the background
- Zero height, because the element only contains floated or absolutely positioned children
- Positioned off-screen, or behind something else with a higher
z-index - Clipped by a parent with
overflow: hidden
Full checklist in why is my CSS not working.
6. Are your images broken?#
A broken image icon means the browser asked for a file and did not get it. Open the Network tab, reload, and find the 404 — it shows the exact URL that was requested.
<img src="photo.jpg"> <!-- same folder as the HTML -->
<img src="images/photo.jpg"> <!-- images folder next to it -->
<img src="../photo.jpg"> <!-- one folder up -->
<img src="/images/photo.jpg"> <!-- from the site root -->7. Are you writing HTML that should be escaped?#
If you want to show a tag rather than have the browser act on it, the angle brackets must be escaped:
<p>Use the <strong> tag for emphasis.</p>Writing <strong> literally makes the browser start bolding instead of printing the word. Same for &, which should be & when you mean the character itself.
8. Is your text in a nesting that browsers refuse?#
Some nestings are invalid and browsers silently rearrange them, which produces layouts that make no sense against your source.
<p>
<div>This is not allowed</div>
</p>A <p> cannot contain a block element, so the browser closes the paragraph early and your </p> becomes a stray empty one. Other common ones: anything other than <li> as a direct child of <ul>, and table rows outside a <table>.
Compare the Elements panel with your source. Where they disagree, the browser has corrected something.
9. Is it a mobile-only problem?#
If it looks right on your laptop and tiny or overflowing on a phone, check for this one line:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, phones render at a fake ~980px width and shrink the whole page, and none of your media queries fire. See responsive design basics.
10. Is your CSS or JavaScript even loading?#
An unstyled page usually means the stylesheet did not arrive, not that your CSS is wrong.
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>Check the Network tab for a 404 on either. Also check the spelling of rel="stylesheet" — get that word wrong and the browser ignores the file without complaint.
If JavaScript is meant to add content and nothing appears, open the Console. An error there stops the whole script, so everything after the failing line never runs.
The fastest way to narrow it down#
When you cannot see the problem, cut the file in half. Delete the bottom 50% and reload. If the problem goes away, it was in the part you deleted; if it stays, it was in the part you kept. Repeat on the remaining half.
Four or five rounds will isolate almost any layout problem, no matter how large the file. Work on a copy.
Questions people ask#
Why does my page render fine but the validator complains?
Browsers are deliberately forgiving and repair bad markup on the fly. That is convenient until two browsers repair it differently. Valid HTML is the version everyone agrees on.
Why is there a gap under my image?
Images are inline by default and sit on the text baseline, leaving room for descenders. Add display: block or vertical-align: middle.
Why is there a space between my inline-block elements?
The whitespace between the tags in your source is real text. Remove the line breaks between them, or use flexbox for the layout instead.
My page is blank and there are no errors
View the page source (Ctrl + U). If it is empty, the file itself is empty or you are opening the wrong one. If the source is there but the screen is not, it is CSS hiding it — inspect the body element and check its height.
Does the order of link and script tags matter?
Yes. Stylesheets go in the <head> so the page does not flash unstyled. Scripts go just before </body>, or in the head with defer, so the elements exist when the script runs.
Where to go next#
- HTML basics explained
- Why is my CSS not working?
- How to debug JavaScript in the browser
- Browser DevTools for beginners