Simple play icon Course

HTML5 Web Component Fundamentals

by Cory House

Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components.

What you'll learn

In this course, you'll learn how HTML5 Web Components give us the power to extend the web with our own rich, standards-based components. Web developers have been struggling for years to create truly reusable components. We struggle with

  • styling
  • bundling
  • defining templates
  • and encapsulating our markup and styles from accidental manipulation
But HTML5 Web Components provide the power to finally define standards-based, reusable web components through four new technologies.

Learn how to use the Shadow DOM to encapsulate the DOM and styling for your components. Define inert templates with the template tag. Extend HTML by registering your custom elements. And bundle this all together in a simple reusable package using HTML5 imports.

Table of contents


Course FAQ

What is HTML5?

HTML5 is a markup computer programming language that is the fifth iteration of the widely used HTML programming language.

What is HTML5 used for?

HTML5 is used to structure and present content on the web. HTML code is used to describe webpages.

What will I learn in this HTML5 course?

In this course, you will learn how use Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components. With these components you will see how HTML5 web components can give us power to extend web pages with our own standards-based components.

What are some of the benefits of HTML5?

Some of the benefits of HTML5 is that the language is designed to deliver most components that are needed to create a fully functioning web page without any additional software. HTML5 can do everything from animation to apps, music to movies, and can build complicated applications that run within your browser.

Are there any prerequisites for this course?

Prerequisites for this course would be an understanding of HTML basics. An understanding of the basics of HTML will make navigating this course much easier than without.

About the author

Cory is the principal consultant at, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.

Ready to upskill? Get started