0
0
HTMLmarkup~5 mins

Common HTML mistakes

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Knowing common HTML mistakes helps you write clean code that works well in browsers. It makes your web pages look right and be easy to use.

When creating your first web page and want it to display correctly.
When your page looks broken or elements don't show as expected.
When you want your site to be accessible to all users, including those using screen readers.
When you want your page to load faster and be easier to maintain.
When you want to avoid errors that stop your page from working.
Syntax
HTML
<!-- No special syntax, but common mistakes include -->
<tag>content <!-- missing closing tag -->
<tag attribute="value"> <!-- missing quotes around attribute value -->
<div><p></div></p> <!-- wrong tag nesting -->
<img src="image.jpg"> <!-- missing alt attribute -->

Always close tags properly to avoid display issues.

Use quotes around attribute values for consistency and compatibility.

Examples
Missing closing </p> tag can cause layout problems.
HTML
<p>This is a paragraph
Attribute value missing quotes. It should be src="image.jpg".
HTML
<img src="image.jpg">
Tags are closed in the wrong order. Nesting must be correct.
HTML
<div><p>Text</div></p>
Missing alt attribute reduces accessibility for screen readers.
HTML
<img src="photo.jpg">
Sample Program

This example shows three common mistakes: a paragraph without a closing tag, an image missing the alt attribute, and tags closed in the wrong order.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Common HTML Mistakes Example</title>
</head>
<body>
  <h1>Welcome to my page</h1>
  <p>This paragraph is missing a closing tag
  <img src="flower.jpg">
  <div><p>Nested tags are wrong here</div></p>
</body>
</html>
OutputSuccess
Important Notes

Browsers try to fix mistakes but it's best to write correct HTML to avoid surprises.

Use tools like browser DevTools or online validators to find and fix errors.

Always add alt text to images for better accessibility.

Summary

Always close your HTML tags properly.

Use quotes around attribute values.

Keep tags nested in the correct order.

Include alt text for images to help all users.