
HTML Roadmap
Learn how to work with HTML using our guided roadmapπ 24 lessons β’ π 2.60 hours read in total
HTML (HyperText Markup Language) is the core building block of all websites on the internet. It's the standard markup language for creating web pages; the text you're reading at this moment is also created with HTML.
In this roadmap, you'll learn how to write semantic, SEO-friendly HTML documents. If you are new to HTML, be sure to check out our HTML tutorials too. If you want to explore more tutorials without a direction, you can filter for the tutorials you are interested in on our search page.
What is covered?
Learn the fundamentals
Block vs inline elements
Working with media
Creating lists and tables
Using forms and inputs
Semantics and SEO
π Unlock this lesson 1Learn about the building blocks of HTMLIn this lesson, you'll learn how to create your very first HTML document, and what are the fundamental building blocks that are always needed.π Unlock this lesson 2Formatting in HTML
Learn how to format text in HTMLLearn about HTML elements that are used for formatting documents. Find out how they affect SEO.π Unlock this lesson 3HTML Links
Learn how to link documents together in HTMLLinks are a core part of HTML. Learn how you can use links in different ways to not only create links, but to also add functionality to your pages. 4How to Create Prefilled Email Links
With the help of mailto attributesLearn how you can create and send prefilled emails with the help of the mailto attribute in HTML.π Unlock this lesson 5Working with Attributes
Learn how to use different attributes in HTMLLearn about global, accessibility, and data attributes in HTML, and how they can help you customize your HTML documents. 6What is the Difference Between Classes vs IDs in HTML
Understanding the difference between selectorsExplore the differences between classes and IDs in HMTL and see how we can use them effectively. 7What is the Difference Between Block vs Inline Elements
Understanding display values in HTMLLearn what is the difference between block and inline-level elements in HTML, and how they alter the display of elements. 8What is the DOM?
Understanding the Document Object Model in and outThere are more than 1.5 billion active websites on the internet all made up of the same model; the Document Object Model or DOM for short. What is it?π Unlock this lesson 9Images and SVGs in HTML
Learn how to work with images and SVGs in HTMLLearn how to use images in HTML while taking responsive design and SEO into consideration, and how to create resolution-independent images through vector graphics.π Unlock this lesson 10Audio and Video in HTML
Learn how to work with audio and video files in HTMLThis lesson will guide you through various aspects of using the audio and video elements, from supported media types to attributes and best practices.π Unlock this lesson 11HTML Tables
Learn how to work with tables in HTMLTables are a fundamental element in HTML that allows you to organize and display data in rows and columns. Learn how to work with them in this lesson. 12How to Expand and Collapse Tables in HTML
Using hidden checkboxesLearn how you can create expandable and collapsible tables in HTML with the help of checkboxes and some CSS.π Unlock this lesson 13Ordered and Unordered Lists
Creating lists in HTMLLearn about the differences between ordered and unordered lists in HTML, and how to enhance their visuals with different list-style types.π Unlock this lesson 14Description Lists
Learn when you should use description lists in HTMLLearn about the use of description lists, and how they positively impact accessibility and SEO. 15How to Create Native Popovers in HTML
Using the popover APILearn how the experimental popover feature will allow you to build popovers in HTML natively. 16How to Create Native Interactive Modals in HTML
Using dialog elementsLearn how you can create native interactive modals in HTML with the help of dialog elements.π Unlock this lesson 17Introduction to HTML Forms
Learn how to work with forms in HTMLIn this lesson, we'll take an introductory look at how forms work and how you can create a simple form that collects email addresses.π Unlock this lesson 18Form Elements and Input Types
Learn how to use various form elements and input typesIn this lesson, you'll learn how to work with a wide range of input types, including text-based, number-related, selection, date-related, and more. 19How to Allow Only One Checkbox to Be Checked in HTML
Using two different solutionsLearn how you can allow only one checkbox to be selected at a time in HTML using JavaScript event listeners. 20How to Quickly Add Line Numbers to HTML Textarea
With the help of 10 lines of JavaScriptLearn how you can easily add line numbers to any HTML textarea using 10 lines of JavaScript code, a couple of DOM elements and some CSS.π Unlock this lesson 21Semantic HTML
Learn what semantic HTML means, and why we need itIn this lesson, we'll discuss how you can use semantic HTML elements to improve the SEO and accessibility of your site.π Unlock this lesson 22The HTML Head
Learn what is the use of the head element in HTMLLearn how you can improve the technical SEO of your site by including crucial information in your HTML head element. 23How to Use Schema Markup in HTML
To improve SEOLearn how you can use schema markup in HTML to help your pages appear as rich snippets in Google search results. 2410 HTML5 Best Practices
To improve your siteβs performance and SEOFollowing these 10 best practices for html will help you step up your html game and get your site ranked higher, leading to more traffic and happy users.
πΊοΈ Related roadmaps
Continue learningCSS Animations Roadmap
Learn how to build CSS animations with our guided roadmapThis roadmap guides you through various commonly used CSS animations. Learn how you can create stunning animated visuals.JavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap takes you through the essential concepts in JavaScript, from basic syntax to advanced concepts like functional and asynchronous programming.
π More Webtips
Master the Art of Frontend
Unlimited access to hundreds of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions