Advanced HTML — The Complete Deep-Dive Guide

Beyond the Basics

If you already know HTML tags, forms, and semantic structure — this guide takes you deeper. Advanced HTML is less about memorizing more tags and more about understanding the platform: accessibility, performance, browser APIs, native interactivity, and how HTML integrates with the full web stack. These are the skills that separate developers who write HTML from developers who understand it.

---

Accessibility (A11y) — The Most Underrated HTML Skill

Accessibility means building websites that work for everyone — including people who use screen readers, keyboard navigation, or have visual, motor, or cognitive disabilities. It also directly affects SEO, as search engines and screen readers parse pages similarly.

ARIA — Accessible Rich Internet Applications

When native HTML semantics aren't enough — especially for custom interactive components — ARIA attributes bridge the gap.

<!-- aria-label — provides an accessible name when text label isn't visible -->
<button aria-label="Close dialog">
  <svg>...</svg>  <!-- icon-only button -->
</button>

<!-- aria-labelledby — points to an element that labels this one -->
<h2 id="modal-title">Confirm Deletion</h2>
<dialog aria-labelledby="modal-title">
  <p>Are you sure you want to delete this item?</p>
</dialog>

<!-- aria-describedby — additional description for screen readers -->
<input
  type="password"
  id="pwd"
  aria-describedby="pwd-hint"
/>
<p id="pwd-hint" class="text-sm text-gray-500">
  Must be at least 8 characters with one number.
</p>

<!-- aria-live — announce dynamic content changes -->
<div aria-live="polite" id="status-message">
  <!-- JS updates this — screen reader announces the change -->
</div>

<!-- aria-hidden — hide decorative elements from screen readers -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>

<!-- role — override or add semantic meaning -->
<div role="button" tabindex="0" onclick="handleClick()">Custom Button</div>
<div role="alert">Error: Form submission failed</div>
<div role="navigation" aria-label="Breadcrumb">...</div>

<!-- aria-expanded — for toggles, accordions, menus -->
<button aria-expanded="false" aria-controls="menu">
  Toggle Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>

<!-- aria-current — marks the active item in navigation -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/blog">Blog</a>
</nav>

<!-- aria-disabled — semantically disabled (still focusable) -->
<button aria-disabled="true">Submit (disabled)</button>

Keyboard Navigation

Every interactive element must be reachable and operable by keyboard alone.

<!-- Focus management — tabindex values -->
<div tabindex="0">Naturally focusable (in tab order)</div>
<div tabindex="-1">Focusable via JS only (focus() method), not in tab order</div>

<!-- Skip navigation link — allows keyboard users to skip repeated nav -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4">
  Skip to main content
</a>

<nav>...</nav>
<main id="main-content">
  <!-- Keyboard users land here when they activate the skip link -->
</main>

Screen reader only utility class

<!-- Visually hidden but accessible to screen readers -->
<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
</style>

<!-- Usage: icon buttons with screen reader label -->
<button>
  <svg aria-hidden="true"><!-- search icon --></svg>
  <span class="sr-only">Search</span>
</button>

Accessible Forms — The Complete Pattern

<form novalidate>
  <!-- Group related fields with fieldset + legend -->
  <fieldset>
    <legend>Billing Address</legend>

    <div class="field">
      <label for="street">
        Street Address
        <span aria-hidden="true" class="text-red-500">*</span>
        <span class="sr-only">(required)</span>
      </label>
      <input
        type="text"
        id="street"
        name="street"
        autocomplete="street-address"
        aria-required="true"
        aria-describedby="street-error"
      />
      <span id="street-error" role="alert" aria-live="assertive" class="text-red-500 text-sm hidden">
        Street address is required.
      </span>
    </div>

  </fieldset>

  <!-- Accessible error summary -->
  <div role="alert" id="form-errors" hidden>
    <h2>Please fix the following errors:</h2>
    <ul id="error-list"></ul>
  </div>

  <button type="submit">Submit</button>
</form>

---

The <dialog> Element — Native Modals

The HTML <dialog> element provides a built-in modal/dialog with accessibility, focus trapping, and ::backdrop styling — no JavaScript library needed.

<!-- The dialog element -->
<dialog id="confirm-dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Action</h2>
  <p>Are you sure you want to proceed? This cannot be undone.</p>
  <div class="dialog-actions">
    <button id="cancel-btn">Cancel</button>
    <button id="confirm-btn" autofocus>Confirm</button>
  </div>
</dialog>

<!-- Trigger button -->
<button id="open-btn">Open Dialog</button>

<script>
  const dialog = document.getElementById('confirm-dialog')
  const openBtn = document.getElementById('open-btn')
  const cancelBtn = document.getElementById('cancel-btn')
  const confirmBtn = document.getElementById('confirm-btn')

  // showModal() — traps focus and adds ::backdrop
  openBtn.addEventListener('click', () => dialog.showModal())

  // close() — dismisses the dialog
  cancelBtn.addEventListener('click', () => dialog.close())

  // Close on backdrop click
  dialog.addEventListener('click', (e) => {
    if (e.target === dialog) dialog.close()
  })

  // Close on Escape — built-in, no extra code needed
</script>

<style>
  dialog {
    border: none;
    border-radius: 12px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
</style>

---

HTML5 Media — Audio and Video

<!-- Video with multiple formats for browser compatibility -->
<video
  controls
  width="800"
  height="450"
  poster="thumbnail.jpg"
  preload="metadata"
>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  <track
    kind="subtitles"
    src="subtitles-en.vtt"
    srclang="en"
    label="English"
    default
  />
  <track
    kind="subtitles"
    src="subtitles-hi.vtt"
    srclang="hi"
    label="Hindi"
  />
  <p>Your browser doesn't support video. <a href="video.mp4">Download it</a>.</p>
</video>

<!-- Autoplay (muted required for autoplay to work) -->
<video autoplay muted loop playsinline>
  <source src="hero-bg.webm" type="video/webm" />
</video>

<!-- Audio -->
<audio controls preload="none">
  <source src="podcast.ogg" type="audio/ogg" />
  <source src="podcast.mp3" type="audio/mpeg" />
</audio>

<!-- Responsive video embed (YouTube/iframe) -->
<div style="position: relative; padding-top: 56.25%;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>

---

Responsive Images — The Complete Picture

Serving the right image size for the device is one of the biggest performance wins available in HTML.

srcset and sizes — Resolution switching

<!-- Browser picks the right resolution based on screen density and size -->
<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg   400w,
    hero-800.jpg   800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    800px
  "
  alt="Hero image"
  width="1600"
  height="900"
/>

How sizes works: At max-width: 640px (mobile), the image takes 100% of the viewport width. Between 640px and 1024px (tablet), it takes 50%. On larger screens, it's a fixed 800px. The browser uses this to pick the optimal source from srcset.

<picture> — Art direction and format switching

<picture>
  <!-- Modern format for browsers that support it -->
  <source
    type="image/avif"
    srcset="hero.avif 1x, hero@2x.avif 2x"
  />
  <source
    type="image/webp"
    srcset="hero.webp 1x, hero@2x.webp 2x"
  />

  <!-- Different crop for mobile vs desktop (art direction) -->
  <source
    media="(max-width: 640px)"
    srcset="hero-mobile.jpg"
  />

  <!-- Fallback for all browsers -->
  <img src="hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

---

<canvas> — Drawing with JavaScript

The <canvas> element gives you a pixel-level drawing surface, controlled entirely by JavaScript. Used for charts, games, image processing, and generative art.

<canvas id="myCanvas" width="600" height="400"></canvas>

<script>
  const canvas = document.getElementById('myCanvas')
  const ctx = canvas.getContext('2d')

  // Draw a filled rectangle
  ctx.fillStyle = '#3b82f6'
  ctx.fillRect(50, 50, 200, 100)

  // Draw a stroked rectangle
  ctx.strokeStyle = '#1d4ed8'
  ctx.lineWidth = 3
  ctx.strokeRect(300, 50, 200, 100)

  // Draw a circle
  ctx.beginPath()
  ctx.arc(150, 250, 60, 0, Math.PI * 2)
  ctx.fillStyle = '#10b981'
  ctx.fill()

  // Draw text
  ctx.font = 'bold 24px sans-serif'
  ctx.fillStyle = '#1f2937'
  ctx.fillText('Hello Canvas', 280, 260)

  // Draw a line
  ctx.beginPath()
  ctx.moveTo(50, 350)
  ctx.lineTo(550, 350)
  ctx.strokeStyle = '#6b7280'
  ctx.lineWidth = 2
  ctx.stroke()

  // Draw an image on canvas
  const img = new Image()
  img.src = 'photo.jpg'
  img.onload = () => ctx.drawImage(img, 10, 10, 200, 150)
</script>

Animation with Canvas

<canvas id="animCanvas" width="600" height="400"></canvas>

<script>
  const canvas = document.getElementById('animCanvas')
  const ctx = canvas.getContext('2d')
  let x = 0

  function animate() {
    // Clear the frame
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // Draw the moving ball
    ctx.beginPath()
    ctx.arc(x, 200, 30, 0, Math.PI * 2)
    ctx.fillStyle = '#ef4444'
    ctx.fill()

    // Move
    x = (x + 3) % (canvas.width + 30)

    // Next frame
    requestAnimationFrame(animate)
  }

  animate()
</script>

---

Inline SVG — Scalable Vector Graphics in HTML

SVG is the best format for icons, illustrations, charts, and logos. Embedding SVG inline (rather than using <img>) lets you control it with CSS and JavaScript.

<!-- Inline SVG — fully controllable -->
<svg
  width="100"
  height="100"
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
  aria-label="Settings icon"
  role="img"
>
  <!-- Circle -->
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />

  <!-- Text inside SVG -->
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="20" font-weight="bold">
    Hi
  </text>
</svg>

<!-- SVG styled with CSS -->
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
  <path d="M2 12l10 5 10-5"/>
</svg>

<style>
  .icon {
    width: 24px;
    height: 24px;
    color: #3b82f6;          /* currentColor picks this up */
    transition: color 0.2s;
  }
  .icon:hover {
    color: #1d4ed8;
  }
</style>

<!-- Animated SVG -->
<svg viewBox="0 0 100 10" width="200">
  <rect width="0" height="10" fill="#3b82f6" rx="5">
    <animate
      attributeName="width"
      from="0"
      to="100"
      dur="2s"
      fill="freeze"
    />
  </rect>
</svg>

---

Web Components — Custom HTML Elements

Web Components let you create your own reusable HTML elements with encapsulated styles and behavior — no framework required.

<!-- Using a custom element -->
<user-card
  name="Ankur Goswami"
  role="Frontend Developer"
  avatar="https://example.com/avatar.jpg"
></user-card>

<script>
  class UserCard extends HTMLElement {
    constructor() {
      super()
      // Shadow DOM — encapsulated styles that don't leak
      this.attachShadow({ mode: 'open' })
    }

    connectedCallback() {
      const name = this.getAttribute('name')
      const role = this.getAttribute('role')
      const avatar = this.getAttribute('avatar')

      this.shadowRoot.innerHTML = `
        <style>
          :host {
            display: block;
            font-family: sans-serif;
          }
          .card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: white;
          }
          img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
          }
          .name { font-weight: 600; font-size: 15px; margin: 0; }
          .role { color: #6b7280; font-size: 13px; margin: 2px 0 0; }
        </style>
        <div class="card">
          <img src="${avatar}" alt="${name}" />
          <div>
            <p class="name">${name}</p>
            <p class="role">${role}</p>
          </div>
        </div>
      `
    }

    // React to attribute changes
    static get observedAttributes() {
      return ['name', 'role', 'avatar']
    }

    attributeChangedCallback() {
      this.connectedCallback()
    }
  }

  // Register the custom element
  customElements.define('user-card', UserCard)
</script>

<template> — Reusable HTML Templates

<!-- Define template — not rendered until cloned -->
<template id="post-card-template">
  <article class="card">
    <h2 class="card-title"></h2>
    <p class="card-excerpt"></p>
    <a class="card-link">Read More →</a>
  </article>
</template>

<div id="posts-container"></div>

<script>
  const template = document.getElementById('post-card-template')
  const container = document.getElementById('posts-container')

  const posts = [
    { title: 'HTML Basics', excerpt: 'Learn the fundamentals...', href: '/html-basics' },
    { title: 'CSS Grid', excerpt: 'Master modern layouts...', href: '/css-grid' },
  ]

  posts.forEach(post => {
    const clone = template.content.cloneNode(true)
    clone.querySelector('.card-title').textContent = post.title
    clone.querySelector('.card-excerpt').textContent = post.excerpt
    clone.querySelector('.card-link').href = post.href
    container.appendChild(clone)
  })
</script>

---

Native HTML Interactivity — No JavaScript Needed

Several HTML elements provide interactivity out of the box.

<details> and <summary> — Native Accordion

<details>
  <summary>What is HTML?</summary>
  <p>
    HTML stands for HyperText Markup Language. It is the standard markup language
    for creating web pages and web applications.
  </p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>
    CSS stands for Cascading Style Sheets. It describes how HTML elements
    should be displayed on screen.
  </p>
</details>

<!-- Open by default -->
<details open>
  <summary>This starts expanded</summary>
  <p>Content visible from the start.</p>
</details>

<datalist> — Input with Autocomplete Suggestions

<label for="framework">Favorite Framework</label>
<input
  type="text"
  id="framework"
  list="frameworks"
  placeholder="Type to search..."
/>
<datalist id="frameworks">
  <option value="Next.js"></option>
  <option value="Nuxt.js"></option>
  <option value="SvelteKit"></option>
  <option value="Remix"></option>
  <option value="Astro"></option>
  <option value="Angular"></option>
</datalist>

<progress> and <meter> — Native Progress Indicators

<!-- Progress bar — for tasks with known completion -->
<label for="upload">Uploading file:</label>
<progress id="upload" value="65" max="100">65%</progress>

<!-- Meter — for gauges, ratings, disk usage -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="7" min="0" max="10" low="3" high="8" optimum="1">
  7 out of 10 GB
</meter>

<!-- Password strength example -->
<label for="strength">Password strength:</label>
<meter id="strength" min="0" max="4" value="3" low="1" high="3" optimum="4"></meter>

<output> — Live Calculation Result

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="10" />
  +
  <input type="number" id="b" value="20" />
  =
  <output name="result" for="a b">30</output>
</form>

---

Performance HTML — What Belongs in the <head> and When

The order and attributes of resources in <head> significantly affect page load performance.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Preconnect to critical third-party origins — do early -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- DNS prefetch for non-critical origins -->
  <link rel="dns-prefetch" href="https://analytics.example.com" />

  <!-- Preload critical assets — fonts, hero image, critical CSS -->
  <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
  <link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />

  <!-- Critical CSS inline — eliminates render-blocking -->
  <style>
    /* Minimal above-the-fold styles only */
    body { margin: 0; font-family: sans-serif; }
    header { ... }
    .hero { ... }
  </style>

  <!-- Non-critical CSS — defer with media trick -->
  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'" />
  <noscript><link rel="stylesheet" href="styles.css" /></noscript>

  <title>Page Title</title>
</head>

<body>
  <!-- Content -->

  <!-- Scripts: defer non-critical JS -->
  <script src="app.js" defer></script>

  <!-- async — loads in parallel, executes immediately when ready (no guaranteed order) -->
  <script src="analytics.js" async></script>

  <!-- type="module" — always deferred, ES modules -->
  <script type="module" src="main.js"></script>
</body>

Script loading strategies

Attribute	When to use	Behavior
No attribute	Never (blocks parsing)	Downloads and executes immediately, blocking HTML parsing
defer	App scripts that need DOM	Downloads in parallel, executes after HTML parsed, in order
async	Independent scripts (analytics)	Downloads in parallel, executes immediately when ready, out of order
type="module"	ES module scripts	Always deferred, enables import/export

---

HTML Forms — Advanced Patterns

Native Form Validation

<form>
  <!-- Pattern validation with regex -->
  <input
    type="text"
    pattern="[A-Za-z]{3,}"
    title="At least 3 alphabetic characters"
    required
  />

  <!-- Custom validation message via JS -->
  <input type="email" id="email" required />

  <!-- Number constraints -->
  <input type="number" min="1" max="100" step="5" value="10" />

  <!-- Date range -->
  <input
    type="date"
    min="2024-01-01"
    max="2026-12-31"
    required
  />

  <!-- Multiple file upload -->
  <input type="file" multiple accept=".pdf,.doc,.docx" />

  <!-- Color picker -->
  <input type="color" value="#3b82f6" />

  <!-- Range slider -->
  <input type="range" min="0" max="100" value="50" step="10" />
</form>

<script>
  // Custom validation message
  const emailInput = document.getElementById('email')
  emailInput.addEventListener('invalid', () => {
    if (emailInput.validity.valueMissing) {
      emailInput.setCustomValidity('Please enter your email address.')
    } else if (emailInput.validity.typeMismatch) {
      emailInput.setCustomValidity('Please enter a valid email like name@example.com.')
    }
  })
  emailInput.addEventListener('input', () => emailInput.setCustomValidity(''))
</script>

autocomplete for Better UX and Autofill

<form>
  <input type="text" name="name" autocomplete="name" />
  <input type="email" name="email" autocomplete="email" />
  <input type="tel" name="phone" autocomplete="tel" />
  <input type="text" name="address" autocomplete="street-address" />
  <input type="text" name="city" autocomplete="address-level2" />
  <input type="text" name="country" autocomplete="country-name" />
  <input type="text" name="postal" autocomplete="postal-code" />

  <!-- Credit card -->
  <input type="text" name="cc-name" autocomplete="cc-name" />
  <input type="text" name="cc-number" autocomplete="cc-number" />
  <input type="text" name="cc-exp" autocomplete="cc-exp" />
  <input type="text" name="cc-csc" autocomplete="cc-csc" />

  <!-- OTP — triggers SMS autofill on mobile -->
  <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" />
</form>

inputmode — Mobile Keyboard Optimization

<!-- Shows numeric keypad on mobile -->
<input type="text" inputmode="numeric" pattern="[0-9]*" />

<!-- Shows keyboard with @ and . for email -->
<input type="text" inputmode="email" />

<!-- Shows keyboard with / for URLs -->
<input type="text" inputmode="url" />

<!-- Shows keyboard with decimal point -->
<input type="text" inputmode="decimal" />

<!-- Shows phone keypad -->
<input type="text" inputmode="tel" />

---

Data Attributes — HTML-JavaScript Bridge

data-* attributes store custom data on elements, making it easy to pass data from HTML to JavaScript without hidden inputs or global variables.

<!-- Store data on elements -->
<button
  data-product-id="SKU-1234"
  data-product-name="Next.js Course"
  data-price="1999"
  data-currency="INR"
  onclick="addToCart(this)"
>
  Add to Cart
</button>

<script>
  function addToCart(button) {
    const { productId, productName, price, currency } = button.dataset
    // dataset automatically converts data-product-id → productId (camelCase)
    console.log(`Adding ${productName} (${productId}) - ${currency} ${price}`)
  }

  // Query by data attribute
  const deleteButtons = document.querySelectorAll('[data-action="delete"]')
  deleteButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.dataset.id
      deleteItem(id)
    })
  })
