Interview Articles
30 VLSI Interview Questions and Answers for Professionals
Master These 10 Star Patterns in Java for Your Next Interview
100 commonly asked interview questions for Java developer roles
Get In Touch For Details! Request More Information
Top 30 Basic HTML Interview Questions & Answers!
Apr 14, 2025 6 Min Read 10817 Views
(Last Updated)
Are you preparing for your first web development interview and wondering which HTML questions are likely to come up? Whether you’re a student, a self-taught developer, or someone transitioning into tech, mastering the basics of HTML is your first stepping stone toward becoming a successful frontend developer.
HTML forms the foundation of every webpage, and interviewers often use it to assess your core understanding of how the web works.
In this article, we’ve curated the top 30 basic HTML interview questions, complete with explanations and code examples, to help you walk into your interview with clarity and confidence.
Table of contents
- Top 30 Basic HTML Interview Questions!
- What is HTML?
- What are tags in HTML?
- What is the difference between HTML and HTML5?
- What are semantic tags in HTML5?
- 5. How do you structure a basic HTML document?
- What’s the role of <!DOCTYPE html>?
- Explain the difference between <div> and <span>.
- What are void elements in HTML?
- How do you add a hyperlink in HTML?
- How do you insert an image?
- What is the purpose of the alt attribute in images?
- What are the different types of lists in HTML?
- What is the difference between <strong> and <b>?
- How do forms work in HTML?
- What are some commonly used form input types?
- What is the difference between id and class attributes?
- How do you link an external CSS file in HTML?
- What is the purpose of the <head> tag?
- How do you embed a video in HTML?
- What is the difference between <script> and <noscript>?
- What is the role of the <meta> tag?
- What is an iframe?
- What are data attributes in HTML?
- How do you make a checkbox checked by default?
- How do you open a link in a new tab?
- How do you comment in HTML?
- What is the purpose of the <label> tag?
- How do you disable an input field?
- What’s the difference between block, inline, and inline-block elements?
- How do you create a table in HTML?
- Conclusion
Top 30 Basic HTML Interview Questions!
1. What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses markup tags to define elements like text, links, images, forms, and multimedia on the browser.
- “HyperText” refers to the way web pages are linked together.
- “Markup Language” means HTML uses tags to mark elements in a document.
Example:
html
<p>This is a paragraph in HTML.</p>2. What are tags in HTML?
HTML Tags are the core syntax used in HTML to define elements. Tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>), with the content placed between them.
Example:
<h1>Hello World</h1>
- <h1> is the opening tag
- </h1> is the closing tag
- Hello World is the content
Note: Some tags are self-closing (like <img>, <br>, etc.).
3. What is the difference between HTML and HTML5?
| Feature | HTML | HTML5 |
| Version | Older versions (HTML 4.01) | Latest version |
| Multimedia Support | Requires plugins (e.g. Flash) | Native support with <audio> and <video> |
| Semantics | Uses generic tags like <div> | Introduces semantic tags like <section>, <article> |
| APIs | No built-in APIs | Includes APIs like geolocation, local storage, canvas |
Example of HTML5 semantic tag:
<article>
<h2>Blog Title</h2>
<p>Blog content goes here...</p>
</article>4. What are semantic tags in HTML5?
Semantic tags describe the meaning of the content they enclose, making the code more readable and accessible.
Examples:
- <header>: Represents introductory content or navigation
- <footer>: Footer section of a page
- <section>: Defines a section of content
- <nav>: Navigation links
Example:
<nav>
<a href="/">Home</a>
<a href="/contact">Contact</a>
</nav>5. How do you structure a basic HTML document?
Every HTML page follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</body>
</html>- <!DOCTYPE html>: Declares HTML5
- <html>: Root element
- <head>: Contains metadata
- <body>: Visible content on the browser
6. What’s the role of <!DOCTYPE html>?
The <!DOCTYPE html> declaration is placed at the top of an HTML document. It tells the browser that the file is using HTML5, so it should render the page accordingly.
Without this declaration, browsers may switch to quirks mode, leading to rendering inconsistencies.
7. Explain the difference between <div> and <span>.
| Tag | Type | Use Case |
| <div> | Block-level | Used to group sections of a page |
| <span> | Inline-level | Used to style or target inline text |
Example:
<div class="container">
<p>This is inside a block div.</p>
</div>
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>8. What are void elements in HTML?
Void elements (also called empty elements) don’t have closing tags and cannot contain content.
Common void elements:
- <br>: Line break
- <hr>: Horizontal line
- <img>: Image
- <input>: Input field
Example:
<img src="logo.png" alt="Company Logo">
9. How do you add a hyperlink in HTML?
Use the <a> (anchor) tag to create links.
Example:
<a href="https://openai.com">Visit OpenAI</a>
Attributes:
- href: Destination URL
- target=”_blank”: Opens in a new tab (optional)
10. How do you insert an image?
Use the <img> tag, which is a void element.
Example:
<img src="profile.jpg" alt="User Profile Picture" width="150" height="150">
- src: Source path of the image
- alt: Alternate text for accessibility
- width & height: Dimensions
11. What is the purpose of the alt attribute in images?
The alt attribute provides:
- Accessibility for screen readers
- A fallback description of the image doesn’t load
- Help for SEO
Example:
<img src="logo.png" alt="Company Logo">
12. What are the different types of lists in HTML?
HTML supports three list types:
- Ordered List (<ol>) – numbered
- Unordered List (<ul>) – bulleted
- Description List (<dl>) – term-description pairs
Example:
<ol>
<li>First</li>
<li>Second</li>
</ol>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>13. What is the difference between <strong> and <b>?
| Tag | Meaning | Semantic? |
| <b> | Just makes text bold | No |
| <strong> | Indicates importance | Yes |
Example:
html
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>Use <strong> when you want to convey emphasis or meaning, especially for screen readers.
14. How do forms work in HTML?
Forms collect user inputs and can send data to a server for processing.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username">
<input type="submit" value="Send">
</form>- action: Where the form data is sent
- method: HTTP method (GET or POST)
- input: Field for user input
15. What are some commonly used form input types?
HTML provides a wide variety of input types:
- text: Single-line input
- password: Hidden text (dots or asterisks)
- email: Email format validation
- checkbox: Tickable boxes
- radio: Single selection
- date: Date picker
- file: Upload a file
- submit: Form submission button
Example:
<form>
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Email Address">
<input type="checkbox"> Subscribe to newsletter
</form>16. What is the difference between id and class attributes?
Both id and class are used to identify and style elements, but they serve different purposes:
| Attribute | Unique? | Use Case |
| id | Yes | Uniquely identify one element |
| class | No | Target multiple elements with the same styling |
Example:
html
<div id="main-banner">Main Banner</div>
<p class="highlight">This is a highlighted paragraph.</p>
<p class="highlight">Another highlighted paragraph.</p>
In CSS:
#main-banner {
background-color: yellow;
}
.highlight {
color: red;
}17. How do you link an external CSS file in HTML?
Use the <link> tag inside the <head> section to connect an external stylesheet.
Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>Attributes:
- rel=”stylesheet”: Relationship type
- href: Path to the CSS file
18. What is the purpose of the <head> tag?
The <head> contains metadata (data about data) and external resource links.
Common elements inside <head>:
- <title>: Title of the page (shown in browser tab)
- <meta>: Charset, description, viewport
- <link>: Stylesheets
- <script>: JavaScript files
Example:
<head>
<title>My Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>19. How do you embed a video in HTML?
Use the <video> element with <source> to embed a video file.
Example:
html
<video width="400" controls>
<source src="intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Attributes:
- controls: Shows play/pause buttons
- autoplay, muted, loop: Optional attributes
20. What is the difference between <script> and <noscript>?
| Tag | Purpose |
| <script> | Used to run JavaScript in the page |
| <noscript> | Shown only if JavaScript is disabled in the browser |
Example:
<script>
alert('JavaScript is enabled!');
</script>
<noscript>
Please enable JavaScript for the best experience.
</noscript>21. What is the role of the <meta> tag?
The <meta> tag provides information to the browser or search engines, like encoding, description, keywords, and viewport settings for responsiveness.
Examples:
html
<meta charset="UTF-8">
<meta name="description" content="Best HTML guide for beginners.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">22. What is an iframe?
An <iframe> (inline frame) allows you to embed another HTML page within your current page.
Example:
<iframe src="https://example.com" width="600" height="400"></iframe>
Common use cases:
- Embedding maps, forms, YouTube videos, other sites
Note: Many modern websites block iframe embedding for security reasons.
23. What are data attributes in HTML?
data-* attributes store custom data within HTML elements. They’re useful for scripts or frameworks without cluttering classes or IDs.
Example:
<div data-user-id="1234" data-role="admin">Admin User</div>
In JavaScript:
javascript
const div = document.querySelector('div');
console.log(div.dataset.userId); // "1234"24. How do you make a checkbox checked by default?
Use the checked attribute inside the <input type=”checkbox”> element.
Example:
<input type="checkbox" checked> Subscribe to newsletter
25. How do you open a link in a new tab?
Add the attribute target=”_blank” to the <a> tag.
Example:
<a href="https://example.com" target="_blank">Open in new tab</a>
Optional: Add rel=”noopener noreferrer” for security.
26. How do you comment in HTML?
Comments are written between <!– and –>. They are not rendered in the browser.
Example:
html
<!-- This is a comment explaining the section below -->
<section>
<h2>About Us</h2>
</section>27. What is the purpose of the <label> tag?
The <label> improves accessibility and usability by linking descriptive text to a form element.
Example:
html
<label for="email">Email:</label>
<input type="email" id="email" name="email">When you click the label, it focuses on the associated input.
28. How do you disable an input field?
Add the disabled attribute to an input field. It will appear greyed out and be non-editable.
Example:
<input type="text" value="Not Editable" disabled>
29. What’s the difference between block, inline, and inline-block elements?
| Display Type | Description | Examples |
| Block | Takes full width, starts on a new line | <div>, <p>, <h1> |
| Inline | Takes only as much space as needed | <span>, <a>, <strong> |
| Inline-block | Behaves like inline but allows block-level styling (width/height) | Custom buttons, nav items |
Visual example:
<span style="display: inline-block; width: 100px;">Box</span>
30. How do you create a table in HTML?
Tables are created using the <table>, <tr>, <th>, and <td> tags.
Example:
html
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>T-shirt</td>
<td>$20</td>
</tr>
</table>- <tr>: Table row
- <th>: Table heading (bold + centered by default)
- <td>: Table data (cells)
Final Tip:
Go beyond memorization and practice these concepts in a live HTML editor like CodePen, JSFiddle, or PlayCode. Interviews often include practical tests, so being comfortable writing real code is a big plus!
If you want to learn everything related to full-stack development, consider enrolling in GUVI’s IIT-M Pravartak-certified Full Stack Development Course that helps you learn it from scratch with mentor support and provides you with hands-on experience by giving unlimited access to Programming Practice Platforms with 1500+ Problem Statements
Conclusion
In Conclusion, mastering HTML is not just about knowing tags, it’s about understanding how to structure content effectively, how browsers interpret your code, and how your markup contributes to accessibility, responsiveness, and performance.
The questions covered here are among the most commonly asked in entry-level web development interviews, and they reflect the real-world knowledge you’ll use on the job.
If you take the time to not only read but practice these concepts in a live environment, you’ll be well on your way to acing your interview and building robust, user-friendly websites. Keep learning, stay curious, and don’t be afraid to dig deeper into the “why” behind each tag.
Career transition
About the Author
Archana
A traveler, and explorer, Archana is an active writer at GUVI. You can usually find her with a book/kindle binge-reading (with an affinity to the mystery/humor).
View all post by Archana
Connect with me @
Did you enjoy this article?