HTML Interview & Final Assessment

1. The document language is not declared.
2. The mobile viewport metadata is missing.
3. The title is generic.
4. The paragraph markup is incorrectly nested or left unclosed in the source.
5. The image URL may be broken, and the image has no alt attribute.
6. The email field has no name, so it is not included under a field name in normal form submission.
7. The button is not inside a form and has no specified action.

One Corrected Version

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Learning Page</title>
</head>
<body>
  <main>
    <h1>Welcome to HTML</h1>
    <p>Learn HTML step by step.</p>

    <img src="images/html-example.jpg"
      alt="Example of an HTML document"
      width="800" height="450">

    <form action="/save" method="post">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

      <button type="submit">Save</button>
    </form>
  </main>
</body>
</html>

The corrected image path is an example and must be replaced with an existing file. The form action also requires a working backend route. The original markup is not necessarily invalid in every browser; HTML parsers can recover from certain malformed structures, but source markup should still be corrected.

Part 3: Final Assessment

Answer these questions without checking the earlier lessons. Write your answers first, then compare them with the answer key.

1. Which element represents the main content of a document?
2. Which attribute associates a label with a form control?
3. Which attribute identifies a submitted form field?
4. Which input type is appropriate for a telephone number?
5. Which element groups related form controls and which element labels that group?
6. Which attribute allows multiple options to be selected in a select element?
7. Which attribute makes a field mandatory?
8. Which meta tag helps configure the mobile viewport?
9. What is the difference between a canonical URL and a robots noindex directive?
10. Which attribute provides alternative text for images?
11. Which attribute on an iframe can restrict embedded content capabilities?
12. Which element represents task completion, and which represents a measurement?
13. Which script attribute defers execution of a classic external script until after HTML parsing?
14. Which element provides a native expandable disclosure widget?
15. Which element provides a named insertion point in a Web Component?
16. What is the difference between HTML and the DOM?
17. Which element can provide an accessible name or description inside SVG markup?
18. What does the lang attribute communicate?
19. Which tool can help validate HTML conformance?
20. Why is server-side validation necessary?

Final Assessment Answer Key and Explanations

1. main — It represents the primary content of the document.
2. for — It connects a label to the control whose id matches its value.
3. name — It identifies the field in normal form submission.
4. tel — Telephone numbers are identifiers rather than quantities.
5. fieldset and legend — fieldset groups controls; legend provides the group's caption.
6. multiple — It permits multiple selections.
7. required — It adds a built-in constraint for normal browser form submission.
8. meta viewport — It helps the browser size the layout viewport.
9. Canonical identifies a preferred URL; noindex requests exclusion from the search index. They serve different purposes.
10. alt — It provides alternative text for an image.
11. sandbox — It restricts iframe capabilities unless permissions are granted.
12. progress and meter — progress represents completion; meter represents a measurement.
13. defer — It defers a classic external script until HTML parsing finishes.
14. details — It creates a native disclosure widget, normally with summary as its label.
15. slot — It provides an insertion point for content supplied to a component.
16. HTML is markup; the DOM is the parsed document representation. Scripts can modify the DOM.
17. title — SVG title text can provide a graphic title; appropriate accessible naming depends on how the SVG is used.
18. The language of the content — It helps assistive technologies and other tools process language correctly.
19. The Nu HTML Checker — It checks HTML conformance.
20. Client-side checks can be bypassed. The server must validate and authorize incoming requests independently.

Final Practical Challenge

Build a personal portfolio from scratch that includes:

• A semantic header, navigation, main content and footer.
• A personal introduction and a meaningful profile image.
• A skills list and at least three project descriptions.
• An accessible contact form with validation constraints.
• A unique page title, meta description, viewport declaration and appropriate language.
• Responsive images and a mobile-friendly layout.
• Correct links, image alternatives and keyboard focus visibility.

Completion Criteria

• The HTML passes a conformance check or remaining issues are understood.
• Navigation and links work correctly.
• Forms have associated labels and sensible constraints.
• The page can be navigated with a keyboard.
• The layout works at mobile and desktop widths.
• Project content is original and all claims are accurate.

Course Completion

Congratulations on completing the HTML Mastery course! You have covered HTML foundations, semantic elements, forms, metadata, accessibility, security, responsive images, graphics, structured data, debugging and practical projects.

Your next step is to practise CSS, then JavaScript, and combine all three technologies to build complete interactive websites.