https://docs.google.com/document/d/1tZjpuDJ8AYqS4p87nVgZOHekwPTrmzL9LBFjdWGOkbA/edit?tab=t.
Basic HTML Questions
1. What is HTML?
Answer: HTML (HyperText Markup Language) is the standard language for creating web pages. It uses a series of
elements (tags) to structure content on a webpage.
2. What are the different versions of HTML?
Answer:
HTML 1.0 (1993) – The first version
HTML 2.0 (1995) – Added form support
HTML 3.2 (1997) – Improved tables and scripting
HTML 4.01 (1999) – Introduced CSS and accessibility
XHTML (2000) – Stricter version of HTML
HTML5 (2014) – Added multimedia, semantics, and new APIs
3. What is the difference between HTML and HTML5?
Answer:
HTML5 introduces semantic tags like <article>, <section>, <nav>, etc.
HTML5 supports multimedia elements like <audio> and <video>.
HTML5 provides local storage (Web Storage API) instead of cookies.
HTML5 allows native form validation without JavaScript.
4. What are tags and attributes in HTML?
Answer:
Tags define elements, e.g., <p> for paragraphs, <img> for images.
Attributes provide additional information, e.g., <img src="image.jpg" alt="Image">, where src and alt are
attributes.
5. What is the difference between block-level and inline elements?
Answer:
Block-level elements (<div>, <p>, <h1>) start on a new line and take full width.
Inline elements (<span>, <a>, <strong>) do not start on a new line and only take as much width as needed.
6. What is the purpose of the <DOCTYPE> declaration?
Answer: The <!DOCTYPE> declaration tells the browser which version of HTML to use. Example:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
For HTML5, <!DOCTYPE html> is used.
7. What is the difference between <div> and <span>?
Answer:
<div> is a block-level container used for layout grouping.
<span> is an inline container used for styling parts of a text.
8. What is semantic HTML? Give examples.
Answer: Semantic HTML uses meaningful tags to describe content. Examples:
<header> for page headers
<nav> for navigation menus
<article> for independent content
<footer> for page footers
9. What are self-closing tags? Give examples.
Answer: Self-closing (void) tags do not require a closing tag. Examples:
html
CopyEdit
<img src="image.jpg" alt="Image">
<input type="text" placeholder="Enter name">
<br>
<hr>
10. What are void elements in HTML?
Answer: Void elements are tags that do not have a closing tag, such as <img>, <br>, <input>, <hr>.
Intermediate HTML Questions
11. What is the difference between <strong> and <b>, <em> and <i>?
Answer:
<strong> (semantic) makes text bold for importance, while <b> (non-semantic) just makes it bold.
<em> (semantic) emphasizes text (italic), while <i> just makes it italic for style.
12. What is the difference between absolute, relative, and fixed positioning in CSS?
Answer:
Absolute: Positions relative to the nearest positioned ancestor or the <html> if none.
Relative: Positions relative to its normal position.
Fixed: Stays fixed relative to the viewport.
13. What are HTML entities? Give examples.
Answer: HTML entities are special codes for reserved characters:
html
CopyEdit
< <!-- Less than (<) -->
> <!-- Greater than (>) -->
& <!-- Ampersand (&) -->
" <!-- Double quote (") -->
' <!-- Single quote (') -->
14. What is the difference between <ol> and <ul>?
Answer:
<ol> (ordered list) uses numbers:
html
CopyEdit
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ul> (unordered list) uses bullets:
html
CopyEdit
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
15. What is the difference between <section>, <article>, and <div>?
Answer:
<section>: Groups related content.
<article>: Represents standalone content (like blog posts).
<div>: A generic container with no semantic meaning.
16. How do you make an HTML page mobile-responsive?
Answer:
Use the viewport meta tag:
html
CopyEdit
<meta name="viewport" content="width=device-width, initial-scale=1">
Use responsive CSS (@media queries).
17. What is the <meta> tag used for in HTML?
Answer: It provides metadata such as character set, viewport settings, SEO keywords, and author info.
18. What is the purpose of the <iframe> tag?
Answer: It embeds another webpage within a page:
html
CopyEdit
<iframe src="https://www.example.com" width="600" height="400"></iframe>
19. What is the difference between id and class attributes?
Answer:
id is unique per element (#id in CSS).
class can be shared by multiple elements (.class in CSS).
20. How do you add a favicon to a website?
Answer:
html
CopyEdit
<link rel="icon" type="image/png" href="favicon.png">
Advanced HTML Questions
21. What is the difference between <input type="submit"> and <button type="submit">?
Answer: <button> allows custom HTML inside, whereas <input> is limited to text.
22. What is lazy loading in HTML?
Answer: It delays loading images until needed:
html
CopyEdit
<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">
23. What are the different types of form input elements?
Answer: Text (text), Password (password), Email (email), Checkbox (checkbox), Radio (radio), File (file), Submit (submit).
24. What is the difference between local storage, session storage, and cookies?
Answer:
Local Storage: Stores data permanently in the browser.
Session Storage: Data lasts until the session ends.
Cookies: Small data stored and sent with requests.
25. What are custom data attributes in HTML? How are they used?
Answer: Custom attributes (data-*) store extra info:
html
CopyEdit
<div data-user-id="123">User Name</div>
Access with JavaScript:
js
CopyEdit
let userId = document.querySelector("div").dataset.userId;
console.log(userId);
