Common HTML Mistakes

HTML mistakes are normal. Every beginner sees broken markup, missing pieces, or little typing errors. This lesson is here to help you slow down and see those mistakes as fixable, not scary.

Your lesson goals are simple:
- understand what debugging means in beginner HTML
- recognize common mistakes that break markup
- look at broken snippets without panicking
- practice checking one small part at a time
- leave the lesson feeling more steady and capable

In this lesson, debugging means finding out why the HTML is not behaving the way you expected and then fixing the small part that is wrong.

A beginner HTML bug often comes from something tiny:
- a missing opening tag
- a missing closing tag
- a tag name typed the wrong way
- tags placed in the wrong order
- a link value that points to the wrong place
- an image source that does not match the file
- a label and input that do not match

Most of these problems are not big mysteries. They are small details hiding in plain sight.

Here are some very common beginner mistakes:

Missing opening tag:
The content appears, but the browser does not know what it is supposed to be.

Missing closing tag:
The browser may keep reading farther than you meant.

Typing the tag name wrong:
A tiny spelling problem can stop the markup from making sense.

Putting tags in the wrong order:
The page becomes harder to read because one part closes before the other part is finished.

Forgetting quotes around a simple attribute value:
Quotes help keep the value clear and readable.

Incorrect href or src values:
A broken link or missing image often comes from one wrong value.

Labels and inputs not matching:
The form becomes harder to understand when the label points to one name and the input uses another.

Broken snippet:

<p>Welcome to the lesson

Corrected snippet:

<p>Welcome to the lesson</p>

Line by line:
The broken line starts a paragraph, but it never shows where the paragraph ends.
The corrected line adds the closing tag so the browser can see the full paragraph element clearly.

This is one of the most common beginner HTML mistakes because the page may still show text, which makes the missing piece easier to miss.

Broken snippet:

<a hrf="contact.html">Contact us</a>

Corrected snippet:

<a href="contact.html">Contact us</a>

Line by line:
The broken version uses hrf, which is not the correct attribute name for a link destination.
The corrected version uses href, which tells the browser where the link should go.

The text Contact us can still appear on the page, so this kind of bug often feels confusing at first. The link looks close to correct, but one small typing mistake breaks it.

Broken snippet:

<img src="team-photo,png">

Corrected snippet:

<img src="team-photo.png">

Line by line:
The broken version has the right idea, but the src value uses the wrong character in the file name.
The corrected version uses a clearer file name value so the browser can find the image.

If an image does not appear, the first calm check is the src value. Read it slowly and compare it to the file name you expected to use.

Broken snippet:

<label for="email">Email</label>
<input id=name type="email">

Corrected snippet:

<label for="email">Email</label>
<input id="email" type="email">

Line by line:
Line 1 says the label belongs to a field named email.
The broken second line uses a different id name and also leaves the id value without quotes.
The corrected second line matches the id to the label and keeps the value easy to read.

This kind of bug shows why small details matter. The form may still look close to correct, but the pieces are not connected clearly.

Use this simple process:

Step 1: Look at one line, not the whole page.
Step 2: Check whether the opening and closing tags make sense.
Step 3: Check the spelling of the tag name.
Step 4: Check attribute names like href or src carefully.
Step 5: Check the value inside the quotes.
Step 6: If the snippet has a label and input, make sure they match.
Step 7: Fix one thing, then look again.

This approach works because it reduces panic. You do not need to solve everything at once. You only need to check one small part at a time.

HTML bugs are common, especially when you are new. Missing tags, wrong tag names, broken href values, incorrect src values, and mismatched labels are all fixable beginner problems.

The most useful habit is not speed. It is calm checking. When you slow down, small mistakes become much easier to notice and fix.

In the next lesson, you will practice reading a simple HTML page more calmly from top to bottom.