HTML Fundamentals

Browser Testing and Rendering Engines

Chrome is commonly used for testing, employing the Blink rendering engine, which is derived from WebKit.

Purpose of the Doctype Declaration

The Doctype declaration instructs the browser on which HTML or XHTML version to use for parsing. Omitting or providing an incorrect Doctype causes the page to render in quirks mode.

Quirks Mode vs. Standards Mode

Standards mode, introduced in IE6, adheres to modern web standards. Quirks mode maintains backward compatibility with older CSS implementations from pre-IE6 days when CSS support was limited. The presence or absence of a Document Type Definition (DTD) triggers the appropriate mode in IE6 and later.

Key differences include:

• Box model: In quirks mode, element dimensions include content, padding, and border. Standards mode uses content dimensions only.
• Inline element sizing: Width and height settings apply to inline elements like <span> in quirks mode but not in standards mode.
• Percentage-based heights: In standards mode, child elements require a percentage height on the parent to be efffective.
• Horizontal centering: margin: 0 auto; works in standards mode but not in quirks mode.

HTML5 simplifies this with a basic Doctype, as it doesn't rely on SGML-based DTDs.

Advantages of Div-Based Layouts Over Table-Based Layouts

Div-based layouts with CSS offer easier style modifications through external CSS files. They render progressively as content loads, unlike table layouts that wait for complete table rendering. This results in faster perceived performance. Code clarity improves with divs, avoiding nested table structures, and SEO benefits from cleaner, semantic markup.

Alt vs. Title Attributes in Images

The title attribute displays a tooltip on hover. The alt attribute provides alternative text when images fail to load, with language specified by the lang attribute. Meaningful alt text enhances SEO.

Strong vs. Em Tags

<strong> denotes importance with bold styling. <em> indicates emphasis with italic styling.

Progressive Enhancement and Graceful Degradation

Progressive enhancement starts with basic compatibility and adds advanced features for capable browsers. Graceful degradation begins with full-featured implementations and ensures fallbacks for older browsers.

Content Delivery Networks (CDNs)

CDNs cache resources on distributed servers, enabling faster access by serving content from geographically closer locations and reducing origin server load. This differs from DNS, which resolves domain names to IP addresses.

Benefits of Multiple Domains for Resource Hosting

Using multiple domains distributes connection loads, accelerates resource fetching, and can enhance security.

Web Standards and Their Importance

Adhering to standards from bodies like W3C ensures interoperability, security, and development efficiency.

Client-Side Storage: Cookies, SessionStorage, and LocalStorage

Cookies are small-capacity storage sent with every HTTP request, used historically for authentication but limited in security and cross-domain support. Web Storage (SessionStorage and LocalStorage) offers larger capacities with dedicated APIs. SessionStorage persists per session (≈5MB), cleared on tab close. LocalStorage persists across sessions (≈20MB) until manually cleared.

Src vs. Href Attributes

Both reference external resources. src (e.g., in <script>) halts document parsing until the resource loads. href (e.g., in <link>) loads resources asynchronously without blocking. Thus, prefer <link> for CSS over @import, and place <script> tags at the end for DOM readiness.

Common Image Formats in Web Development

PNG-8, PNG-24, JPEG, GIF, and SVG are standard. WebP, developed by Google, offers superior compression (≈40% smaller than JPEG) and is gaining adoption for performance benefits.

Microformats

Microformats are semantic XHTML vocabularies that make data machine-readable, enhancing search result displays with structured information.

Caching Mechanisms

Caching occurs at multiple levels: DNS, CDN, browser, and server, each optimizing performance.

Optimizing Image-Heavy Pages

Techniques include lazy loading, preloading for carousels, CSS sprites, icon fonts, Base64 encoding, server-side compression, and responsive image delivery.

Semantic HTML

Semantic markup ensures clear structure without CSS, aids SEO marginally, and improves code maintainability.

Frontend SEO Techniques

Optimize meta tags (title, keywords, description), use semantic elements, place key content early in HTML, employ hidden text for logos, and build external links.

HTML5 New Features

Key additions: drag-and-drop API, semantic tags (header, nav, etc.), audio/video APIs, Canvas, Geolocation, Web Storage, new form inputs, Web Workers, and WebSockets.

Cross-Tab Communication

Achieve communication between browser tabs using LocalStorage or similar client-side storage.

CSS Essentials

CSS Application Methods

External stylesheets, internal <style> blocks, and inline styles.

CSS Selectors and Specificity

