HTML RoadmapLearn how to work with HTML using our guided roadmap
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 2
Formatting in HTMLLearn how to format text in HTMLLearn about HTML elements that are used for formatting documents. Find out how they affect SEO.
🔓 Unlock this lesson 3
HTML LinksLearn 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.
How to Create Prefilled Email LinksWith 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 5
Working with AttributesLearn 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.
What is the Difference Between Classes vs IDs in HTMLUnderstanding the difference between selectorsExplore the differences between classes and IDs in HMTL and see how we can use them effectively.
What is the Difference Between Block vs Inline ElementsUnderstanding display values in HTMLLearn what is the difference between block and inline-level elements in HTML, and how they alter the display of elements.
What 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 9
Images and SVGs in HTMLLearn 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 10
Audio and Video in HTMLLearn 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 11
HTML TablesLearn 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.
How to Expand and Collapse Tables in HTMLUsing hidden checkboxesLearn how you can create expandable and collapsible tables in HTML with the help of checkboxes and some CSS.
🔓 Unlock this lesson 13
Ordered and Unordered ListsCreating 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 14
Description ListsLearn when you should use description lists in HTMLLearn about the use of description lists, and how they positively impact accessibility and SEO.
How to Create Native Popovers in HTMLUsing the popover APILearn how the experimental popover feature will allow you to build popovers in HTML natively.
How to Create Native Interactive Modals in HTMLUsing dialog elementsLearn how you can create native interactive modals in HTML with the help of dialog elements.
🔓 Unlock this lesson 17
Introduction to HTML FormsLearn 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 18
Form Elements and Input TypesLearn 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.
🔓 Unlock this lesson 21
Semantic HTMLLearn 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 22
The HTML HeadLearn 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.
How to Use Schema Markup in HTMLTo improve SEOLearn how you can use schema markup in HTML to help your pages appear as rich snippets in Google search results.
10 HTML5 Best PracticesTo 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 roadmapsContinue learning
CSS Animations RoadmapLearn 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.
- Unlimited access to hundreds of tutorials
- Access to exclusive interactive lessons
- Remove ads to learn without distractions