</script>

<!-- Useful for CSS too -->
<div data-theme="dark" data-density="compact">...</div>

<style>
  [data-theme="dark"] {
    background: #1a1a2e;
    color: #e0e0ff;
  }
  [data-density="compact"] {
    padding: 4px 8px;
  }
</style>

---

Meta Tags for Maximum SEO and Social Reach

<head>
  <!-- Core SEO -->
  <title>Advanced HTML Guide | Ankur Goswami</title>
  <meta name="description" content="Master advanced HTML concepts including accessibility, Web Components, Canvas, and performance optimization." />
  <meta name="keywords" content="HTML5, Web Components, Canvas, Accessibility, ARIA" />
  <link rel="canonical" href="https://ankurgoswami.com/html-advanced" />

  <!-- Open Graph — Facebook, LinkedIn, WhatsApp -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Advanced HTML — The Complete Deep-Dive Guide" />
  <meta property="og:description" content="Master advanced HTML concepts including accessibility, Web Components, Canvas, and performance." />
  <meta property="og:image" content="https://ankurgoswami.com/og/html-advanced.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://ankurgoswami.com/html-advanced" />
  <meta property="og:site_name" content="Ankur Goswami" />
  <meta property="article:published_time" content="2026-01-22T00:00:00Z" />
  <meta property="article:author" content="https://ankurgoswami.com/about" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@ankurgoswami" />
  <meta name="twitter:title" content="Advanced HTML — The Complete Deep-Dive Guide" />
  <meta name="twitter:description" content="Master advanced HTML concepts." />
  <meta name="twitter:image" content="https://ankurgoswami.com/og/html-advanced.png" />

  <!-- PWA and mobile -->
  <meta name="theme-color" content="#3b82f6" />
  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Robots control -->
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large" />
</head>

