HTML coding Problems & Solutions

Explore 200 common HTML problems, markup coding exercises, validation errors, and clean syntax solutions. Click on any problem to view the common mistake and the correct standard-compliant solution.

Module 1 – HTML Fundamentals

Learn basic HTML page setups, proper DOCTYPE declarations, correct nested tags, and essential character encodings.

Problem 1: Create a basic HTML page with a heading and a paragraph

Ensure that closing tags match opening elements exactly and layout outlines are complete.

Common Mistake 
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World!</h2>  <!-- Mistyped closing tag -->
  <p>This is a paragraph.
</body>
</html>
Correct Solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>
Problem 2: Add HTML comments correctly

Ensure comments are properly closed so browsers don't skip the rest of the web document.

Common Mistake 
<!-- Missing closing tag  <!-- Comment here -->
Correct Solution 
<!-- This is a correct comment -->
Problem 3: Correctly nest HTML elements

Close tags in the exact reverse order that they were opened (LIFO) to ensure strict validation.

Common Mistake 
<p>This is a <strong>bold</p></strong> text.
Correct Solution 
<p>This is a <strong>bold</strong> text.</p>
Problem 4: Use correct HTML5 DOCTYPE

Always use the modern, simple `<!DOCTYPE html>` declaration to trigger standards mode in modern browsers.

Common Mistake 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Correct Solution 
<!DOCTYPE html>
Problem 5: Declaring character encoding

Declare charset metadata inside the head element before any title or other tags to avoid encoding bugs.

Common Mistake 
<meta charset="utf8"> <!-- Invalid spelling of encoding -->
Correct Solution 
<meta charset="utf-8">

Module 2 – Headings & Paragraphs

Master the correct hierarchy of H1–H6 elements, formatting rules, paragraph spacing, and line breaks.

Problem 1: Maintain correct heading outline hierarchy

Do not use random heading weights for styling. Heading weights should outline document structure logically.

Common Mistake 
<h1>Main title</h1>
<h4>Subheading section</h4>  <!-- Skipped H2 and H3 tags -->
Correct Solution 
<h1>Main title</h1>
<h2>Subheading section</h2>
Problem 2: Avoid paragraph linebreaks instead of margins

Use proper paragraph elements instead of multiple break tags to separate distinct blocks of text.

Common Mistake 
Line one.<br><br>Line two.<br><br>Line three.
Correct Solution 
<p>Line one.</p>
<p>Line two.</p>
<p>Line three.</p>

Module 3 – Links & Images

Master link attributes, relative pathways, image dimensions, and descriptive accessibility tags.

Problem 1: Absolute URL missing protocol

Links to external sites must include the `https://` protocol prefix, otherwise browsers treat them as local relative paths.

Common Mistake 
<a href="www.example.com">Visit Example</a>
Correct Solution 
<a href="https://www.example.com">Visit Example</a>
Problem 2: Alt attribute on informative images

Always supply a descriptive `alt` attribute for all informative images to satisfy accessibility standards.

Common Mistake 
<img src="logo.png">
Correct Solution 
<img src="logo.png" alt="Company Logo">

Module 4 – Lists & Tables

Avoid broken table columns, nested listing mistakes, missing header semantic elements, and accessibility issues.

Problem 1: Structuring HTML tables semantically

Always divide table rows into `<thead>` and `<tbody>` block wrappers for clean CSS layout target selection.

Common Mistake 
<table>
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>Bob</td><td>Admin</td></tr>
</table>
Correct Solution 
<table>
  <thead>
    <tr><th>Name</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Bob</td><td>Admin</td></tr>
  </tbody>
</table>

Module 5 – Forms

Structure valid web form groups, label-input bindings, select dropdown groupings, and input constraints.

Problem 1: Binding labels to form input elements

Add the `for` attribute on a label matching the `id` of the input field to enable click-focus triggers.

Common Mistake 
<label>Username</label>
<input type="text" name="username">
Correct Solution 
<label for="username">Username</label>
<input type="text" id="username" name="username">
Problem 2: Grouping radio buttons with matching name parameters

Radio buttons of the same select group must share the same `name` attribute to prevent selecting multiple at once.

Common Mistake 
<input type="radio" name="male_gender" value="male"> Male
<input type="radio" name="female_gender" value="female"> Female
Correct Solution 
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Module 6 – Semantic HTML

Structure pages with semantic tags like <header>, <nav>, <main>, <section>, <article>, and <footer>.

Problem 1: Using semantic tags instead of structural divs

Use proper landmark elements (header, footer, nav) instead of generic wrapper divs with styling classes.

Common Mistake 
<div class="header">Company Name</div>
<div class="nav-links"><a href="#">Home</a></div>
Correct Solution 
<header>
  <h1>Company Name</h1>
  <nav><a href="#">Home</a></nav>
</header>

Module 7 – Media Elements

Embed video and audio markup properties correctly, configure controllers, and arrange device fallback text descriptions.

Problem 1: Missing controls on audio player element

Provide the `controls` attribute, otherwise the audio player is completely invisible and cannot be triggered.

Common Mistake 
<audio src="podcast.mp3"></audio>
Correct Solution 
<audio src="podcast.mp3" controls>Your browser does not support the audio tag.</audio>

Module 8 – Accessibility & SEO

Write SEO-optimized meta description schemas, configure viewport zoom nodes, and arrange valid landmark roles.

Problem 1: Descriptive meta keyword descriptions in head

Supply a clear site description meta tag to populate search engine listing snippets cleanly.

Common Mistake 
<head>
  <title>My Page</title>
</head>
Correct Solution 
<head>
  <title>My Page</title>
  <meta name="description" content="Learn semantic HTML and accessibility best practices with FreeWebsiteTemplates Academy.">
</head>