Stay organized with collections Save and categorize content based on your preferences. HTML
HTML is the document layer of the web, providing the structure and content necessary for web pages to be meaningful. Here, you can find content for HTML such as courses, articles, collections, and other useful bits of information to help you build your knowledge of this crucial part of the web.
New to HTML? We've got you covered with a comprehensive course to help you get started.
Check out these other courses to dig deeper into specific topics in HTML.
Learn about the latest HTML features that are newly available in all major browser engines.
Learn HTML patterns and concepts to help you build more accessible web applications.
Learn HTML-based concepts and patterns for making your your web applications faster.
Learn how to use Chrome DevTools to debug HTML and the DOM in your web applications.
COURSE
If you're new to HTML, we've got you covered. OurLearn HTML course guides you through the fundamentals of how HTML works, such as structural concerns, metadata, semantics, and further topics to help you sharpen your skills.
Check out more courses.
If you're interested in learning more about HTML, these other courses will teach you about more advanced topics use can use to improve your web applications.
HTML forms give users the ability to provide input for your web applications—and this course will teach you all you need to know about using them effectively.
While images are commonly used on the web, there's more to it than using theimg element. This course teaches you all you need to know about how to use images on the web.
While accessibility spans all parts of the web platform, writing accessible HTML is the cornerstone of building accessible web applications. This course teaches you everything you need to know to write accessible markup.
Baseline Newly available HTML features
Baseline signals to web developers when web platform features can be safely used in all major browser engines. Here are some HTML features that are now Baseline Newly available.
Exclusive accordions became Baseline Newly available in September 2024.
Declarative Shadow DOM became Baseline Newly available in February 2024.
The Popover API became Baseline Newly available in April 2024.
The inert attribute became Baseline Newly available in April 2023.
Lazy-loading of iframes became Baseline Newly available in December 2023.
HTML and accessibility
HTML is a fundamental part of building accessible web applications. In this section, you'll find articles and resources to help you learn more about how to use HTML to build accessible web applications.
By using the correct elements for headings and landmarks, you can dramatically improve the navigation experience for users of assitive technology.
By using the correct semantic HTML elements you may be able to meet most or all of your keyboard access needs. That means less time fiddling with tabindex, and more happy users!
Many users with temporary and permanent motor impairments rely on keyboard shortcuts to navigate applications more efficiently. Having a good keyboard navigation strategy for your application creates a better experience for everyone.
In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible name, one of the key properties for expressing element semantics in the accessibility tree.
HTML and performance
How you use HTML can affect the performance of your web applications. In this section, you'll find articles and resources to help you learn more about how to use HTML to make your web applications faster.
The browser preload scanner is a specialized HTML parser that the browser uses to discover resources earlier than it otherwise would. Find out how it helps the performance of web applications, and how you can stay out of its way.
The Fetch Priority API uses the
fetchpriority HTML attribute to indicate the relative priority of resources to the browser. It can enable optimal loading and improve
Core Web Vitals.
Resource preloading a technique that uses the HTMLlink element to tell the browser to fetch a resource before it is needed. Learn how to use it to improve the performance of your web applications in this guide.
Lazy loading images is an effective technique for conserving bandwidth during the initial loading of a page. In this guide, can learn how to use the HTMLloading to lazy load images.
Debug HTML and the DOM with Chrome DevTools
Chrome DevTools is a suite of tools for developers to debug web applications. Here are a few suggested tools for you to check out to help you debug your page's HTML and DOM in your web applications, as well as other adjacent concepts.
DevTools offers the Elements panel, which lets you view, edit, and debug your web application's DOM. Read this guide to get started with using the Elements panel.
The Elements panel in DevTools lets you listen for changes to the DOM triggered by JavaScript. Learn how to use this useful feature to debug changes to your web application's DOM.
The Coverage panel is a useful tool for finding unused CSS and JavaScript code loaded by your web application's HTML. This guide shows you how to use it, and how it can improve the performance of your web applications.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]
