Courses / HTML · Advanced

HTML Interview & Final Assessment

Self-paced 40 sections 61 people viewed this
html html5 html tutorial learn html web development semantic html html forms html accessibility html seo html interview questions html projects beginner to advanced html

Section 40: HTML Interview Questions, Debugging and Final Assessment

Learning Objectives

  • Review fundamental and advanced HTML concepts.
  • Prepare for common HTML interview questions.
  • Identify and correct invalid markup.
  • Evaluate your understanding through a final assessment.

Part 1: HTML Interview Questions and Answers

1. What is HTML?

HTML stands for HyperText Markup Language. It describes the structure and meaning of web content.

2. What is the difference between HTML and HTML5?

HTML5 commonly refers to the generation of HTML that introduced or standardized features such as semantic elements, native audio and video, and Canvas. Modern HTML continues to evolve as a Living Standard rather than remaining a fixed version called HTML5.

3. What is the difference between an element and a tag?

A tag is the markup used to start or end an element. An element includes the tag, its content where applicable, and its associated structure.

4. What are semantic elements?

Semantic elements communicate the purpose of content. Examples include header, nav, main, article, section and footer.

5. What is the difference between div and span?

Both are generic containers without inherent semantic meaning. div is normally block-level by default, while span is normally inline by default. CSS can change their display behavior.

6. What is the difference between id and class?

id identifies one element within a document and should be unique. class assigns one or more reusable class names that can be shared by multiple elements.

7. What is the difference between GET and POST?

GET is commonly used to retrieve information, with form values usually appearing in the URL query string. POST sends form data in the request body and is commonly used for submissions that create or change data. POST alone does not encrypt data.

8. What is the purpose of alt?

The alt attribute provides alternative text for an image. It communicates meaningful image information when the image cannot be seen. Decorative images should generally use alt="".

9. What is the difference between strong and b?

strong indicates strong importance, seriousness or urgency. b draws attention without adding the same importance meaning. Their visual appearance can be changed using CSS.

10. What is the difference between em and i?

em indicates stress emphasis. i represents text set apart from normal prose, such as a technical term or an idiomatic phrase, without necessarily emphasizing it.

11. What is the difference between a and link?

a creates a hyperlink or, with suitable attributes, a placeholder or link-like element. link connects a document to external resources such as stylesheets, icons or canonical URLs and belongs in head.

12. What is the DOM?

The Document Object Model is a programming interface representing a document as a tree of objects that scripts can inspect and modify.

13. What is the purpose of the viewport meta tag?

It helps mobile browsers establish the layout viewport according to the device width and initial scale. Responsive CSS is also necessary for a responsive design.

14. What is ARIA?

ARIA provides attributes that communicate accessibility roles, states and properties. Prefer native HTML elements whenever possible because ARIA does not automatically add keyboard behavior.

15. What is the difference between SVG and Canvas?

SVG describes vector graphics as document elements. Canvas provides a drawing surface commonly controlled through JavaScript and is suitable for pixel-oriented graphics.

16. What is the difference between hidden and display:none?

The hidden HTML attribute indicates that content should not be presented. display:none is a CSS declaration that removes the element from normal visual layout. Both generally hide content from assistive technologies when applied effectively, but CSS and application behavior can affect the result.

17. What is the difference between disabled and readonly?

Disabled controls are unavailable and are generally excluded from form submission. Readonly controls cannot be edited by the user but are generally included in submission.

18. What is JSON-LD?

JSON-LD is a JSON-based format for linked data. It is commonly used to describe entities and page content through structured data.

19. What is the difference between progress and meter?

progress represents task completion. meter represents a measurement within a known range.

20. Why is HTML validation important?

Validation helps identify markup errors and conformance problems. It does not guarantee accessibility, security, good performance or correct application behavior.

Part 2: Debugging Challenge

The following HTML contains several problems. Identify and fix them.

<!doctype html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <p>Welcome
  <p>Learn HTML</p>

  <img src="missing-image.jpg">

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

  <button>Save</button>
</body>
</html>

Possible Issues

  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.