Top HTML Interview Questions
1. What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and design webpages.
2. What are the advantages of using HTML?
Universal Standard, Simple Syntax, Accessibility, Integration with CSS/JS, and Extensibility.
3. Difference Between HTML and XHTML
HTML is more flexible with syntax rules, while XHTML adheres to stricter XML rules. XHTML requires well-formed documents, including closed tags and lowercase element names.
4. Basic Building Blocks of HTML
Elements: The fundamental building blocks like <div>, <p>, <a>, etc. Tags define these elements, and attributes add extra information. Example: <a href="url">Link</a>.
5. Difference Between Tags and Attributes
Tags define the structure and content of HTML elements. Attributes provide additional information about the element, written inside the opening tag.
6. Syntax of an HTML Tag
The syntax of an HTML tag is: <tagname attribute="value">Content</tagname>. It includes an opening tag, optional attributes, content, and a closing tag.
7. HTML Attribute
An attribute provides additional information about an element and is written in the opening tag in the form name="value".
8. Different Types of HTML Attributes
Attributes include Global (e.g., class, id), Event (e.g., onclick), and Specific (e.g., src for images, href for links).
9. Difference Between Block-Level and Inline Elements
Block-level elements take up the full width and start on a new line (e.g., <div>). Inline elements take only the required width (e.g., <span>).
10. Hyperlink in HTML
Use <a href="url">link text</a> to create a hyperlink. It allows users to navigate to another page or site.
11. Difference Between Absolute and Relative URLs
Absolute URLs include the full web address (e.g., https://example.com/page), while relative URLs are based on the current page's path (e.g., /page or page.html).
12. Mailto Link in HTML
A mailto link opens the default email client. Syntax: <a href="mailto:someone@example.com">Email Us</a>
13. Image Tag in HTML
The <img> tag is used to embed images. Example: <img src="image.jpg" alt="description">
14. Different Types of Images
Common image formats include JPEG (photos), PNG (transparency), GIF (animations), and SVG (vector graphics).
15. HTML Table
Tables display data in rows and columns. Use <table>, <tr>, <th>, and <td> tags to structure tables.
16. Different Parts of an HTML Table
Tables consist of <table> (container), <tr> (row), <th> (header), and <td> (cell) elements.
17. HTML Form
Forms are used to collect user input. Use the <form> tag along with input controls like <input>, <textarea>, and <button>.
18. Different Types of Form Controls
Text inputs, passwords, checkboxes, radio buttons, dropdowns (<select>), and buttons are common form controls.
19. Difference Between GET and POST Requests
GET sends data in the URL (visible), used for fetching data. POST sends data in the request body (hidden), used for submitting data.
20. Difference Between a Text Area and a Text Input
Text input allows single-line input (<input type="text">), while a text area allows multi-line input (<textarea>).
21. What is the use of the <iframe> tag in HTML?
The <iframe> tag embeds another HTML page within the current page.
22. What is semantic HTML?
Semantic HTML uses tags that convey meaning about the content, like <article>, <section>, and <nav>.
23. What is the difference between <strong> and <b>?
<strong> indicates importance and has semantic meaning, while <b> just styles text bold without semantic emphasis.
24. What is the difference between <em> and <i>?
<em> represents emphasized text with semantic meaning, whereas <i> simply italicizes text without added meaning.
25. What is the purpose of the <meta> tag?
The <meta> tag provides metadata about the HTML document, such as character encoding, author, and viewport settings.
26. What is the difference between <head> and <body>?
<head> contains metadata and links to scripts/styles, while <body> holds the visible content of the page.
27. What is the use of <fieldset> and <legend>?
<fieldset> groups related form elements, and <legend> provides a caption for the group.
28. What are data-* attributes?
data-* attributes store extra information on elements without affecting their presentation or functionality.
29. What is the difference between <link> and <style>?
<link> links an external stylesheet, while <style> is used to include internal CSS directly in the HTML document.
30. What is a favicon?
A favicon is a small icon displayed in the browser tab, defined using <link rel="icon" href="favicon.ico">.
31. What is the difference between semantic and non-semantic HTML?
Semantic HTML clearly describes the meaning of its content (e.g., <article>, <footer>), while non-semantic HTML (e.g., <div>, <span>) does not convey any meaning about the content.
32. What are data-* attributes in HTML?
Data attributes are custom attributes that store extra information on HTML elements using the "data-" prefix, useful for JavaScript manipulation.
33. What is the use of <fieldset> and <legend> in HTML forms?
<fieldset> is used to group related elements in a form, and <legend> provides a caption for the group.
34. What are HTML5 form validations?
HTML5 provides built-in form validations such as required, type checking, pattern matching, and length restrictions using input attributes.
35. How do you embed audio and video in HTML?
Use the <audio> and <video> tags with the "src" attribute or nested <source> tags to embed multimedia content.
36. What is the use of the <meta> tag in HTML?
The <meta> tag provides metadata about the HTML document such as description, keywords, author, and viewport settings.
37. What are void (self-closing) elements in HTML?
Void elements do not have closing tags and cannot have child elements, such as <br>, <img>, <input>, and <meta>.
38. How does the <canvas> element work in HTML5?
The <canvas> element is used to draw graphics via JavaScript. It supports rendering of shapes, graphs, animations, and images dynamically.
39. What is the purpose of the <noscript> tag?
The <noscript> tag provides fallback content for users who have disabled JavaScript or are using browsers that do not support it.
40. What is lazy loading in HTML?
Lazy loading defers loading of images or iframes until they are needed, using the loading="lazy" attribute to improve page performance.
41. What are the new input types introduced in HTML5?
New input types include email, url, number, range, date, datetime-local, color, search, and tel, improving form usability and validation.
42. What is the purpose of the <template> tag?
The <template> tag is used to declare HTML fragments that are not rendered when the page loads, but can be used later via JavaScript.
43. How do you make an HTML element draggable?
Set the draggable attribute to "true" on an element (e.g., <div draggable="true">) to make it draggable via the Drag and Drop API.
44. What is the role of the <link> tag in HTML?
The <link> tag is used to link external resources like CSS stylesheets to the HTML document.
45. What is the difference between <em> and <i> tags?
<em> indicates emphasized text with semantic meaning, while <i> is used for stylistic purposes without emphasis.
46. What is the role of the <script> tag in HTML?
The <script> tag is used to embed or reference JavaScript code in an HTML document.
47. How does the <progress> tag work?
The <progress> tag displays the progress of a task, using the "value" and "max" attributes to indicate completion status.
48. What is the difference between <strong> and <b>?
<strong> defines text with strong importance (semantic), whereas <b> makes text bold without any added meaning.
49. What is the use of the <mark> tag?
The <mark> tag highlights or marks text as relevant or of interest within the content.
50. How can you create tooltips in HTML?
Use the title attribute on an element (e.g., <span title="Tooltip text">Hover me</span>) to show a tooltip on hover.