Module 1: Basics

HyperText Markup Language, or HTML, is the backbone of the web, providing the content, as well as the structure of that content, that you see displayed in your web browser.

Unless you’re reading a PDF or a printed version of this page, this content is made up of various HTML elements and text. HTML is the content layer of the web. HTML elements are the nodes that make up the Document Object Model.

Cascading Style Sheets provide the look and feel, or presentation layer of the page. JavaScript is the behavior layer, often used to manipulate the objects within a document. Sites that are built with JavaScript frameworks are really just manipulating HTML. In turn, it’s important to mark up your HTML in a way that scripts can easily parse and that assistive technologies can understand.

1. HTML#

This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML. If you’re completely new to HTML, you’ll learn how to build structurally sound content. If you’ve been building websites for years, this course may fill in gaps in knowledge that you didn’t even know you had.

This is not a complete reference . Each section introduces the section topic with brief explanations and examples, providing you an opportunity to explore further. There are links to topic references, such as MDN and WHATWG specifications, and other web.dev articles. While this is not an accessibility course, each section includes accessibility best practices and specific issues, with links to deeper dives on the topic. Each section has a short assessment to help people confirm their understanding.

Here’s what you’ll learn:

1. Overview: A brief introduction to the key concepts in HTML.
2. Structure: Learn how to structure your HTML documents.
3. Metadata: Use meta tags to provide information about your documents.
4. Semantics: Using the correct HTML elements to describe your content.
5. Sections: How to correctly use sectioning elements.
6. Attributes: Learn about the different HTML attributes.
7. Text: How to format text using HTML.
8. Links: Everything you need to know about links.
9. Lists: Lists and other ways of grouping your content.
10. Navigation: Navigation is a key element of any site of application.
11. Tables: Understanding how to use tables to mark up tabular data.
12. Forms: An overview of forms in HTML.
13. Images: An overview of images in HTML.
14. Audio/Video: Discover how to work with audio and video.
15. Components: An explanation of template, slot, and shadow.
16. DOM: Learn how HTML can be manipulated using JavaScript.
17. Focus: How to manage focus order in your HTML documents.
18. Inline Text: An intro to the elements used with text.
19. Details: Discover how the details and summary elements work.
20. Dialog: Useful for representing any kind of dialog in HTML.
21. Conclusion: Wrapping up with some further resources.

So, are you ready to learn HTML? Let’s get started.

2. CSS#

CSS (Cascading Style Sheets) introduces you to your first set of logical rules.

3. JavaScript#

JavaScript is the engine that makes a page interactive.

4. TypeScript#

TypeScript is a professional-grade layer that sits on top of JavaScript to keep your code safe.

Learn HTML © 2022 by Estelle Weyl, CC BY 4.0.