HTML Interview Questions

1. Can we embed one webpage within another? How does nesting of webpages work?

Yes, embedding one webpage within another is achievable in HTML using the <iframe> element. This element acts as a container to load and display another HTML document within the parent page. Attributes like src specify the URL of the embedded content, while properties such as height and width control the display size. Nesting webpages can be helpful for including external content like maps or videos. However, security measures like sandbox attributes can be applied to prevent unwanted interactions between the parent and embedded pages.

2. What are void elements in HTML, and why are they unique?

Void elements are self-closing tags in HTML that do not have a closing counterpart. Examples include <img>, <br>, and <input>. They are unique because they cannot enclose any content or child elements. Their simplicity improves readability and avoids errors caused by unclosed tags, which makes them integral for elements serving a singular purpose like inserting a line break or rendering an image.

3. How does collapsing white space benefit HTML documents?

HTML's white space collapsing ensures that sequences of spaces, tabs, and line breaks are treated as a single space. This simplifies rendering by reducing redundancy and ensuring uniform content presentation across browsers. It also helps developers focus on code readability without worrying about extra spacing affecting layout.

4. What are HTML entities, and when should they be used?

HTML entities are special character codes used to display reserved or special characters in web pages. For example, &lt; represents <, and &amp; represents &. These entities are essential when embedding symbols that might otherwise be misinterpreted by the browser as part of the code, such as in <script> elements or when displaying mathematical symbols.

5. What types of lists can you create in HTML?

HTML supports three primary types of lists:

  1. Ordered Lists (<ol>) display items in a sequentially numbered format.
  2. Unordered Lists (<ul>) use bullets to represent items.
  3. Description Lists (<dl>) consist of terms (<dt>) and their descriptions (<dd>).

These lists enhance content organization and improve readability.

6. How is the class attribute used in HTML?

The class attribute assigns one or more class names to an HTML element, allowing it to be styled or targeted by CSS and JavaScript. For instance, multiple elements can share the same class name, facilitating consistent styling across various sections of a webpage.

7. What distinguishes the id attribute from the class attribute in HTML elements?

The id attribute uniquely identifies an element on a webpage, whereas the class attribute can be applied to multiple elements. While id is used for singular, distinct elements, class enables grouping for consistent styling or behavior. The uniqueness of id makes it suitable for JavaScript targeting or anchors.

8. What do you understand by multipart form data in HTML?

Multipart form data, enabled via the enctype="multipart/form-data" attribute in forms, is used to upload files or send large amounts of data. It segments the data into multiple parts, each containing a content-disposition header, making it essential for file uploads and complex data processing on the server side.

9. Can you describe the basic structure of an HTML layout?

An HTML layout typically consists of the following parts:

  • <!DOCTYPE> Declaration: Specifies the HTML version.
  • <html> Element: Encloses the entire document.
  • <head> Section: Includes metadata, title, and links to resources like CSS and JavaScript.
  • <body> Section: Contains the visible content, including headings, paragraphs, images, and scripts.

This structure ensures proper rendering and functionality.

10. What strategies can be employed to optimize website asset loading?

Optimization strategies include:

  • Minification: Removing unnecessary characters from code.
  • Lazy Loading: Deferring the loading of non-critical resources.
  • Compression: Using gzip or Brotli to reduce file sizes.
  • CDNs: Delivering assets from servers closer to users.
  • Caching: Storing assets locally for faster subsequent loads.

11. Which tags in HTML are used for formatting content?

Common tags include:

  • <b> and <strong>: Bold text, with strong implying importance.
  • <i> and <em>: Italicized text, with em adding emphasis.
  • <u>: Underlines content.
  • <mark>: Highlights text.
  • <sup> and <sub>: Superscripts and subscripts.

12. What are the different kinds of Doctypes in HTML, and what is their purpose?

Doctypes like <!DOCTYPE html> for HTML5 and earlier versions like HTML 4.01 Transitional define the HTML version used in the document. They inform the browser how to interpret the markup, ensuring consistent rendering across different platforms.

13. How can you specify the character set for an HTML document?

The character set is specified using the <meta charset="UTF-8"> tag within the <head> section. UTF-8 is widely used as it supports a vast range of characters and symbols, including those from multiple languages.

14. How are <strong> and <b> different from <em> and <i> tags?

  • <strong> and <em> convey semantic meaning, indicating importance or emphasis.
  • <b> and <i> purely alter the visual style (bold or italic) without implying any semantic significance.

15. What roles do the <head> and <body> tags play in an HTML document?

  • The <head> contains metadata, stylesheets, scripts, and information not directly displayed.
  • The <body> contains the content visible to users, such as text, images, and multimedia.

16. Can an inline element be converted into a block-level element? How?

Yes, using CSS, an inline element can be transformed into a block-level element by setting the display property to block.

17. What values can the position property take in CSS, and how do they function?

The position property can be:

  • Static: Default positioning.
  • Relative: Offset relative to its normal position.
  • Absolute: Positioned relative to the nearest positioned ancestor.
  • Fixed: Positioned relative to the viewport.
  • Sticky: Toggles between relative and fixed based on scroll position.

18. In how many ways can HTML elements be displayed?

HTML elements can be displayed as:

  • Block: Takes up the full width.
  • Inline: Occupies only as much width as needed.
  • Inline-block: Behaves like inline but allows block-like dimensions.
  • None: Hides the element from display.

19. How do “display: none” and “visibility: hidden” differ when applied to HTML elements?

  • display: none removes the element from the document flow.
  • visibility: hidden makes the element invisible but retains its space in the layout.