{"id":13768,"date":"2022-10-14T11:48:10","date_gmt":"2022-10-14T06:18:10","guid":{"rendered":"https:\/\/blog.guvi.in\/?p=13768"},"modified":"2026-05-04T13:38:56","modified_gmt":"2026-05-04T08:08:56","slug":"top-basic-html-interview-questions","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/top-basic-html-interview-questions\/","title":{"rendered":"Top 60 Basic HTML Interview Questions &#038; Answers!"},"content":{"rendered":"\n<p>Are you preparing for your first web development interview and wondering which HTML interview questions are likely to come up? Whether you&#8217;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.&nbsp;<\/p>\n\n\n\n<p>HTML forms the foundation of every webpage, and interviewers often use it to assess your core understanding of how the web works.<\/p>\n\n\n\n<p>In this article, we\u2019ve curated the top 60 and highly HTML interview questions, complete with explanations and code examples, to help you walk into your interview with clarity and confidence.<\/p>\n\n\n\n<p><strong>Quick Answer<\/strong>:<\/p>\n\n\n\n<p>HTML interviews focus on understanding core elements, tags, and attributes, creating forms and tables, using semantic HTML, handling multimedia content, differentiating inline and block elements, managing links and images, structuring web pages effectively, and explaining how HTML works with CSS and JavaScript in real-world scenarios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Top 30 Basic HTML Interview Questions!<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-1200x630.png\" alt=\"Top 30 Basic HTML Interview Questions!\" class=\"wp-image-79609\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-1200x630.png 1200w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-300x158.png 300w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-768x403.png 768w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-1536x806.png 1536w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-2048x1075.png 2048w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/01@2x-1-150x79.png 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. What is HTML?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-1200x630.png\" alt=\"What is HTML?\" class=\"wp-image-79611\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-1200x630.png 1200w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-300x158.png 300w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-768x403.png 768w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-1536x806.png 1536w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-2048x1075.png 2048w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/02@2x-1-150x79.png 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\"><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.guvi.in\/blog\/html-tutorial-guide-for-web-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML (HyperText Markup Language)<\/a> 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.<\/p>\n\n\n\n<ul>\n<li>\u201cHyperText\u201d refers to the way web pages are linked together.<\/li>\n\n\n\n<li>\u201cMarkup Language\u201d means HTML uses tags to mark elements in a document.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;p&gt;This is a paragraph in HTML.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. What are tags in HTML?<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.guvi.in\/blog\/introduction-to-html-tags-with-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Tags<\/a> are the core syntax used in HTML to define elements. Tags come in pairs: an opening tag (&lt;tag&gt;) and a closing tag (&lt;\/tag&gt;), with the content placed between them.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;h1&gt;Hello World&lt;\/h1&gt;<\/code><\/p>\n\n\n\n<ul>\n<li>&lt;h1&gt; is the opening tag<\/li>\n\n\n\n<li>&lt;\/h1&gt; is the closing tag<\/li>\n\n\n\n<li>Hello World is the content<\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong> Some tags are self-closing (like &lt;img&gt;, &lt;br&gt;, etc.).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. What is the difference between HTML and HTML5?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-1200x630.png\" alt=\"difference between HTML and HTML5\" class=\"wp-image-79612\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-1200x630.png 1200w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-300x158.png 300w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-768x403.png 768w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-1536x806.png 1536w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-2048x1075.png 2048w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/03@2x-1-150x79.png 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>HTML<\/strong><\/td><td><strong>HTML5<\/strong><\/td><\/tr><tr><td>Version<\/td><td>Older versions (HTML 4.01)<\/td><td>Latest version<\/td><\/tr><tr><td>Multimedia Support<\/td><td>Requires plugins (e.g. Flash)<\/td><td>Native support with &lt;audio&gt; and &lt;video&gt;<\/td><\/tr><tr><td>Semantics<\/td><td>Uses generic tags like &lt;div&gt;<\/td><td>Introduces semantic tags like &lt;section&gt;, &lt;article&gt;<\/td><\/tr><tr><td>APIs<\/td><td>No built-in APIs<\/td><td>Includes APIs like geolocation, local storage, canvas<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between HTML and HTML5<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Example of HTML5 semantic tag:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;article&gt;\n\n&nbsp;&nbsp;&lt;h2&gt;Blog Title&lt;\/h2&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Blog content goes here...&lt;\/p&gt;\n\n&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. What are semantic tags in HTML5?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-1200x630.png\" alt=\"semantic tags in HTML5\" class=\"wp-image-79613\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-1200x630.png 1200w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-300x158.png 300w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-768x403.png 768w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-1536x806.png 1536w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-2048x1075.png 2048w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/05\/04@2x-1-150x79.png 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\"><\/figure>\n\n\n\n<p>Semantic tags describe the meaning of the content they enclose, making the code more readable and accessible.<\/p>\n\n\n\n<p>Examples:<\/p>\n\n\n\n<ul>\n<li>&lt;header&gt;: Represents introductory content or navigation<\/li>\n\n\n\n<li>&lt;footer&gt;: Footer section of a page<\/li>\n\n\n\n<li>&lt;section&gt;: Defines a section of content<\/li>\n\n\n\n<li>&lt;nav&gt;: Navigation links<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav&gt;\n\n&nbsp;&nbsp;&lt;a href=\"\/\"&gt;Home&lt;\/a&gt;\n\n&nbsp;&nbsp;&lt;a href=\"\/contact\"&gt;Contact&lt;\/a&gt;\n\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&nbsp;5. How do you structure a basic HTML document?<\/strong><\/h3>\n\n\n\n<p>Every HTML page follows a basic structure:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;My First Page&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;\/head&gt;\n\n&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Welcome!&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li>&lt;!DOCTYPE html&gt;: Declares HTML5<\/li>\n\n\n\n<li>&lt;html&gt;: Root element<\/li>\n\n\n\n<li>&lt;head&gt;: Contains metadata<\/li>\n\n\n\n<li>&lt;body&gt;: Visible content on the browser<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. What\u2019s the role of <\/strong><strong>&lt;!DOCTYPE html&gt;<\/strong><strong>?<\/strong><\/h3>\n\n\n\n<p>The &lt;!DOCTYPE html&gt; 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.<\/p>\n\n\n\n<p>Without this declaration, browsers may switch to quirks mode, leading to rendering inconsistencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Explain the difference between <\/strong><strong>&lt;div&gt;<\/strong><strong> and <\/strong><strong>&lt;span&gt;<\/strong><strong>.<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Tag<\/strong><\/td><td><strong>Type<\/strong><\/td><td><strong>Use Case<\/strong><\/td><\/tr><tr><td>&lt;div&gt;<\/td><td>Block-level<\/td><td>Used to group sections of a page<\/td><\/tr><tr><td>&lt;span&gt;<\/td><td>Inline-level<\/td><td>Used to style or target inline text<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between &lt;div&gt; and &lt;span&gt;<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n\n&nbsp;&nbsp;&lt;p&gt;This is inside a block div.&lt;\/p&gt;\n\n&lt;\/div&gt;\n\n&lt;p&gt;This is &lt;span style=\"color: red;\"&gt;red text&lt;\/span&gt; in a paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8. What are void elements in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Void elements<\/strong> (also called empty elements) <strong>don\u2019t have closing tags<\/strong> and cannot contain content.<\/p>\n\n\n\n<p>Common void elements:<\/p>\n\n\n\n<ul>\n<li>&lt;br&gt;: Line break<\/li>\n\n\n\n<li>&lt;hr&gt;: Horizontal line<\/li>\n\n\n\n<li>&lt;img&gt;: Image<\/li>\n\n\n\n<li>&lt;input&gt;: Input field<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;img src=\"logo.png\" alt=\"Company Logo\"&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9. How do you add a hyperlink in HTML?<\/strong><\/h3>\n\n\n\n<p>Use the &lt;a&gt; (anchor) tag to create links.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;a href=\"https:\/\/openai.com\"&gt;Visit OpenAI&lt;\/a&gt;<\/code><\/p>\n\n\n\n<p>Attributes:<\/p>\n\n\n\n<ul>\n<li>href: Destination URL<\/li>\n\n\n\n<li>target=&#8221;_blank&#8221;: Opens in a new tab (optional)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10. How do you insert an image?<\/strong><\/h3>\n\n\n\n<p>Use the &lt;img&gt; tag, which is a <strong>void element<\/strong>.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;img src=\"profile.jpg\" alt=\"User Profile Picture\" width=\"150\" height=\"150\"&gt;<\/code><\/p>\n\n\n\n<ul>\n<li>src: Source path of the image<\/li>\n\n\n\n<li>alt: Alternate text for accessibility<\/li>\n\n\n\n<li>width &amp; height: Dimensions<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>11. What is the purpose of the <\/strong><strong>alt<\/strong><strong> attribute in images?<\/strong><\/h3>\n\n\n\n<p>The alt attribute provides:<\/p>\n\n\n\n<ul>\n<li><strong>Accessibility<\/strong> for screen readers<\/li>\n\n\n\n<li>A fallback <strong>description<\/strong> of the image doesn\u2019t load<\/li>\n\n\n\n<li>Help for <strong><a href=\"https:\/\/www.guvi.in\/blog\/what-is-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;img src=\"logo.png\" alt=\"Company Logo\"&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>12. What are the different types of lists in HTML?<\/strong><\/h3>\n\n\n\n<p>HTML supports three list types:<\/p>\n\n\n\n<ol>\n<li><strong>Ordered List (<\/strong><strong>&lt;ol&gt;<\/strong><strong>)<\/strong> \u2013 numbered<\/li>\n\n\n\n<li><strong>Unordered List (<\/strong><strong>&lt;ul&gt;<\/strong><strong>)<\/strong> \u2013 bulleted<\/li>\n\n\n\n<li><strong>Description List (<\/strong><strong>&lt;dl&gt;<\/strong><strong>)<\/strong> \u2013 term-description pairs<\/li>\n<\/ol>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ol&gt;\n\n&nbsp;&nbsp;&lt;li&gt;First&lt;\/li&gt;\n\n&nbsp;&nbsp;&lt;li&gt;Second&lt;\/li&gt;\n\n&lt;\/ol&gt;\n\n&lt;ul&gt;\n\n&nbsp;&nbsp;&lt;li&gt;Apple&lt;\/li&gt;\n\n&nbsp;&nbsp;&lt;li&gt;Banana&lt;\/li&gt;\n\n&lt;\/ul&gt;\n\n&lt;dl&gt;\n\n&nbsp;&nbsp;&lt;dt&gt;HTML&lt;\/dt&gt;\n\n&nbsp;&nbsp;&lt;dd&gt;HyperText Markup Language&lt;\/dd&gt;\n\n&lt;\/dl&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>13. What is the difference between <\/strong><strong>&lt;strong&gt;<\/strong><strong> and <\/strong><strong>&lt;b&gt;<\/strong><strong>?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Tag<\/strong><\/td><td><strong>Meaning<\/strong><\/td><td><strong>Semantic?<\/strong><\/td><\/tr><tr><td>&lt;b&gt;<\/td><td>Just makes text bold<\/td><td>No<\/td><\/tr><tr><td>&lt;strong&gt;<\/td><td>Indicates importance<\/td><td>Yes&nbsp;<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between &lt;strong&gt; and &lt;b&gt;<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;p&gt;This is &lt;b&gt;bold&lt;\/b&gt; text.&lt;\/p&gt;\n\n&lt;p&gt;This is &lt;strong&gt;important&lt;\/strong&gt; text.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Use &lt;strong&gt; when you want to convey <strong>emphasis or meaning<\/strong>, especially for screen readers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>14. How do forms work in HTML?<\/strong><\/h3>\n\n\n\n<p>Forms collect user inputs and can send data to a server for processing.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"\/submit\" method=\"post\"&gt;\n\n&nbsp;&nbsp;&lt;label for=\"name\"&gt;Name:&lt;\/label&gt;\n\n&nbsp;&nbsp;&lt;input type=\"text\" id=\"name\" name=\"username\"&gt;\n\n&nbsp;&nbsp;&lt;input type=\"submit\" value=\"Send\"&gt;\n\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li>action: Where the form data is sent<\/li>\n\n\n\n<li>method: HTTP method (GET or POST)<\/li>\n\n\n\n<li>input: Field for user input<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>15. What are some commonly used form input types?<\/strong><\/h3>\n\n\n\n<p>HTML provides a wide variety of input types:<\/p>\n\n\n\n<ul>\n<li>text: Single-line input<\/li>\n\n\n\n<li>password: Hidden text (dots or asterisks)<\/li>\n\n\n\n<li>email: Email format validation<\/li>\n\n\n\n<li>checkbox: Tickable boxes<\/li>\n\n\n\n<li>radio: Single selection<\/li>\n\n\n\n<li>date: Date picker<\/li>\n\n\n\n<li>file: Upload a file<\/li>\n\n\n\n<li>submit: Form submission button<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;\n\n&nbsp;&nbsp;&lt;input type=\"text\" placeholder=\"Your Name\"&gt;\n\n&nbsp;&nbsp;&lt;input type=\"email\" placeholder=\"Email Address\"&gt;\n\n&nbsp;&nbsp;&lt;input type=\"checkbox\"&gt; Subscribe to newsletter\n\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>16. What is the difference between <\/strong><strong>id<\/strong><strong> and <\/strong><strong>class<\/strong><strong> attributes?<\/strong><\/h3>\n\n\n\n<p>Both id and class are used to identify and style elements, but they serve different purposes:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Attribute<\/strong><\/td><td><strong>Unique?<\/strong><\/td><td><strong>Use Case<\/strong><\/td><\/tr><tr><td>id<\/td><td>Yes<\/td><td>Uniquely identify one element<\/td><\/tr><tr><td>class<\/td><td>No<\/td><td>Target multiple elements with the same styling<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between id and class attributes<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;div id=\"main-banner\"&gt;Main Banner&lt;\/div&gt;\n\n&lt;p class=\"highlight\"&gt;This is a highlighted paragraph.&lt;\/p&gt;\n\n&lt;p class=\"highlight\"&gt;Another highlighted paragraph.&lt;\/p&gt;\n\nIn CSS:\n\n#main-banner {\n\n&nbsp;&nbsp;background-color: yellow;\n\n}\n\n.highlight {\n\n&nbsp;&nbsp;color: red;\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>17. How do you link an external CSS file in HTML?<\/strong><\/h3>\n\n\n\n<p>Use the &lt;link&gt; tag inside the &lt;head&gt; section to connect an external stylesheet.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n\n&nbsp;&nbsp;&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Attributes:<\/p>\n\n\n\n<ul>\n<li>rel=&#8221;stylesheet&#8221;: Relationship type<\/li>\n\n\n\n<li>href: Path to the CSS file<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>18. What is the purpose of the <\/strong><strong>&lt;head&gt;<\/strong><strong> tag?<\/strong><\/h3>\n\n\n\n<p>The &lt;head&gt; contains <strong>metadata<\/strong> (data about data) and external resource links.<\/p>\n\n\n\n<p>Common elements inside &lt;head&gt;:<\/p>\n\n\n\n<ul>\n<li>&lt;title&gt;: Title of the page (shown in browser tab)<\/li>\n\n\n\n<li>&lt;meta&gt;: Charset, description, viewport<\/li>\n\n\n\n<li>&lt;link&gt;: Stylesheets<\/li>\n\n\n\n<li>&lt;script&gt;: JavaScript files<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;My Portfolio&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;meta charset=\"UTF-8\"&gt;\n\n&nbsp;&nbsp;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>19. How do you embed a video in HTML?<\/strong><\/h3>\n\n\n\n<p>Use the &lt;video&gt; element with &lt;source&gt; to embed a video file.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;video width=\"400\" controls&gt;\n\n&nbsp;&nbsp;&lt;source src=\"intro.mp4\" type=\"video\/mp4\"&gt;\n\n&nbsp;&nbsp;Your browser does not support the video tag.\n\n&lt;\/video&gt;<\/code><\/pre>\n\n\n\n<p>Attributes:<\/p>\n\n\n\n<ul>\n<li>controls: Shows play\/pause buttons<\/li>\n\n\n\n<li>autoplay, muted, loop: Optional attributes<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>20. What is the difference between <\/strong><strong>&lt;script&gt;<\/strong><strong> and <\/strong><strong>&lt;noscript&gt;<\/strong><strong>?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Tag<\/strong><\/td><td><strong>Purpose<\/strong><\/td><\/tr><tr><td>&lt;script&gt;<\/td><td>Used to run JavaScript in the page<\/td><\/tr><tr><td>&lt;noscript&gt;<\/td><td>Shown only if JavaScript is disabled in the browser<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between &lt;script&gt; and &lt;noscript&gt;<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n\n&nbsp;&nbsp;alert('JavaScript is enabled!');\n\n&lt;\/script&gt;\n\n&lt;noscript&gt;\n\n&nbsp;&nbsp;Please enable JavaScript for the best experience.\n\n&lt;\/noscript&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>21. What is the role of the <\/strong><strong>&lt;meta&gt;<\/strong><strong> tag?<\/strong><\/h3>\n\n\n\n<p>The &lt;meta&gt; tag provides <strong>information to the browser or search engines<\/strong>, like encoding, description, keywords, and viewport settings for responsiveness.<\/p>\n\n\n\n<p><strong>Examples:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;meta charset=\"UTF-8\"&gt;\n\n&lt;meta name=\"description\" content=\"Best HTML guide for beginners.\"&gt;\n\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>22. What is an iframe?<\/strong><\/h3>\n\n\n\n<p>An &lt;iframe&gt; (inline frame) allows you to embed another HTML page within your current page.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;iframe src=\"https:\/\/example.com\" width=\"600\" height=\"400\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n\n\n\n<p>Common use cases:<\/p>\n\n\n\n<ul>\n<li>Embedding maps, forms, YouTube videos, other sites<\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong> Many modern websites block iframe embedding for security reasons.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>23. What are data attributes in HTML?<\/strong><\/h3>\n\n\n\n<p>data-* attributes store <strong>custom data<\/strong> within HTML elements. They\u2019re useful for scripts or frameworks without cluttering classes or IDs.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;div data-user-id=\"1234\" data-role=\"admin\"&gt;Admin User&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p>In <a href=\"https:\/\/www.guvi.in\/hub\/javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript\n\nconst div = document.querySelector('div');\n\nconsole.log(div.dataset.userId); \/\/ \"1234\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>24. How do you make a checkbox checked by default?<\/strong><\/h3>\n\n\n\n<p>Use the checked attribute inside the &lt;input type=&#8221;checkbox&#8221;&gt; element.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;input type=\"checkbox\" checked&gt; Subscribe to newsletter<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>25. How do you open a link in a new tab?<\/strong><\/h3>\n\n\n\n<p>Add the attribute target=&#8221;_blank&#8221; to the &lt;a&gt; tag.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;a href=\"https:\/\/example.com\" target=\"_blank\"&gt;Open in new tab&lt;\/a&gt;<\/code><\/p>\n\n\n\n<p><strong>Optional:<\/strong> Add rel=&#8221;noopener noreferrer&#8221; for security.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>26. How do you comment in HTML?<\/strong><\/h3>\n\n\n\n<p>Comments are written between &lt;!&#8211; and &#8211;&gt;. They are <strong>not rendered in the browser<\/strong>.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;!-- This is a comment explaining the section below --&gt;\n\n&lt;section&gt;\n\n&nbsp;&nbsp;&lt;h2&gt;About Us&lt;\/h2&gt;\n\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>27. What is the purpose of the <\/strong><strong>&lt;label&gt;<\/strong><strong> tag?<\/strong><\/h3>\n\n\n\n<p>The &lt;label&gt; improves <strong>accessibility and usability<\/strong> by linking descriptive text to a form element.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n\n&lt;input type=\"email\" id=\"email\" name=\"email\"&gt;<\/code><\/pre>\n\n\n\n<p>When you click the label, it focuses on the associated input.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>28. How do you disable an input field?<\/strong><\/h3>\n\n\n\n<p>Add the disabled attribute to an input field. It will appear greyed out and be non-editable.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p><code>&lt;input type=\"text\" value=\"Not Editable\" disabled&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>29. What\u2019s the difference between <\/strong><strong>block<\/strong><strong>, <\/strong><strong>inline<\/strong><strong>, and <\/strong><strong>inline-block<\/strong><strong> elements?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Display Type<\/strong><\/td><td><strong>Description<\/strong><\/td><td><strong>Examples<\/strong><\/td><\/tr><tr><td>Block<\/td><td>Takes full width, starts on a new line<\/td><td>&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;<\/td><\/tr><tr><td>Inline<\/td><td>Takes only as much space as needed<\/td><td>&lt;span&gt;, &lt;a&gt;, &lt;strong&gt;<\/td><\/tr><tr><td>Inline-block<\/td><td>Behaves like inline but allows block-level styling (width\/height)<\/td><td>Custom buttons, nav items<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Difference between block, inline, and inline-block elements<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Visual example:<\/strong><\/p>\n\n\n\n<p><code>&lt;span style=\"display: inline-block; width: 100px;\"&gt;Box&lt;\/span&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>30. How do you create a table in HTML?<\/strong><\/h3>\n\n\n\n<p>Tables are created using the &lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, and &lt;td&gt; tags.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;table border=\"1\"&gt;\n\n&nbsp;&nbsp;&lt;tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Product&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Price&lt;\/th&gt;\n\n&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&lt;tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;T-shirt&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;$20&lt;\/td&gt;\n\n&nbsp;&nbsp;&lt;\/tr&gt;\n\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li>&lt;tr&gt;: Table row<\/li>\n\n\n\n<li>&lt;th&gt;: Table heading (bold + centered by default)<\/li>\n\n\n\n<li>&lt;td&gt;: Table data (cells)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Scenario-Based Questions<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">31. <strong>You need to create a registration form for a new website that accepts user details and ensures no invalid submissions. How would you approach it?<\/strong><\/h3>\n\n\n\n<p>Use the <code>&lt;form&gt;<\/code> An element with inputs for name, email, password, and other required fields. Apply HTML5 validation attributes such as <code>required<\/code>, <code>type=\"email\"<\/code>, and <code>pattern<\/code> for passwords. Group related fields using <code>&lt;fieldset&gt;<\/code> and <code>&lt;legend&gt;<\/code> for clarity. Add <code>aria-labels<\/code> for accessibility and ensure the submit button is disabled until all fields pass validation. Consider client-side feedback messages to guide users and improve UX.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">32. <strong>A client wants a product listing page that displays differently on mobile, tablet, and desktop. How would you implement it?<\/strong><\/h3>\n\n\n\n<p>Structure the HTML semantically with <code>&lt;section&gt;<\/code> and <code>&lt;article&gt;<\/code> for each product. Include <code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code> in the head. Use CSS Flexbox or Grid with media queries to adjust layouts, resize images, and reposition text for different screen sizes. Test across devices to ensure consistency and accessibility, and consider performance optimizations like lazy loading images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">33. <strong>You have to display multiple images for a gallery without slowing down page load. How would you handle this?<\/strong><\/h3>\n\n\n\n<p>Use the <code>&lt;img&gt;<\/code> tag with <code>srcset<\/code> and <code>sizes<\/code> attributes for responsive images, and <code>loading=\"lazy\"<\/code> to defer off-screen image loading. Compress images without quality loss, convert to modern formats like WebP, and provide descriptive <code>alt<\/code> text for accessibility. Optionally, use <code>&lt;picture&gt;<\/code> elements to serve different formats or resolutions based on device capabilities, ensuring fast load and SEO-friendly markup.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">34. <strong>A website requires a multi-level dropdown menu for navigation. How would you implement it?<\/strong><\/h3>\n\n\n\n<p>Use semantic <code>&lt;nav&gt;<\/code> with nested <code>&lt;ul&gt;<\/code> and <code>&lt;li&gt;<\/code> elements for hierarchy. Apply ARIA roles like <code>menu<\/code> and <code>menuitem<\/code> for accessibility. Use CSS for hover\/focus interactions and JavaScript for dynamic toggling. Ensure keyboard accessibility so users can navigate with Tab\/Enter keys, and test responsiveness so dropdowns work properly on touch devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">35. <strong>You are given a content-heavy blog page that must be clear and accessible. How would you structure it?<\/strong><\/h3>\n\n\n\n<p>Divide content into semantic sections: <code>&lt;header&gt;<\/code> for the top section, <code>&lt;article&gt;<\/code> for main content, <code>&lt;aside&gt;<\/code> for related links, and <code>&lt;footer&gt;<\/code> for metadata. Maintain proper heading hierarchy using <code>&lt;h1&gt;<\/code>\u2013<code>&lt;h6&gt;<\/code>, add descriptive link text, and provide ARIA labels for accessibility. Consider including skip links and ensure the page is readable on different devices with responsive typography and spacing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">36. <strong>You need to embed a promotional video that must work across all browsers and provide captions. How would you implement it?<\/strong><\/h3>\n\n\n\n<p>Use the <code>&lt;video&gt;<\/code> tag with multiple source formats (<code>mp4<\/code>, <code>webm<\/code>, <code>ogg<\/code>) and the <code>controls<\/code> attribute. Include <code>&lt;track&gt;<\/code> elements for captions to meet accessibility requirements. Provide fallback content, such as a download link or external video link, for browsers that do not support HTML5 video. Test playback across major browsers and devices to ensure compatibility and smooth user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">37. <strong>A client wants an interactive table that highlights rows on hover and is readable on mobile. How would you implement it?<\/strong><\/h3>\n\n\n\n<p>Use <code>&lt;table&gt;<\/code> with <code>&lt;thead&gt;<\/code> and <code>&lt;tbody&gt;<\/code> for semantic structure. Apply CSS for <code>:hover<\/code> effects to highlight rows visually. Make it responsive using a wrapper with horizontal scrolling or reflow layout for small screens. Include <code>scope<\/code> attributes for headers, and ensure adequate contrast and ARIA labels so the table is accessible to screen readers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">38. <strong>You are asked to create a modal popup for newsletter signup that should be accessible and SEO-friendly. How would you approach it?<\/strong><\/h3>\n\n\n\n<p>Use a <code>&lt;div&gt;<\/code> with <code>role=\"dialog\"<\/code> and <code>aria-labelledby<\/code> for the modal title. Ensure focus is trapped inside the modal while open, and that pressing ESC closes it. Keep modal content in the DOM for SEO purposes but hide it visually when inactive. Include descriptive labels for form fields, proper tab order, and test keyboard and screen reader accessibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">39. <strong>You need to create a dynamic survey form where additional questions appear based on previous answers. How would you implement this?<\/strong><\/h3>\n\n\n\n<p>Group questions using <code>&lt;fieldset&gt;<\/code> and <code>&lt;legend&gt;<\/code> and toggle visibility using JavaScript by adding\/removing the <code>hidden<\/code> attribute or CSS classes. Ensure dynamically shown fields are validated before submission. Provide clear instructions for users and maintain ARIA attributes for screen readers. Test for accessibility and ensure the form behaves consistently across devices and browsers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">40. <strong>A client complains the page is slow due to multiple images and scripts. How would you optimize it without changing content structure?<\/strong><\/h3>\n\n\n\n<p>Use <code>loading=\"lazy\"<\/code> for off-screen images, <code>srcset<\/code> for responsive images, and compress all image assets. Minify HTML, CSS, and JavaScript files. Use <code>defer<\/code> or <code>async<\/code> attributes for scripts to prevent render-blocking. Implement browser caching and prioritize above-the-fold content. Ensure performance improvements do not break functionality or accessibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advanced HTML Interview Questions &amp; Answers (Expert-Level Additions)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>41. What is the difference between the DOM and HTML source code?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>HTML source code is the static markup written by the developer, whereas the Document Object Model (DOM) is a live, tree-like representation created by the browser after parsing the HTML. The DOM can be dynamically modified using JavaScript, meaning what users see may differ from the original HTML source. This distinction is critical for debugging and understanding runtime behavior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>42. How does browser parsing work in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Browsers parse HTML sequentially from top to bottom, converting it into a DOM tree. During parsing:<\/p>\n\n\n\n<ul>\n<li>HTML tokens are generated<\/li>\n\n\n\n<li>Nodes are created<\/li>\n\n\n\n<li>CSS and <a href=\"https:\/\/www.guvi.in\/blog\/javascript-tools-every-developer-should-know\/\">JavaScript<\/a> can block parsing (render-blocking)<\/li>\n<\/ul>\n\n\n\n<p><strong>Modern browsers use speculative parsing to improve performance by preloading resources like scripts and stylesheets in parallel.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>43. What is the significance of the \u201crender tree\u201d?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>The render tree is constructed after combining the DOM and CSSOM. It only includes visible elements and determines layout and painting. Unlike the DOM, it excludes elements like &lt;head&gt; or those with display: none. This is what the browser actually uses to render the UI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>44. What are custom elements in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Custom elements are part of <strong>Web Components<\/strong> that allow developers to define new HTML tags using JavaScript. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;my-card&gt;&lt;\/my-card&gt;<\/code><\/pre>\n\n\n\n<p>They enable reusable, encapsulated components with their own logic and styling, improving scalability in large applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>45. What is Shadow DOM and why is it used?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Shadow DOM allows encapsulation of a component\u2019s structure and styles, preventing conflicts with the main DOM.<br>Benefits:<\/p>\n\n\n\n<ul>\n<li>Style isolation<\/li>\n\n\n\n<li>Scoped DOM<\/li>\n\n\n\n<li>Reusability<br>It is heavily used in design systems and frameworks for building modular <a href=\"https:\/\/www.guvi.in\/blog\/what-is-user-interface\/\">UI components<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>46. How does HTML handle internationalization (i18n)?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>HTML supports i18n through:<\/p>\n\n\n\n<ul>\n<li>lang attribute for language specification<\/li>\n\n\n\n<li>dir attribute for text direction (LTR\/RTL)<\/li>\n\n\n\n<li>Unicode support for global character sets<br>Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html lang=\"ar\" dir=\"rtl\"&gt;<\/code><\/pre>\n\n\n\n<p>This ensures proper rendering, accessibility, and SEO for multilingual websites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>47. What is the difference between defer and async in script loading?<\/strong><\/h3>\n\n\n\n<p><strong>Answer:<\/strong><\/p>\n\n\n\n<ul>\n<li>async: Loads and executes script independently, may interrupt parsing<\/li>\n\n\n\n<li>defer: Loads script in parallel but executes after HTML parsing is complete<br>Use defer for scripts dependent on DOM, and async for independent scripts like analytics.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>48. What are ARIA roles and when should you use them?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>ARIA (Accessible Rich Internet Applications) roles enhance accessibility for screen readers when native HTML semantics are insufficient.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div role=\"button\"&gt;Click&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>However, ARIA should only be used when semantic HTML cannot achieve the same result, as overuse can harm accessibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>49. What is the purpose of the <\/strong><strong>&lt;template&gt;<\/strong><strong> tag?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>The &lt;template&gt; tag stores HTML content that is not rendered immediately. It can be cloned and inserted dynamically using JavaScript.<br>Use cases:<\/p>\n\n\n\n<ul>\n<li>Client-side rendering<\/li>\n\n\n\n<li>Reusable UI fragments<br>It improves performance and keeps markup clean.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>50. What is progressive enhancement in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Progressive enhancement is a strategy where basic HTML functionality is delivered first, and advanced features (<a href=\"https:\/\/www.guvi.in\/blog\/complete-css-tutorial\/\">CSS<\/a>\/JS) are layered on top.<br>This ensures:<\/p>\n\n\n\n<ul>\n<li>Accessibility<\/li>\n\n\n\n<li>Better performance on low-end devices<\/li>\n\n\n\n<li>Graceful degradation for unsupported features<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>51. What are web storage <\/strong><a href=\"https:\/\/www.guvi.in\/blog\/api-response-structure-best-practices\/\"><strong>APIs<\/strong><\/a><strong> and how do they differ from cookies?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>HTML5 introduced:<\/p>\n\n\n\n<ul>\n<li>localStorage (persistent)<\/li>\n\n\n\n<li>sessionStorage (session-based)<br>Differences from cookies:<\/li>\n\n\n\n<li>Larger storage capacity<\/li>\n\n\n\n<li>Not sent with HTTP requests<\/li>\n\n\n\n<li>Faster access<br>Used for client-side data storage without server overhead.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>52. What is the difference between <\/strong><strong>&lt;picture&gt;<\/strong><strong> and <\/strong><strong>&lt;img&gt;<\/strong><strong>?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>&lt;img&gt; displays a single image, whereas &lt;picture&gt; allows multiple sources for responsive images. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n\n&nbsp;&lt;source media=\"(max-width: 600px)\" srcset=\"small.jpg\"&gt;\n\n&nbsp;&lt;img src=\"large.jpg\" alt=\"Example\"&gt;\n\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<p>This improves performance and responsiveness.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>53. What is contenteditable in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>The contenteditable attribute allows users to edit content directly in the browser.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div contenteditable=\"true\"&gt;Edit this text&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>It is commonly used in rich text editors and CMS systems.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>54. How does HTML support SEO directly?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>HTML impacts SEO through:<\/p>\n\n\n\n<ul>\n<li>Semantic tags (&lt;article&gt;, &lt;header&gt;)<\/li>\n\n\n\n<li>Meta tags (description, viewport)<\/li>\n\n\n\n<li>Proper heading hierarchy<\/li>\n\n\n\n<li>Alt attributes for images<br>Clean HTML structure improves crawlability and ranking.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>55. What is the difference between <\/strong><strong>&lt;section&gt;<\/strong><strong> and <\/strong><strong>&lt;article&gt;<\/strong><strong>?<\/strong><\/h3>\n\n\n\n<p><strong>Answer:<\/strong><\/p>\n\n\n\n<ul>\n<li>&lt;section&gt;: Groups related content<\/li>\n\n\n\n<li>&lt;article&gt;: Represents independent, reusable content (like blog posts)<br>Use &lt;article&gt; when content can stand alone.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>56. What is the role of <\/strong><strong>&lt;main&gt;<\/strong><strong> tag?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>The &lt;main&gt; tag defines the primary content of a page, excluding headers, footers, and navigation.<br>It improves:<\/p>\n\n\n\n<ul>\n<li>Accessibility<\/li>\n\n\n\n<li>SEO clarity<br>Only one &lt;main&gt; element should exist per page.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>57. What are microdata and structured data in HTML?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Microdata helps embed structured data into HTML for search engines.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div itemscope itemtype=\"https:\/\/schema.org\/Product\"&gt;<\/code><\/pre>\n\n\n\n<p>This enables rich results like ratings, pricing, and FAQs in search results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>58. What is the difference between inline SVG and image SVG?<\/strong><\/h3>\n\n\n\n<p><strong>Answer:<\/strong><\/p>\n\n\n\n<ul>\n<li>Inline SVG: Written directly in HTML, fully customizable via CSS\/JS<\/li>\n\n\n\n<li>Image SVG: Used via &lt;img&gt; tag, limited control<br>Inline SVG is preferred for animations and styling flexibility.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>59. How does lazy loading improve HTML performance?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>Lazy loading delays loading of off-screen resources until needed.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"image.jpg\" loading=\"lazy\"&gt;<\/code><\/pre>\n\n\n\n<p>Benefits:<\/p>\n\n\n\n<ul>\n<li>Faster initial load<\/li>\n\n\n\n<li>Reduced bandwidth usage<\/li>\n\n\n\n<li>Improved Core Web Vitals<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>60. What is the importance of HTML validation?<\/strong><\/h3>\n\n\n\n<p><strong>Answer: <\/strong>HTML validation ensures code follows standards set by W3C.<\/p>\n\n\n\n<p>Benefits:<\/p>\n\n\n\n<ul>\n<li>Cross-browser compatibility<\/li>\n\n\n\n<li>Better accessibility<\/li>\n\n\n\n<li>Improved maintainability<br>Invalid HTML can lead to unpredictable rendering behavior.<\/li>\n<\/ul>\n\n\n\n<p><strong>Final Tip:<\/strong><\/p>\n\n\n\n<p>Go beyond memorization and practice these concepts in a live HTML editor like<a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> CodePen<\/a>,<a href=\"https:\/\/jsfiddle.net\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> JSFiddle<\/a>, or<a href=\"https:\/\/playcode.io\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> PlayCode<\/a>. Interviews often include practical tests, so being comfortable writing real code is a big plus!<\/p>\n\n\n\n<p>If you want to learn everything related to <a href=\"https:\/\/www.guvi.in\/blog\/what-is-full-stack-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">full-stack development<\/a>, consider enrolling in HCL GUVI\u2019s IIT-M Pravartak-certified <a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=top-basic-html-interview-questions\" target=\"_blank\" rel=\"noreferrer noopener\">Full Stack Development Course<\/a> 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<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In Conclusion, mastering HTML is not just about knowing tags, it\u2019s about understanding how to structure content effectively, how browsers interpret your code, and how your markup contributes to accessibility, responsiveness, and performance.&nbsp;<\/p>\n\n\n\n<p>The HTML interview questions covered here are among the most commonly asked in entry-level <a href=\"https:\/\/www.guvi.in\/blog\/what-is-web-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">web development<\/a> interviews, and they reflect the real-world knowledge you\u2019ll use on the job.<\/p>\n\n\n\n<p>If you take the time to not only read but practice these concepts in a live environment, you\u2019ll be well on your way to acing your interview and building robust, user-friendly websites. Keep learning, stay curious, and don\u2019t be afraid to dig deeper into the &#8220;why&#8221; behind each tag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you preparing for your first web development interview and wondering which HTML interview questions are likely to come up? Whether you&#8217;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.&nbsp; HTML forms the foundation of every webpage, [&hellip;]<\/p>\n","protected":false},"author":60,"featured_media":101622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[719,907],"tags":[],"views":"18567","authorinfo":{"name":"Vaishali","url":"https:\/\/www.guvi.in\/blog\/author\/vaishali\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/10\/Top-40-Basic-HTML-Interview-Questions-Answers-300x116.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/13768"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=13768"}],"version-history":[{"count":38,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/13768\/revisions"}],"predecessor-version":[{"id":109460,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/13768\/revisions\/109460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/101622"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=13768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=13768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=13768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}