> Canonical URL: https://codingcat.dev/topic/html

# HTML Courses, Podcasts & Blog Posts | CodingCat.dev

⌨️ Language & Standard Hub

# HTML.

Semantic HTML5 Landmarks, Native Dialog/Popover, Forms & SEO

Explore CodingCat.dev hands-on courses, video lessons, podcast episodes, and technical deep-dive blog posts covering HTML: Semantic HTML5 Landmarks, Native Dialog/Popover, Forms & SEO.

[Search All HTML Content](/search?q=HTML)![HTML official logo](/logos/tags/html-lockup-light.svg)![HTML official logo](/logos/tags/html-lockup-dark.svg)Official HTML Brand Lockup (7 Blog Posts · 1 Episodes)✏️ HTML Production Architecture Diagram✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]How HTML fits into a modern, type-safe full-stack production architecture on CodingCat.dev.AAA Contrast Verified

## HTML Courses.

[All Courses→](/courses)[![HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](https://cdn.sanity.io/images/hfh83o0w/production/40ad87fae480aff0c65b6d22225ccf69217ce6e5-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/hyperframes-html-to-video-agents)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](/course/hyperframes-html-to-video-agents)

Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents.

[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)

### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)

Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection.

[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/4f86d9868b815e41566e22ae9106f46759e0fc77-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y)

Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native <dialog> and Popover components.

[![The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](https://cdn.sanity.io/images/hfh83o0w/production/7c9064f71f2104b855c2c5cbdc387a70c416c135-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-intermediate-html-and-css-grid)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](/course/odin-intermediate-html-and-css-grid)

Master 2D CSS Grid layouts, Subgrid, CSS Custom Properties, fluid clamp() typography, container queries, and zero-JS form validation with :user-valid.

[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/1a16c3a9f7f59d535bef1ab5ee4058e573b80043-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)

Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals.

[![HTML for a 10 Year Old](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/af1c94461826c80c797c64b2633b7ea33e056960-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/course/html-for-a-10-year-old)March 1, 2022[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [HTML for a 10 Year Old](/course/html-for-a-10-year-old)

Learn HTML from the very beginning with live coding examples.

## HTML Blog Posts.

Showing 7 of 7 blog postsFiltered: HTML[Open Full Topic Hub &rarr;](/topic/html)[![The Five Layers of Agentic Context: Why Canon Only Turns When Someone Signs Off](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d702615b4d3c30ea99dc40f10a576db4cd1c4c73-2752x1536.jpg?w=1920&q=82&fit=max&auto=format)](/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off)October 14, 2026[![](/logos/sanity/Sanity-Symbol--black_on_transparent.svg)![](/logos/sanity/Sanity-Symbol--white_on_transparent.svg)Sanity](/topic/sanity)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Five Layers of Agentic Context: Why Canon Only Turns When Someone Signs Off](/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off)

A deep-dive review of Magnus Hillestad's Five Layers of Agentic Context on the Sanity blog, exploring why Situation, Records, Memory, Process, and Canon move at different speeds, plus a working interactive HTML/SVG Situation-to-Canon wheel you can drop into any webpage.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Alex Patterson and AJ the Cat presenting the Dual-Plane Agent-Ready Web Stack with WebMCP and Streamable HTTP MCP](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/dd8b89a42ee37457891b58d39c6273a31ac013e4-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/agent-ready-web-architecture-webmcp-streamable-mcp-llms-txt)September 22, 2026[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [Architecting the Agent-Ready Web: Combining Client-Side WebMCP, Streamable HTTP MCP, and RFC 9727 Discovery](/post/agent-ready-web-architecture-webmcp-streamable-mcp-llms-txt)

A complete walkthrough of CodingCat.dev's dual-plane Agent-Ready Web Architecture: pairing client-side W3C WebMCP tools (document.modelContext and declarative HTML forms) with edge Streamable HTTP MCP endpoints, RFC 9727 API catalogs, and Markdown content negotiation.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Alex Patterson and AJ the Cat showcasing WebMCP browser tools with document.modelContext and registerTool](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f159a625ba5a16a0d6c60789623809d0363282b4-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/webmcp-browser-native-model-context-protocol-guide)April 14, 2026[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)

### [WebMCP Explained: Exposing Browser-Native AI Tools with document.modelContext and Declarative HTML](/post/webmcp-browser-native-model-context-protocol-guide)

Stop forcing browser AI agents to scrape brittle DOM trees. Learn how the W3C WebMCP specification (document.modelContext.registerTool and declarative <form toolname> attributes) turns your web app into a type-safe, zero-latency agent toolkit.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Design Systems with Web Components](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f13e901f6157a042ba6ceb021a00f56788286990-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/design-systems-with-web-components)May 25, 2022[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design)

### [Design Systems with Web Components](/post/design-systems-with-web-components)

How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Accessibility Best Practices for HTML & CSS](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/92adbc842c19879beb03a6291c6437fe7ea9dac6-1200x631.png?w=1200&q=82&fit=max&auto=format)](/post/accessibility-best-practices-for-html-and-css)August 19, 2021[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [Accessibility Best Practices for HTML & CSS](/post/accessibility-best-practices-for-html-and-css)

Accessibility is an ongoing, ever-evolving process that is an extremely important aspect for inclusion and usability. These are some of the best practices you can follow in HTML and CSS to improve the user's experience on your site.

[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Adding Angular Components to your static site](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ccbc8203df1de782371c3ee852dbc5f647c83225-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/adding-angular-components-to-your-static-site)September 12, 2019[![](/logos/tags/stripe-symbol-light.svg)![](/logos/tags/stripe-symbol-dark.svg)Stripe](/topic/stripe)[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)

### [Adding Angular Components to your static site](/post/adding-angular-components-to-your-static-site)

Utilizing Web Components within Hugo Static Site Generator (or any static site), to take Stripe/PayPal payments and more!

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Adding Web Component for Ionic Modals](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ccbc8203df1de782371c3ee852dbc5f647c83225-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/adding-web-component-for-ionic-modals)September 11, 2019[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [Adding Web Component for Ionic Modals](/post/adding-web-component-for-ionic-modals)

Utilizing Web Components within Hugo Static Site Generator (or any static site). Adding a Custom Element for an Ionic Modal pop-up.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)

No matching blog posts found for this filter.

Try clearing the filter above to browse the full feed.

Loading more blog posts...✓ All blog posts loaded

## HTML Podcast Episodes.

Showing 1 of 1 episodesFiltered: HTML[Open Full Topic Hub &rarr;](/topic/html)[![Qwik the HTML First Framework](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/709cd31089b10f57e06abeff02b7266a61b19b0d-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/1-49-qwik-the-html-first-framework)December 8, 2021[![](/logos/tags/builder-io-symbol-light.svg)![](/logos/tags/builder-io-symbol-dark.svg)Builder.io](/topic/builder-io)[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)

### [Qwik the HTML First Framework](/podcast/1-49-qwik-the-html-first-framework)

We sit down with Miško Hevery, Inventor of Angular, to talk about a new framework he is building called Qwik. We talk about Miško's past experience and then we deep dive into Qwik.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Miško Hevery](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/177e6807655a437951913865c33544bd22c3532d-460x460.jpg?w=96&h=96&q=82&fit=max&auto=format)Miško Hevery](/guest/misko-hevery)

No matching episodes found for this filter.

Try clearing the filter above to browse the full feed.

Loading more episodes...✓ All episodes loaded