Common selectors: ID (#id), class (.class), element (div), adjacent sibling (h1 + p), child (ul > li), descendant (li a), universal (*), attribute (a[rel]), and pseudo-classes (a:hover).

Inheritable properties include font-size and color; non-inheritable ones are border, margin, etc. Specificity follows a hierarchy: !important > inline > ID > class > element > derived. Calculate specificity numerically (e.g., ID=100, class=10, element=1).

Example:

.classA { color: blue; }
.classB { color: red; }

<p class='classB classA'>123</p>

Result: red, due to order in CSS, not class attribute order.

Methods to Hide Elements

Basic: display: none; or visibility: hidden;. Alternatives: zero dimensions, opacity: 0, or negative z-index.

Fixing Hover Styles on Visited Links

Order CSS pseudo-classes as: :link, :visited, :hover, :active.

CSS Hacks

Browser-specific CSS code to address compatibility issues.

Inline, Inline-Block, and Block Elements

Inline elements flow horizontally with limited vertical styling. Inline-block elements (e.g., <input>) allow dimensions but stay inline. Block elements (e.g., <div>) occupy full width.

Margin Collapse

Adjacent vertical margins combine into a single margin: maximum of positives, maximum absolute of negatives, or sum of mixed signs.

Rgba vs. Opacity

rgba() affects element and background colors only. opacity applies to the entire element and contents.

Line-Height and Letter-Spacing

line-height controls vertical spacing for alignment. letter-spacing adjusts horizontal character spacing.

Centering Techniques

1. Known dimensions:

<div style="position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; height: 200px; width: 300px;"></div>

2. Unknown dimensions:

<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 200px; width: 300px;"></div>

3. Transform method:

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 300px;"></div>

4. Image centering:

#container { display: table-cell; text-align: center; vertical-align: middle; }

5. Non-floated element:

div { width: 200px; margin: 0 auto; }

CSS Units

• px: Fixed pixels.
• em: Relative to parent font size.
• rem: Relative to root font size.
• vh/vw: Percentage of viewport height/width.

CSS Resets

Reset files (e.g., reset.css) standardize default styles across browsers. Normalize.css provides consistent defaults without over-resetting.

Less CSS Preprocessor

Less extends CSS with variables, mixins, and functions for dynamic styling.

Display: None vs. Visibility: Hidden

display: none removes elements from layout, causing reflow. visibility: hidden hides elements but retains space, triggering repaint only.

Link vs. @Import

<link> is an HTML tag loaded with the page; @import loads CSS after page load, with IE5+ support and lower specificity than <link>.

Box Models

IE box model includes content, padding, and border in width/height. Standard box model uses content dimensions only.

CSS Initialization

Resetting default styles ensures consistency but may slightly impact SEO.

Block Formatting Context (BFC)

BFC creates an isolated layout container where internal elements don't affect external ones, preventing margin collapse within.

Doctype and Rendering Modes

<!DOCTYPE> sets the parsing mode. Strict mode uses highest standards; quirks mode provides backward compatibility.

Common Compatibility Issues

1. Double margin bug: Use display.
2. 3-pixel gap: display: inline; margin: -3px;.
3. Link styling: Correct pseudo-class order.
4. IE z-index: Add position: relative to parent.
5. PNG transparency: JavaScript fallbacks.
6. Min-height: !important.
7. Select overlay: iFrame wrapper.
8. 1px containers: overflow: hidden; zoom: 0.08; line-height: 1px;.
9. Opacity for IE:

.opacity {
  opacity: 0.4;
  filter: alpha(opacity=60);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

10. IE6 PNG: Use GIF alternatives.

Web Standards Compliance

Adhere to lowercase tags, proper nesting, external resources, and separation of structure, presentation, and behavior for better performence, accessibility, and maintainability.

Element Types and Box Model

Block elements: div, p, h1-h6, form, ul. Inline elements: a, b, br, i, span, input, select. Box model comprises content, padding, border, and margin.

Display Property Values

Common values: block, inline-block, inline, none, flex, list-item.

Position Property Values

• static: Default flow.
• absolute: Relative to positioned ancestor.
• fixed: Relative to viewport.
• relative: Offset from normal position.

Semantic vs. Presentational Tags

<b> and <i> are presentational; <strong> and <em> carry semantic meaning.

Text Alignment Properties

text-align centers horizontally. line-height adjusts vertical spacing. vertical-align aligns inline or table-cell content.

CSS3 Features

Border-radius, box-shadow, text-shadow, gradients, transforms (rotate, scale, etc.), advanced selectors, RGBA, media queries, multi-column layouts, and border-image.