Ulloor News

ULLOOR
NEWS

Download APP

Top 100 HTML Interview Questions with Answers

By /
Share the Valuable Post

  1. What is HTML?
     HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages.
  2. What are HTML tags?
     Tags are special keywords enclosed in angle brackets < > that define elements in an HTML document, e.g., <p>Paragraph</p>.
  3. What are HTML attributes?
     Attributes provide additional information about elements. Example: <img src=”image.jpg” alt=”photo”>.
  4. What is the difference between HTML and XHTML?
    • HTML is more lenient with errors.
    • XHTML is stricter, follows XML rules, and requires properly nested and closed tags.
  5. What is the difference between block-level and inline elements?
    • Block-level: Start on a new line and occupy full width (e.g., <div>, <p>, <h1>).
    • Inline: Stay within a line (e.g., <span>, <a>, <strong>).
  6. What are semantic HTML elements?
     Elements that clearly describe their meaning: <header>, <footer>, <article>, <section>, <nav>.
  7. What are void elements in HTML?
     Elements that don’t have closing tags, e.g., <br>, <img>, <hr>, <input>.
  8. What is the purpose of <!DOCTYPE html>?
     It defines the HTML version and ensures browsers render the page correctly.
  9. What is the difference between <div> and <span>?
    • <div>: Block-level container.
    • <span>: Inline container.
  10. What is the difference between HTML elements and HTML tags?
  • Tag: <p> or </p>.
  • Element: <p>This is text</p> (tag + content).
  1. What is the purpose of forms in HTML?
     Forms collect user input and send it to a server, using <form>.
  2. What are common input types in HTML5?
     text, email, number, password, date, time, range, url, file, checkbox, radio.
  3. What is the difference between GET and POST methods in forms?
    • GET: Data appended in URL (less secure, bookmarkable).
    • POST: Data sent in the request body (more secure, can send large data).
  4. What is the purpose of the action attribute in a form?
     Defines the URL where form data is sent.
  5. What is the purpose of the method attribute in a form?
     Specifies how form data is sent: GET or POST.
  6. What is the difference between id and name in form elements?
    • id: Uniquely identifies an element in HTML/CSS/JS.
    • name: Used to send data to the server.
  7. What is the purpose of the placeholder attribute?
     Displays hint text inside input fields.
  8. What is the difference between <label> and placeholder?
    • <label>: Permanent, improves accessibility.
    • placeholder: Temporary hint text that disappears when typing.
  9. What is the purpose of the required attribute?
     Ensures the user must fill out the input before submitting.
  10. What is the difference between <button> and <input type=”submit”>?
    • <button>: More flexible, can contain text, images, or HTML.
    • <input type=”submit”>: Limited to submitting forms.
  1. What are the new semantic elements in HTML5?
     <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <figcaption>, <main>, <mark>, <time>.
  2. What are new input types introduced in HTML5?
     email, url, date, time, color, number, range, search, tel.
  3. What is the <canvas> element used for?
     Used for drawing graphics, animations, and games using JavaScript.
  4. What is the <svg> element?
     Scalable Vector Graphics – used to display vector images.
  5. What is the difference between <canvas> and <svg>?
    • <canvas>: Pixel-based, dynamic rendering.
    • <svg>: Vector-based, scalable without quality loss.
  6. What is the difference between <audio> and <video> tags?
    • <audio>: Plays sound.
    • <video>: Plays video with audio.
  7. What is the purpose of the autoplay attribute in HTML5 media?
     Automatically starts playing media when the page loads.
  8. What is the purpose of the controls attribute in <audio> and <video>?
     Provides play, pause, and volume controls.
  9. What is localStorage in HTML5?
     Stores data in the browser with no expiration date (up to ~5MB).
  10. What is sessionStorage in HTML5?
     Stores data per session, cleared when the browser/tab is closed.
  1. What is the difference between absolute and relative URLs?
    • Absolute: Full URL with domain.
    • Relative: Path relative to the current page.
  2. What is the difference between target=”_blank” and target=”_self”?
    • _blank: Opens link in a new tab/window.
    • _self: Opens link in the same window (default).
  3. What is the difference between <embed> and <iframe>?
    • <embed>: Embeds external content (PDF, Flash, etc.).
    • <iframe>: Embeds another HTML page.
  4. What is the difference between <link> and <a>?
    • <link>: Used to connect external resources (CSS, favicon).
    • <a>: Creates hyperlinks.
  5. What is the difference between <b> and <strong>?
    • <b>: Bold without semantic meaning.
    • <strong>: Bold with emphasis/importance.
  6. What is the difference between <i> and <em>?
    • <i>: Italic style.
    • <em>: Italic with semantic meaning (emphasis).
  7. What is an image map in HTML?
     An image with clickable areas, defined using <map> and <area>.
  8. What is the alt attribute in <img> used for?
     Provides alternative text for screen readers and when image fails to load.
  9. What are ARIA roles in HTML?
     Accessibility attributes that improve screen reader support.
  10. What is the difference between <caption> and <figcaption>?
    • <caption>: Describes a <table>.
    • <figcaption>: Describes a <figure>.
  1. What are meta tags in HTML?
     Provide metadata (charset, viewport, description, keywords) inside <head>.
  2. What is the viewport meta tag?
     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    Ensures responsive design on mobile devices.
  3. What is the difference between inline, internal, and external CSS?
    • Inline: Inside HTML element (style attribute).
    • Internal: Inside <style> in <head>.
    • External: Linked via <link>.
  4. What is the difference between HTML and HTML5?
    • HTML5 introduced semantic tags, <canvas>, <audio>, <video>, localStorage, and new form inputs.
  5. What is the difference between id and class attributes?
    • id: Unique identifier for one element.
    • class: Can be used for multiple elements.
  6. What is the difference between synchronous and asynchronous scripts in HTML?
    • async: Script loads independently, execution may happen anytime.
    • defer: Script loads in order, executes after HTML parsing.
  7. What is the difference between inline elements and block elements in HTML5?
     Block takes full width; inline only as much as content needs.
  8. What is progressive rendering in HTML?
     Rendering content progressively as it loads instead of waiting for the full page.
  9. What is the difference between cookies, localStorage, and sessionStorage?
    • Cookies: Small data stored, sent with requests, size ~4KB.
    • localStorage: Stores data permanently (until cleared).
    • sessionStorage: Stores temporary data for one session.
  10. What is the difference between HTML and CSS?
    • HTML: Structure/content.
    • CSS: Styling/appearance.
  1. What is the difference between localStorage and sessionStorage?
  • localStorage: Stores data with no expiration.
  • sessionStorage: Data is cleared when the browser/tab closes.
  1. What is the difference between localStorage and cookies?
  • Cookies: Small (4KB), sent with every HTTP request.
  • localStorage: Larger (5MB+), stored only in the browser.
  1. What is the Geolocation API in HTML5?
     Allows websites to access the user’s geographical location.
  2. What is the difference between navigator.geolocation.getCurrentPosition() and watchPosition()?
  • getCurrentPosition(): Gets location once.
  • watchPosition(): Continuously tracks location.
  1. What is the Drag and Drop API in HTML5?
     Allows users to drag items and drop them onto targets using attributes like draggable=”true”.
  2. What is the Web Storage API?
     Provides localStorage and sessionStorage for storing key-value data in the browser.
  3. What is the Web Workers API?
     Runs background scripts without blocking the main thread.
  4. What is the Offline Web Application feature in HTML5?
     Using manifest files and service workers, apps can run offline.
  5. What is the Application Cache in HTML5?
     (Deprecated) Used to store files offline; replaced by Service Workers.
  6. What is the difference between Application Cache and Service Workers?
  • Application Cache: Limited, error-prone (deprecated).
  • Service Workers: Modern, flexible caching & background sync.
  1. What is the difference between <ol>, <ul>, and <dl>?
  • <ol>: Ordered list.
  • <ul>: Unordered list.
  • <dl>: Definition list (with <dt> and <dd>).
  1. What is the difference between <th>, <td>, and <tr> in tables?
  • <th>: Table header.
  • <td>: Table cell data.
  • <tr>: Table row.
  1. What is the difference between colspan and rowspan in tables?
  • colspan: Merges columns horizontally.
  • rowspan: Merges rows vertically.
  1. What is the difference between <thead>, <tbody>, and <tfoot>?
  • <thead>: Table header section.
  • <tbody>: Main table content.
  • <tfoot>: Footer (summary/notes).
  1. What is the purpose of the <caption> tag in tables?
     Provides a title/description for the table.
  2. What is the difference between inline styles and CSS classes in tables?
  • Inline: style=”color:red” → less reusable.
  • CSS class: Reusable and maintainable.
  1. What is nesting of lists in HTML?
     Lists inside another list (e.g., <ul> inside <li>).
  2. What is the difference between <pre> and <code>?
  • <pre>: Preserves whitespace and formatting.
  • <code>: Defines inline code snippets.
  1. What is the difference between <kbd>, <samp>, and <var>?
  • <kbd>: User input.
  • <samp>: Program output.
  • <var>: Variables.
  1. What is the difference between <blockquote> and <q>?
  • <blockquote>: Long quotations (block).
  • <q>: Short inline quotations.
  1. What is the difference between rel=”noopener” and rel=”noreferrer” in links?
  • noopener: Prevents new tab from accessing window.opener.
  • noreferrer: Removes referrer info in the request.
  1. What is the difference between download attribute and normal <a> tag?
  • Normal <a>: Opens the resource.
  • With download: Prompts a download.
  1. What is the difference between hidden attribute and CSS display:none?
  • hidden: Native attribute to hide elements.
  • display:none: CSS property.
  1. What is the difference between disabled and readonly in inputs?
  • disabled: Cannot interact, value not submitted.
  • readonly: Value can’t be changed but is submitted.
  1. What is the purpose of the pattern attribute in inputs?
     Defines a regex for input validation.
  2. What is the difference between <script> with defer and async?
  • async: Executes as soon as it loads (out of order).
  • defer: Executes after HTML parsing (in order).
  1. What is the difference between data-* attributes and normal attributes?
     data-*: Custom attributes for storing extra info in elements.
  2. What is the difference between <meta charset=”UTF-8″> and <meta http-equiv>?
  • charset: Defines character encoding.
  • http-equiv: Provides HTTP header-like behavior.
  1. What is the difference between rel=”stylesheet” and rel=”alternate stylesheet”?
  • stylesheet: Default CSS.
  • alternate: Optional style.
  1. What is the difference between <noscript> and <script>?
  • <script>: Runs JavaScript.
  • <noscript>: Shown if JavaScript is disabled.
  1. What are meta tags used for SEO?
     <meta name=”description”>, <meta name=”keywords”>, <meta name=”robots”>.
  2. What is the difference between title and alt attributes?
  • title: Tooltip text.
  • alt: Accessibility text for images.
  1. What is the difference between canonical and duplicate pages?
  • Canonical (<link rel=”canonical”>): Original page.
  • Duplicate: Same content accessible from multiple URLs.
  1. What is lazy loading in HTML5?
     Using loading=”lazy” on <img> or <iframe> to defer loading until needed.
  2. What is the difference between preload, prefetch, and dns-prefetch?
  • preload: Load resource early.
  • prefetch: Load resource for future navigation.
  • dns-prefetch: Resolves domain DNS early.
  1. What is the difference between inline SVG and external SVG?
  • Inline: Defined in HTML, easy to style.
  • External: Linked via <img> or <object>.
  1. What is the difference between rel=”canonical” and rel=”alternate”?
  • Canonical: Preferred version of a page.
  • Alternate: Alternative (e.g., language-specific version).
  1. What is the difference between 301 redirect and 302 redirect?
  • 301: Permanent.
  • 302: Temporary.
  1. What is critical CSS in HTML?
     CSS required to render above-the-fold content immediately.
  2. What is the difference between render-blocking and non-blocking resources?
  • Render-blocking: Prevents page rendering until loaded (e.g., CSS).
  • Non-blocking: Loads in parallel (async JS).
  1. What is the difference between HTML sanitization and validation?
  • Sanitization: Removing malicious code.
  • Validation: Checking correctness against standards.
  1. What is the difference between progressive enhancement and graceful degradation?
  • Progressive enhancement: Build for basic features, add advanced ones.
  • Graceful degradation: Build fully, but degrade gracefully if not supported.
  1. What is the difference between UTF-8 and ASCII encoding?
  • ASCII: 7-bit, limited to English.
  • UTF-8: Multi-byte, supports global languages.
  1. What is the difference between inline frame (<iframe>) and object (<object>) tags?
  • <iframe>: Embeds another HTML page.
  • <object>: Embeds media like PDFs, Flash, etc.
  1. What is the difference between innerHTML and textContent in DOM?
  • innerHTML: Includes HTML tags.
  • textContent: Only plain text.
  1. What is the difference between DOM and BOM?
  • DOM: Document Object Model (HTML structure).
  • BOM: Browser Object Model (browser APIs).
  1. What is the difference between XHTML strict and transitional?
  • Strict: Only modern, standard tags allowed.
  • Transitional: Allows deprecated tags for backward compatibility.
  1. What is the difference between inline event handling and addEventListener()?
  • Inline: onclick=”function()”.
  • addEventListener(): Modern, flexible, allows multiple handlers.
  1. What are deprecated tags in HTML5?
     <center>, <font>, <big>, <strike>, <marquee>, <u>, <applet> etc.
  2. What is the difference between HTML minification and compression?
  • Minification: Removes unnecessary spaces, comments.
  • Compression: Reduces file size using GZIP/Brotli.

Share the Valuable Post
Scroll to Top