Essential HTML Knowledge for Front-End Technical Interviews
Image Element Attributes: alt vs title
The <img> tag utilizes two distinct attributes for different purposes:
- alt (Alternative Text): Serves as a critical fallback mechanism. When an image resource fails to load due to network issues or broken paths, this text displays in its place. It is also essential for accessibility, providing context for screen readers used by visually impaired users. This attribute is mandatory for valid HTML documents.
- title: Provides supplementary information. When a user hovers their mouse cursor over the image element, a tooltip appears containing this text. Unlike
alt, thetitleattribute is optional and can be applied to various HTML elements beyond just images.
Web Standards and W3C Compliance
Adhering to web standards ensures cross-browser compatibility and maintainability. Key requirements include:
- Properly closing all HTML tags, including self-closing elements.
- Writing element names in lowercase.
- Ensuring correct nesting hierarchy; child elements must be closed before their parent elements.
- Separating concerns by linking external CSS stylesheets and JavaScript files rather than embedding them inline.
- Maintaining a strict separation between structure (HTML), presentation (CSS), and behavior (JavaScript).
HTML5 Features and Deprecated Elements
New Semantic Tags: HTML5 introduced semantic elements that improve document structure and accessibility. Commonly used tags include <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, and <figcaption>.
Multimedia Support: Native support for audio and video through <audio> and <video> tags, along with <canvas> for dynamic graphics rendering.
Client-Side Storage: The Web Storage API provides localStorage for persistent data and sessionStorage for session-based data storage.
Enhanced Interactivity: The contenteditable attribute enables users to modify element content directly in the browser when set to true. The Geolocation API allows websites to request the user's geographical location.
Deprecated Elements: Presentation-focused tags that mixed structure with style have been removed, including <basefont>, <font>, <center>, <big>, <strike>, <u>, and <tt>. CSS should handle all visual formatting instead.
Differences Between HTML and XHTML
XHTML (Extensible HyperText Markup Language) is a stricter, XML-based reformulation of HTML. Key distinctions:
- All elements must be properly nested without overlapping tags.
- Every element requires a closing tag; self-closing tags like
<br />must include the trailing slash. - Element and attribute names must be lowercase.
- The document structure must contain a single root
<html>element that encloses all content.
Document Type Declaration and Rendering Modes
The <!DOCTYPE> declaration appears at the very beginning of an HTML document, before the <html> tag. It instructs the browser which version of HTML to expect and determines the rendering mode.
Standards Mode (Strict Mode): Triggered when a valid DOCTYPE is present. The browser renders the page according to the latest W3C standards, ensuring consistent behavior across modern browsers.
Quirks Mode: Activated when the DOCTYPE is missing, malformed, or specifies an older version. The browser emulates the behavior of legacy browsers to maintain backward compatibility with older websites. This can lead to inconsistent layout and JavaScript behavior.
Block-Level vs. Inline Elements
Block-Level Elements: These elements create distinct blocks within the document flow. They begin on a new line by default and expand horizontally to fill their container. Width, height, margin, and padding properties can be applied in all directions. Examples include <div>, <p>, <h1> through <h6>, <ul>, and <li>.
Inline Elements: These elements flow within the surrounding content without starting on a new line. Setting width and height has no effect. Horizontal margin and padding function normally, but vertical margin and padding only affect the element's visual space without pushing surrounding elements. Examples include <span>, <a>, <strong>, and <em>.
Void Elements: Self-closing elements that cannot contain content, such as <br>, <hr>, <img>, <input>, and <link>.
Global Attributes in HTML
Global attributes can be applied to any HTML element, providing universal functionality:
class: Assigns one or more class names for CSS styling and JavaScript selection.id: Provides a unique identifier within the document, useful for anchor links and scripting.data-*: Custom data attributes that store extra information without using non-standard properties.style: Applies inline CSS rules directly to the element.title: Adds advisory information, typically displayed as a tooltip.lang: Declares the language of the element's content.dir: Specifies text direction, accepting values likeltr(left-to-right) orrtl(right-to-left).contenteditable: When set totrue, allows users to edit the element's text content.hidden: Hides the element from view, preventing it from rendering.
Comparing Canvas and SVG
SVG (Scalable Vector Graphics): An XML-based language for describing two-dimensional graphics. SVG uses a retained mode graphics model where the rendering engine preserves a complete model of the objects to be rendered. Each shape exists as an independent DOM element that can be manipulated individually. Being vector-based, SVG graphics scale without quality loss, making them ideal for icons, logos, and complex illustrations.
Canvas: A resolution-dependent bitmap rendering surface introduced in HTML5. It uses an immediate mode graphics model where the application programmatically controls what gets drawn. Once pixels are drawn, the system retains no memory of them. Canvas is better suited for complex animations, games, image processing, and real-time data visualization where performance is critical.
Simplified DOCTYPE in HTML5
The HTML5 DOCTYPE declaration uses a minimal syntax: <!DOCTYPE html>. Unlike previous versions that required lengthy references to DTD (Document Type Definition) files, HTML5 is not based on SGML, eliminating the need for complex version specifications. This simplified declaration serves a single purpose: triggering standards mode rendering in all modern browsers, ensuring the document is interpreted according to HTML5 specifications.
