1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create the structure of web pages and applications.

2. What are HTML tags?

HTML tags are the building blocks of an HTML page. They consist of a keyword surrounded by angle brackets, such as <html>, <body>, and <h1>. Most tags come in pairs: an opening tag and a closing tag.

3. What's the difference between HTML and XHTML?

XHTML (Extensible HyperText Markup Language) is a more rigid and stricter version of HTML. It requires all tags to be closed and written in lowercase, and attributes must be quoted.

4. What is a "void element" in HTML?

A void element is an element that cannot have any child nodes (i.e., no nested text or elements). Examples include <img>, <br>, <hr>, <input>, and <meta>.

5. What is the purpose of the `<!DOCTYPE html>` declaration?

The DOCTYPE declaration tells the browser which version of HTML the page is written in. It ensures the browser renders the page in "standards mode" rather than "quirks mode."

6. What are block-level and inline elements?

Block-level: Start on a new line and take up the full width available (e.g., <div>, <h1>, <p>, <ul>).
Inline: Do not start on a new line and only take up as much width as necessary (e.g., <span>, <a>, <strong>, <img>).

7. What is semantic HTML?

Semantic HTML uses tags that clearly describe their meaning to both the browser and the developer (e.g., <article>, <header>, <footer>, <nav>, <section>).

8. What is the difference between `<div>` and `<span>`?

<div> is a block-level element used for layout and grouping, while <span> is an inline element used to style specific parts of text or content.

9. How do you create a hyperlink in HTML?

Use the <a> (anchor) tag with the href attribute: <a href="https://example.com">Visit Example</a>.

10. What is the purpose of the `alt` attribute in the `<img>` tag?

The alt attribute provides alternative text for an image if it cannot be displayed. It is crucial for accessibility (screen readers) and SEO.

11. What are HTML5 structure tags?

HTML5 introduced several semantic tags: <header>, <footer>, <nav>, <section>, <article>, <aside>, and <main>.

12. What is the difference between `<link>` and `<a>` tags?

<link>: Used to define relationships between the current document and external resources (like CSS).
<a>: Used to create hyperlinks to other pages or sections.

13. How can you create a list in HTML?

Unordered List: Use <ul> with <li> items.
Ordered List: Use <ol> with <li> items.
Description List: Use <dl> with <dt> (term) and <dd> (description).

14. What are attributes and how are they used?

Attributes provide additional information about elements (e.g., src, href, class, id). They are always specified in the opening tag.

15. What's the difference between `display: none` and `visibility: hidden`?

display: none: Removes the element from the document layout entirely.
visibility: hidden: Hides the element but it still takes up space in the layout.

16. What is the `<iframe>` tag used for?

The <iframe> (inline frame) tag is used to embed another HTML document within the current page.

17. What are the new form input types in HTML5?

HTML5 added email, url, number, range, date, color, search, and tel.

18. What is the purpose of the `<canvas>` element?

The <canvas> element is used to draw graphics on the fly via JavaScript (e.g., charts, games, animations).

19. What is SVG?

SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike raster images, SVG graphics do not lose quality when resized.

20. What is the difference between LocalStorage and SessionStorage?

LocalStorage: Data persists even after the browser window is closed.
SessionStorage: Data is cleared when the page session ends (browser tab is closed).

21. What is the purpose of the `<meta>` tag?

Meta tags provide metadata about the HTML document, such as character set, description, keywords, author, and viewport settings.

22. How do you make a table in HTML?

Use <table>, <tr> for rows, <th> for headers, and <td> for data cells.

23. What is the `target="_blank"` attribute for?

It tells the browser to open the linked document in a new window or tab.

24. What is the difference between `<script>`, `<script async>`, and `<script defer>`?

<script>: Pauses HTML parsing to download and execute.
<script async>: Downloads in the background and executes as soon as it's ready (may interrupt parsing).
<script defer>: Downloads in the background and executes only after HTML parsing is complete.

25. What is the Web Workers API?

Web Workers allow you to run script operations in background threads, separate from the main execution thread of the web application.

26. What is Responsive Web Design?

An approach that makes web pages render well on a variety of devices and window or screen sizes. It uses flexible grids, flexible images, and media queries.

27. What is the difference between a Relative Path and an Absolute Path?

