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>