HTML Advanced Topics

Images in HTML are embedded with the <img> element. The minimum viable usage requires src and alt:

<img src="photo.jpg" alt="A red fox sitting in autumn leaves">

Core attributes:

• src — the image URL or relative path. Required.
• alt — alternative text for accessibility and fallback. Required on meaningful images; use alt="" (empty string, not omitted) for decorative images that add no information.
• width and height — declare the intrinsic dimensions in pixels (no units). The browser reserves space before the image loads, preventing cumulative layout shift (CLS). Always include both.
• loading="lazy" — defers loading until the image is near the viewport. Use for below-the-fold images. The browser will automatically use loading="eager" (the default) for images with high fetch priority.
• decoding="async" — decodes the image off the main thread, avoiding jank during page load.
• fetchpriority="high" — tells the browser to prioritize fetching this image. Use on the LCP (Largest Contentful Paint) image to improve Core Web Vitals.

Responsive images with srcset and sizes:

<img src="photo-800.jpg" alt="A red fox sitting in autumn leaves" width="800" height="533">

The browser selects the best source based on the viewport width and device pixel ratio, saving bandwidth on mobile.

`` for format selection and art direction:

  <img src="photo.jpg" alt="A red fox sitting in autumn leaves" width="800" height="533">

This serves AVIF (best compression), falls back to WebP, then JPEG. The <img> element inside `` is always required and acts as the fallback.

Common gotchas: omitting alt is an accessibility failure. Omitting width/height causes layout shift. Lazy-loading the above-the-fold hero image delays LCP.

HTML tables are created with a set of nested elements: wraps the entire table;, , and organize rows into logical sections; defines each row; defines header cells; `` defines data cells.

      Name
      Role
      Department




      Alice
      Engineer
      Platform


      Bob
      Designer
      Product

Key elements and attributes:

• — a header cell. Browsers bold and center it by default, but more importantly, screen readers use it to identify column and row headers. Always use for headers, not ``.
• scope="col" / scope="row" — on `` elements, explicitly associates the header with its column or row for assistive technologies. Critical for accessibility.
• colspan and rowspan — merge cells across multiple columns or rows.
• — a title for the table, placed immediately after. Screen readers read it first. Use it instead of a heading above the table for semantic association.
• ,, — these are optional but recommended. and `` repeat on printed pages and help browsers render large tables incrementally.

When to use tables: only for tabular data — data where the relationships between cells across rows and columns carry meaning. Do not use tables for layout. CSS Grid and Flexbox handle layout; using a table for a two-column page design is a serious anti-pattern and breaks accessibility.

Responsive tables — wide tables overflow on small screens. Common solutions: horizontal scroll on a wrapper (overflow-x: auto), or transforming the table to a card layout at narrow viewports using CSS and data-label attributes.

Links in HTML are created with the <a> (anchor) element. The href attribute specifies where the link goes:

</a><a href="https://www.example.com">Visit Example</a>

Types of link destinations:

• Absolute URL — full URL including scheme and domain: href="https://example.com/page"
• Relative URL — path relative to the current document: href="/about" or href="../images/photo.jpg"
• Fragment identifier — jumps to an element with a matching id on the current page: href="#contact-form"
• Email — opens the user's mail client: href="mailto:[email protected]"
• Phone — initiates a call on mobile: href="tel:+15551234567"
• File download — triggers a download rather than navigation when combined with the download attribute: <a href="report.pdf">Download report</a>

Important attributes:

• target="_blank" — opens the link in a new tab or window. Must be paired with rel="noopener noreferrer" to prevent the new page from accessing window.opener (a reverse tabnapping security risk) and to avoid passing the Referer header.
• rel — describes the relationship: nofollow tells search engines not to pass link equity; noopener and noreferrer are security attributes; canonical indicates the preferred URL for duplicate content.
• aria-label — provides a descriptive accessible name when the visible text alone is ambiguous. <a href="/report">Download</a> is better than unlabeled "Download" links when multiple similar links exist on the page.
• aria-current="page" — marks the current page in a navigation list for screen readers.

Accessibility gotcha: link text should describe the destination on its own — "Click here" and "Read more" are poor link labels because screen reader users often navigate by listing all links on the page. Descriptive text like "Read our accessibility guide" is correct.

`vs.`: use </a><a> for navigation (changing the URL or downloading a file); use `` for actions that don't navigate (submitting a form, toggling a modal, triggering JavaScript). Misusing one for the other breaks keyboard accessibility and screen reader expectations.

HTML document structure matters for several interconnected reasons: browser rendering, accessibility, SEO, and maintainability.

Correct structural skeleton:

    Page Title


    ...
    ...

      ...

    ...
    ...

Why structure matters:

Rendering — the browser parses HTML top-to-bottom to build the DOM. Structure determines parse order, which affects when stylesheets and scripts are discovered and applied. A blocking `in<head>withoutdeferdelays rendering; placing<meta charset>` first prevents potential character encoding issues.

Accessibility — screen readers use landmark elements (<header>, <nav>, <main>, <footer>, <aside>) to let users jump between page sections. The heading hierarchy (<h1> through <h6>) creates an outline that screen reader users navigate with keyboard shortcuts. Broken heading order (jumping from <h1> to <h4>) or missing landmarks make pages difficult to navigate without a mouse.

SEO — search engines use semantic structure to understand page content. A single <h1> identifying the page topic, followed by a logical heading outline, helps crawlers index content correctly. <main> signals the primary content area. <article> signals self-contained content.

Maintainability — a clear, semantic structure is easier to style, debug, and hand off to other developers. Deeply nested <div> soup with no semantic meaning requires reading the CSS classes to understand what each block represents; semantic HTML communicates intent in the markup itself.

The lang attribute on <html> is often overlooked: it tells screen readers which language pronunciation rules to use and enables browser spell-checking. It's required for WCAG compliance.

HTML4 (1997) and HTML5 (standardized 2014, now the living standard) differ across nearly every dimension. Key differences interviewers focus on:

1. DOCTYPE

• HTML4: ``
• HTML5: ``

2. Semantic elements HTML4 had no semantic structural elements beyond headings. Layouts used <div>, <div>, etc. HTML5 introduced ,, ,, ,, ,, , `<time>`, `<mark>`,, ``.

3. Multimedia HTML4 required plugins (Flash, QuickTime) for audio and video. HTML5 introduced ,, and for native browser playback, and for captions.

4. Forms HTML4 had text, password, checkbox, radio, file, submit, and a few others. HTML5 added email, url, tel, date, time, datetime-local, month, week, number, range, color, search — plus placeholder, required, pattern, autofocus, autocomplete, and built-in constraint validation.

5. Graphics HTML5 introduced `` for JavaScript-driven 2D/WebGL rendering and formalized SVG embedding inline in HTML documents.

6. Storage HTML4 had only cookies for client-side storage. HTML5 introduced localStorage, sessionStorage, and the platform for IndexedDB.

7. Deprecated elements Presentational elements from HTML4 — ,, , `<big>`,, <u> (for underlining), <b> used purely for styling — are obsolete in HTML5. Their presentation is handled by CSS.

8. Character encoding HTML4: . HTML5:.

9. Specification model HTML4 was a fixed W3C recommendation. HTML5 is a living standard maintained by WHATWG; it evolves continuously. There will not be an "HTML6."

10. Application Cache vs. Service Workers HTML5 shipped AppCache for offline support, which was widely criticized and later deprecated. It was replaced by Service Workers, which are now the standard.