HTML top 15 Interview Questions
Top 15 HTML interview questions and answers for beginners and experienced professionals. Prepare for your next web development interview with easy and advanced HTML concepts.
1. What is HTML? What does it stand for?
Answer: HTML stands for HyperText Markup Language. It is the standard language used to create and structure web pages. Think of it as the skeleton of every website; it tells the browser what content to show and how to arrange it. It uses tags like <p>, <h1>, and <div> to wrap content.
Hint: HTML is not a programming language; it is a markup language. It describes structure, not logic.2. What is the difference between HTML elements and tags?
Answer: A tag is just the label you write, like <p>. An element is the full thing, including the opening tag, content, and closing tag. So <p>Hello</p> is an element. The word 'tag' usually refers to <p> or <p> individually.
3. What are the void/self-closing elements in HTML?
Answer: Some HTML elements don't need a closing tag because they don't wrap any content. These are called void elements. Examples: <br>, <hr>, <img>, <input>, <meta>, <link>. In HTML5, you don't need to write the slash <br> is perfectly valid.
4. What is the purpose of <Doctype> in HTML?
Answer: <!DOCTYPE html> is the very first line of an HTML file. It tells the browser which version of HTML you're using so it renders the page correctly. Without it, browsers fall into 'quirks mode' and can display the page incorrectly.
Tip: In HTML5, you just write <!DOCTYPE html>. Simple. Previous HTML versions had long, ugly DOCTYPE strings.5. What is the difference between blog-level and inline elements?
- Block Level: div, h1 to h6, p, ul, section, etc.
- Inline Level: span, a, img, button, etc.
6. What is the difference between <dev> and <span>.
Answer: Both are generic container elements with no built-in styling or meaning. The difference is: <div> is block-level (takes full width, starts new line) while <span> is inline (stays in the same line). Use <div> to group big sections, use <span> to style a word or phrase inside text.
7. What are the HTML attributes? Give Examples
<img src="photo.jpg" alt='my Photo' 8. What is the difference between id and class attributes?
Answer: Both are used to identify elements for CSS or JavaScript. The difference: id must be unique — only one element on the page should have the same id. A class can be reused on many elements. In CSS: #myId targets an ID, myInsights targets a class.
9. What is a semantic element? Why does it matter?
Answer: Semantic HTML uses tags that describe the meaning of the content, not just its appearance. Instead of putting everything in a <div>, you use <header>, <nav>, <main>, <article>, <section>, <footer>. This helps search engines understand your page better, improves accessibility for screen readers, and makes your code easier to read.
Hint: Non-semantic: <div class="header">. Semantic: <header>. Both look the same visually, but the semantics are way better.
10. What is the difference between <strong>, <b>, <em> and <i>?
Answer: Both <b> and <strong> make text bold. But <strong> also means the text is important; it has semantic meaning. Similarly, <i> just makes text italic, while <em> means the text is emphasized when you'd stress a word while speaking.
Hint: Use <strong> and <em> for meaning. Use <b> and <i> only for styling with no meaning.
11. How do you create a hyperlink in HTML?
Answer: Use the <a> (anchor) tag with the href attribute. Example:
<a href="https://apnainsights.com">Visit ApnaInsights</a>To open in a new tab: add target="_blank". For email links: href="mailto:name@example.com". For phone: href="tel:+1234567890"
12. How do you insert an image in HTML?
Answer: Use the <img> tag. It needs at least two attributes: src (the image path) and alt (text description if the image fails to load or for screen readers).
<img src="photo.jpg" alt="A dog playing in the park" width="300">13: What are the HTML forms, and what elements do they use?
<form>
<input type='text' name='username'>
<input type='password' name=''password'>
<button type='submit'>Login</button>
</form>14. What is the difference between the GET and POST methods in form?
Answer: GET sends form data in the URL like search?q=html. It's visible, bookmarkable, and cached. Use for search or non-sensitive data. POST sends data inside the request body — not visible in the URL. Use for sensitive data (passwords, payments) or large amounts of data.
Hint: A simple rule: GET is for getting/reading, POST is for sending/creating data.15. What is the difference between <script> in Head and Body?
Answer: Scripts in <head> load before the page content. If the script is large, it blocks the page from showing, and the user sees a blank screen until it loads. Scripts at the bottom of <body> load after all the content is rendered, so the page appears faster.
Tip: Or use the defer attribute: <script src="app.js" defer></script>. It loads the script in the background and runs it after HTML is parsed.