HTML Interview Questions and Answers (Beginner Level)
1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the layout of a webpage using elements and tags like headings, paragraphs, and links.
2. What is the latest version of HTML?
The latest version is HTML5, which adds semantic elements (<header>, <footer>, <article>), multimedia support (<video>, <audio>), canvas for graphics, and APIs for local storage and forms.
3. What are HTML tags and elements?
-
Tags: Keywords enclosed in angle brackets (e.g.,
<p>,</p>). -
Elements: A complete structure with an opening tag, content, and closing tag (e.g.,
<p>Hello World</p>).Some elements like
<img>are self-closing.
4. What is the purpose of the <!DOCTYPE html> declaration?
It tells the browser that the document follows HTML5 standards, ensuring consistent rendering across browsers.
5. What are semantic elements in HTML5?
Semantic elements clearly describe their meaning and structure.
Examples: <header>, <footer>, <nav>, <article>, <section>, <main>
They improve accessibility and SEO.
6. What is the difference between block-level and inline elements?
| Block-level Elements | Inline Elements |
|---|---|
| Start on a new line | Stay on the same line |
| Take full width of parent | Take width of content |
Examples: <div>, <p>, <h1> | <span>, <a>, <img> |
7. What are HTML attributes?
Attributes provide additional information about an element and are placed inside the start tag.
Example:
<img src="image.jpg" alt="Flower Image">
8. What is the purpose of the <head> tag?
The <head> contains metadata about the webpage such as title, styles, scripts, and SEO information.
Example:
<head>
<title>My Website</title>
<meta charset="UTF-8">
</head>
9. What is the purpose of the <meta> tag?
The <meta> tag provides metadata like character encoding, description, author, and viewport settings for SEO and responsiveness.
<meta name="description" content="Learn HTML Basics">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10. What is the difference between <div> and <span>?
| Tag | Type | Purpose |
|---|---|---|
<div> | Block-level | Groups large sections of content |
<span> | Inline | Styles or manipulates small parts of text |
11. What is the difference between <div> and <section>?
<div>: Non-semantic container used for grouping elements.<section>: Semantic container representing a standalone section of related content.
12. How do you create a hyperlink in HTML?
Use the <a> tag with the href attribute.
Example:
<a href="<https://example.com>">Click here</a>
13. How do you add an image in HTML?
Use the <img> tag with src and alt attributes.
Example:
<img src="image.jpg" alt="Description of image">
14. What is the purpose of the alt attribute in the <img> tag?
It provides alternative text for images when they fail to load and helps screen readers describe images for accessibility.
15. How do you create a list in HTML?
- Ordered list (numbered):
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
- Unordered list (bulleted):
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
16. What is the <form> element used for?
It collects user input through fields like text boxes, checkboxes, and buttons.
Example:
<form action="/submit" method="POST">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>
17. How do you create a table in HTML?
Use <table> for the structure, <tr> for rows, <th> for headers, and <td> for data.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
18. What is the difference between <b> and <strong>?
<b>→ Bold text (visual only)<strong>→ Bold text with semantic importance (for SEO and accessibility)
19. What is the difference between <i> and <em>?
<i>→ Italic text (for style)<em>→ Emphasized text (for meaning and importance)
20. How to add a comment in HTML?
Comments are not displayed on the webpage and are used for notes or explanations.
Example:
<!-- This is a comment -->