---

HTML and Security

Content Security Policy (CSP)

<!-- Restrict what resources the page can load -->
<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' 'nonce-RANDOM123';
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https://images.example.com;
    font-src 'self' https://fonts.gstatic.com;
    connect-src 'self' https://api.example.com;
  "
/>

<!-- Use nonce on allowed inline scripts -->
<script nonce="RANDOM123">
  // This script is allowed by the CSP
  console.log('Secure script')
</script>

Subresource Integrity (SRI)

<!-- Verify that a CDN file hasn't been tampered with -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
  integrity="sha512-wnea99uKIC3TIA5..."
  crossorigin="anonymous"
/>

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js"
  integrity="sha512-..."
  crossorigin="anonymous"
></script>

Secure iframe embedding

<!-- sandbox restricts what the iframe can do -->
<iframe
  src="https://example.com/widget"
  sandbox="allow-scripts allow-same-origin allow-forms"
  referrerpolicy="no-referrer"
  title="Widget"
></iframe>

<!-- Prevent your pages from being embedded in iframes (clickjacking) -->
<!-- Set via HTTP header: X-Frame-Options: DENY -->
<!-- Or CSP: frame-ancestors 'none' -->

---

Conclusion

Advanced HTML is about mastering the platform — using what browsers give you natively before reaching for JavaScript or a library. Native <dialog>, <details>, form validation, Web Components, Canvas, and the full suite of ARIA attributes are all right there in the browser, free of cost, with zero bundle size.

The key takeaways from this guide:

• Accessibility is not optional — ARIA, keyboard navigation, and semantic HTML make your site usable for everyone and better for SEO
• Native beats custom — <dialog> over custom modal libraries, <details> over accordion components, native form validation before custom JS
• Performance starts in <head> — preload, preconnect, defer, and async are the tools that give you fast pages without framework magic
• data-* attributes are the clean bridge between HTML and JavaScript — use them instead of global variables or hidden inputs
• Web Components let you create framework-agnostic, reusable elements that work everywhere

HTML has evolved dramatically over the last decade. If you're still thinking of it as just a way to put text on a screen, you're missing most of what the modern web platform offers. Dig into it — the depth is real.