HTML

The structure of every web page

HTML describes the content and structure of every web page. From your first tags to accessible forms and semantic HTML, this track gives you rock-solid foundations for everything else in web development.

Foundations

Beginner - the basics, step by step

• What is HTML? Tags and attributesDiscover what HTML is and learn to recognize a tag and an attribute.
• Structuring text: headings, paragraphs and listsLearn to organize text with a hierarchy of headings, paragraphs and lists.
• Links and imagesCreate links to other pages and display images with the a and img tags.
• Simple tablesPresent data in rows and columns with the table, tr, th and td tags.
• The complete skeleton of an HTML pageAssemble a complete web page with the doctype and the html, head, meta and body tags.

Progression

Intermediate - build real things

• Forms: input, label, select, textarea, buttonBuild complete, accessible, production-ready forms.
• Semantic HTML: structuring a real pageReplace your anonymous divs with tags that give meaning to your structure.
• Media: audio, video, figure and figcaptionEmbed sound, video and captioned illustrations without any plugin.
• Global attributes and data-*Leverage the attributes that work everywhere and store your own data in the HTML.
• Getting your page ready for the webPolish your page's head: title, description, favicon and secure external links.

Advanced

Proficient - advanced patterns and performance

• Accessibility: alt, heading hierarchy, and ARIAMaster alternative text, a heading hierarchy screen readers can actually navigate, and ARIA usage limited to cases where native HTML falls short.
• Advanced forms and native validationLeverage required, pattern, inputmode, and the Constraint Validation API for robust forms without any external library.
• Responsive images: srcset, sizes, and pictureServe the right image to the right screen with srcset and sizes, reserve picture for art direction, and master lazy loading.
• Technical SEO: Open Graph and structured dataControl how your pages preview on social networks with Open Graph and aim for rich results with schema.org in JSON-LD.
• Loading performance: defer, async, preload, and prefetchOrder your scripts' execution with defer and async, then steer the network with preload, preconnect, and prefetch.

Mastery

Expert - architecture, internals and edge cases

• From HTML to the DOM: parsing and error recoveryUnderstand how the browser turns any HTML stream, even a malformed one, into a deterministic DOM tree.
• Web Components: custom elements, shadow DOM and slotsMaster the custom element lifecycle, shadow DOM encapsulation and content projection through slots.
• Internationalization: lang, dir, charset and Unicode trapsUse lang, dir and the encoding declaration wisely, and defeat the Unicode normalization and directionality traps.
• HTML-side security: XSS, sandbox, noopener and CSPIdentify the XSS vectors specific to markup and deploy HTML's native defenses: sandbox, noopener and Content Security Policy.
• Modern interactive HTML: dialog, details, popover, contenteditableReplace your UI libraries with modern HTML's native primitives: modal dialogs, exclusive accordions, popovers and editable regions.