HTML

What's inside

Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.

1. 01

   Chapter 1

   HTML Basics

   • 1HTML IntroductionHTML is the standard language for building web pages. Learn what it is, how a browser turns it into a page, and write your very first HTML document.
   • 2HTML Document StructureEvery HTML page is built on the same skeleton. Learn the role of the doctype, <html>, <head> and <body>, and why lang, charset and the viewport matter.
   • 3HTML ElementsAn HTML element is a start tag, some content and an end tag. Learn how to write elements, nest them correctly and recognize empty elements.
   • 4HTML AttributesAttributes give elements extra information, such as the address of a link or the description of an image. Learn how to write them and meet the most common ones.
   • 5HTML HeadingsHeadings from <h1> to <h6> give your page a clear outline. Learn how to use them and why a correct heading hierarchy matters for SEO and accessibility.
   • 6HTML ParagraphsWrite paragraphs with <p>, break lines with <br>, separate topics with <hr> and keep text exactly as typed with <pre>.
   • 7HTML Text FormattingHTML has special elements for text with meaning: important, emphasized, highlighted, deleted and inserted text, plus subscript and superscript. Learn when to use each one.
   • 8HTML CommentsComments let you leave notes in your code that the browser does not display. Learn the syntax and how to use comments to hide code while debugging.
2. 02

   Chapter 2

   Content

   • 9HTML LinksLinks connect the web. Learn the <a> element, the href and target attributes, absolute and relative URLs, email links and links to sections of a page.
   • 10HTML ImagesAdd images with <img>, describe them with alt, set their size, and give them captions with <figure> and <figcaption>.
   • 11HTML ListsGroup related items with unordered lists (<ul>), ordered lists (<ol>) and description lists (<dl>). Learn how to nest lists and control the numbering.
   • 12HTML TablesTables arrange data in rows and columns. Learn <table>, <tr>, <th> and <td>, group rows with <thead> and <tbody>, merge cells with colspan and rowspan, and add a <caption>.
   • 13HTML ColorsColors can be written as names, HEX, RGB or HSL values. Learn each format and apply colors to text, backgrounds and borders with the style attribute.
3. 03

   Chapter 3

   Forms

   • 14HTML FormsForms collect input from users. Learn the <form>, <label>, <input> and <button> elements, and what the action and method attributes do.
   • 15HTML Input TypesThe type attribute turns <input> into many different controls: text, email, password, number, date, checkbox, radio, range, color, file and submit. Meet them all in a live demo.
   • 16HTML Form AttributesControl how fields behave with attributes like required, placeholder, value, min, max, pattern, disabled and readonly, and get built-in validation for free.
4. 04

   Chapter 4

   Layout & Semantics

   • 17Block and Inline ElementsEvery element is either block-level or inline by default. Learn the difference, and meet the two generic containers: <div> and <span>.
   • 18Classes and IDsThe class attribute groups elements that share a style, while the id attribute gives one element a unique name. Learn how they work and when to use each.
   • 19Semantic ElementsSemantic elements such as <header>, <nav>, <main>, <section>, <article>, <aside> and <footer> describe what each part of a page is. Learn how to build a meaningful page layout.
   • 20The Head and Meta TagsThe <head> holds information about your page: its title, meta description, viewport, links to CSS files and favicon. Learn what each one does.
   • 21HTML MediaEmbed video and audio with <video> and <audio>, show a page inside your page with <iframe>, and serve the best image for each screen with <picture>.
   • 22HTML AccessibilityAccessible pages work for everyone, including people who use screen readers or only a keyboard. Learn the essentials: alt text, labels, landmarks, real buttons and aria-label.
   • 23RTL and LanguagesBuild Arabic pages the right way: set lang="ar" and dir="rtl", mix Arabic and English safely, and isolate text of unknown direction with <bdi>.