Relative Path: Points to a file relative to the current location (e.g., images/pic.jpg).
Absolute Path: Points to the full URL (e.g., https://example.com/images/pic.jpg).

28. What is the purpose of the `<head>` section?

The <head> section contains machine-readable information (metadata) about the document, such as its title, scripts, and stylesheets.

29. What is character encoding?

It tells the browser how to convert bytes into characters. UTF-8 is the most common encoding used on the web.

30. What is a "Fragment Identifier" in a URL?

The part of a URL following the # symbol. It identifies a specific portion of the document (using an id).

31. What is the difference between `<article>` and `<section>`?

<article>: Represents a self-contained composition (e.g., a blog post, news story).
<section>: Represents a generic standalone section of a document.

32. What is the purpose of the `<fieldset>` and `<legend>` tags?

They are used to group related elements in a form and provide a title for the group.

33. What is the `placeholder` attribute?

It provides a short hint that describes the expected value of an input field.

34. What is the difference between `id` and `class`?

id: Unique identifier for a single element on the page.
class: Identifier used to group multiple elements for styling or scripting.

35. What is "Quirks Mode"?

A rendering mode used by modern browsers to maintain backward compatibility with web pages designed for older browsers.

36. What is the purpose of the `<audio>` and `<video>` tags?

They are used to embed multimedia content directly into the HTML document without external plugins.

37. What is the `datalist` element?

It provides an "autocomplete" feature on input elements. Users will see a drop-down list of pre-defined options.

38. How do you create an image map?

Use the <img> tag with the usemap attribute, combined with <map> and <area> tags to define clickable regions.

39. What is the `tabindex` attribute?

Specifies the tab order of an element when the user navigates the page via the "Tab" key.

40. What is the difference between `<thead>`, `<tbody>`, and `<tfoot>`?

They are used to group the header, body, and footer content of a table, respectively.

41. What is the `download` attribute?

Used in <a> tags to prompt the user to download the linked resource instead of navigating to it.

42. What is the purpose of the `<progress>` tag?

Represents the completion progress of a task, such as a file upload or download.

43. What is the `contenteditable` attribute?

Allows the user to edit the content of an element directly in the browser.

44. What is the difference between `<cite>`, `<blockquote>`, and `<q>`?

<cite>: Defines the title of a creative work.
<blockquote>: Defines a section quoted from another source.
<q>: Defines a short inline quotation.

45. What is the `autoplay` attribute for video/audio?

Tells the browser to start playing the media as soon as it is ready.

46. What is the purpose of the `<meter>` tag?

Represents a scalar measurement within a known range, or a fractional value (e.g., disk usage, battery level).

47. What is the `required` attribute?

A boolean attribute specifying that an input field must be filled out before submitting the form.

48. What is the difference between `GET` and `POST` in forms?

GET: Appends form data to the URL (visible, limited length).
POST: Sends form data in the body of the request (private, no length limit).

49. What is the `role` attribute in ARIA?

Defines the specific role of an element for accessibility (e.g., role="button", role="navigation").

50. What is the Web Audio API?

A powerful system for controlling audio on the Web, allowing developers to choose audio sources, add effects, and create complex audio visualizations.

HTML Interview Questions

Table of Contents

What is HTML?

What are HTML tags?

What's the difference between HTML and XHTML?

What is a "void element" in HTML?

What is the purpose of the <code>&#x3C;!DOCTYPE html></code> declaration?

What are block-level and inline elements?

What is semantic HTML?

What is the difference between <code>&#x3C;div></code> and <code>&#x3C;span></code>?

How do you create a hyperlink in HTML?

What is the purpose of the <code>alt</code> attribute in the <code>&#x3C;img></code> tag?

What are HTML5 structure tags?

What is the difference between <code>&#x3C;link></code> and <code>&#x3C;a></code> tags?

How can you create a list in HTML?

What are attributes and how are they used?

What's the difference between <code>display: none</code> and <code>visibility: hidden</code>?

What is the <code>&#x3C;iframe></code> tag used for?

What are the new form input types in HTML5?

What is the purpose of the <code>&#x3C;canvas></code> element?

What is SVG?

What is the difference between LocalStorage and SessionStorage?

What is the purpose of the <code>&#x3C;meta></code> tag?

How do you make a table in HTML?

What is the <code>target="_blank"</code> attribute for?

What is the difference between <code>&#x3C;script></code>, <code>&#x3C;script async></code>, and <code>&#x3C;script defer></code>?

What is the Web Workers API?

What is Responsive Web Design?

What is the difference between a Relative Path and an Absolute Path?

What is the purpose of the <code>&#x3C;head></code> section?

What is character encoding?

What is a "Fragment Identifier" in a URL?

What is the difference between <code>&#x3C;article></code> and <code>&#x3C;section></code>?

What is the purpose of the <code>&#x3C;fieldset></code> and <code>&#x3C;legend></code> tags?

What is the <code>placeholder</code> attribute?

What is the difference between <code>id</code> and <code>class</code>?

What is "Quirks Mode"?

What is the purpose of the <code>&#x3C;audio></code> and <code>&#x3C;video></code> tags?

What is the <code>datalist</code> element?

How do you create an image map?

What is the <code>tabindex</code> attribute?

What is the difference between <code>&#x3C;thead></code>, <code>&#x3C;tbody></code>, and <code>&#x3C;tfoot></code>?

What is the <code>download</code> attribute?

What is the purpose of the <code>&#x3C;progress></code> tag?

What is the <code>contenteditable</code> attribute?

What is the difference between <code>&#x3C;cite></code>, <code>&#x3C;blockquote></code>, and <code>&#x3C;q></code>?

What is the <code>autoplay</code> attribute for video/audio?

What is the purpose of the <code>&#x3C;meter></code> tag?

What is the <code>required</code> attribute?

What is the difference between <code>GET</code> and <code>POST</code> in forms?

What is the <code>role</code> attribute in ARIA?

What is the Web Audio API?

What is the purpose of the <code><!DOCTYPE html></code> declaration?

What is the difference between <code><div></code> and <code><span></code>?

What is the purpose of the <code>alt</code> attribute in the <code><img></code> tag?

What is the difference between <code><link></code> and <code><a></code> tags?

What is the <code><iframe></code> tag used for?

What is the purpose of the <code><canvas></code> element?

What is the purpose of the <code><meta></code> tag?

What is the difference between <code><script></code>, <code><script async></code>, and <code><script defer></code>?

What is the purpose of the <code><head></code> section?

What is the difference between <code><article></code> and <code><section></code>?

What is the purpose of the <code><fieldset></code> and <code><legend></code> tags?

What is the purpose of the <code><audio></code> and <code><video></code> tags?

What is the difference between <code><thead></code>, <code><tbody></code>, and <code><tfoot></code>?

What is the purpose of the <code><progress></code> tag?

What is the difference between <code><cite></code>, <code><blockquote></code>, and <code><q></code>?

What is the purpose of the <code><meter></code> tag?