Output Based and Find the Error Questions
Twenty five questions where you predict what the browser produces, or find what is wrong. The format that exposes what you actually understand.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
How to use this set
Questions only. Predict the answer first, write it down, then open the browser and check.
Writing your prediction before testing is the point of the exercise. Guessing correctly after seeing the output teaches nothing; being wrong about a prediction you committed to is what makes a rule stick.
Part A: What does the browser produce?
For each, describe the DOM the parser builds and how many nodes result.
<p>Total: <div>1,200</div></p><p>First paragraph <p>Second paragraph<strong><em>Text</strong></em><ul> <li>One</li> <div>Two</div> <li>Three</li> </ul><table> <tr><td>A</td></tr> </table>How many elements are in the DOM that you did not write?
Part B: What is rendered?
<p>These words are spread across several lines.</p><p>10 kg of rice</p> <p>10 kg of rice</p>What is the difference when the container is narrow?
<!-- outer <!-- inner --> <p>Is this visible?</p> --><p>Price: <a href="/x">Rs 500</a></p>versus
<p>Price: <a href="/x">Rs 500</a></p><textarea name="bio"> </textarea>What exactly is in the field when the page loads?
<ol start="7" reversed> <li>A</li> <li>B</li> <li>C</li> </ol>What numbers appear?
<select> <option>Design</option> <option>Data</option> </select>What value does the server receive if the reader never touches it?
Part C: Find the error
Each of these contains at least one problem. Identify every one.
<label>Email address</label> <input type="email" id="email"><img src="chart.png"><div class="btn" onclick="save()">Save</div><a href="#" onclick="deleteRecord(4)">Delete</a><h1>Site name</h1> <h4>Section title</h4> <h2>Photo caption</h2><fieldset> <label><input type="radio" name="a" value="yes"> Yes</label> <label><input type="radio" name="b" value="no"> No</label> </fieldset><form action="/login" method="get"> <input type="text" name="user"> <input type="password" name="pass"> <button>Sign in</button> </form><table> <tr><td>Course</td><td>Fee</td></tr> <tr><td>Design</td><td>48000</td></tr> </table><head> <title>Fee structure - Rs 48,000</title> <meta charset="utf-8"> </head><iframe src="https://example.com/widget"></iframe><form action="/cart/add" method="post"> <input type="hidden" name="price" value="4999"> <button type="submit">Add to cart</button> </form><a href="https://example.org" target="_blank">Read the report</a><button aria-label="Submit">Send enquiry</button>This is valid. What is the problem, and who does it affect?
Verification method
- Write your prediction down. Every time. This is not optional if the exercise is to work.
- Part A - open the Elements panel and compare the tree with your prediction. View source is not the answer.
- Part B - render it and look.
- Part C - run the validator, run an accessibility scan, then tab through it. Between the three, most problems surface. Some are neither invalid nor flagged by a scanner, and only a human notices - those are the ones worth spending time on.
Practice
- Predict all twenty five before opening a browser.
- Verify each and mark your prediction right or wrong.
- For every wrong prediction, write one sentence explaining the rule you had misunderstood.
- Write five new find the error questions and give them to someone else.