Course Overview

Grokking HTML teaches you to write the markup that every web page is built from. You start with a single empty file and finish with pages that contain text, images, links, lists, tables, forms and the information that search engines and browsers read from a page's head. You do not need any programming experience, and you do not need to install anything except a text editor and a web browser.

Who This Course Is For

The course is written for complete beginners. If you have never opened a code editor, the Basics of HTML chapter shows you what a browser does with an HTML file and how a page is put together. Every new idea is explained in plain words before it gets its technical name.

It also suits new web developers who already copy HTML from examples but want to know why the markup is written the way it is. Each lesson explains what the browser does with the code, and it points out the mistakes that make a page harder to use with a screen reader or harder for a search engine to read.

What You Will Learn

The course has twelve chapters. Every chapter after this introduction ends with an assessment: a set of questions about short pieces of markup and what the browser does with them. Each attempt draws a different selection from a larger set, and every option comes with an explanation, so you can retake an assessment and learn from each answer.

• Introduction: what the course covers and how it is organized.
• Basics of HTML: what HTML is, how a browser turns a file into a page, how to create, save and open your first HTML file, the parts that every HTML document has, and how to write comments.
• Understanding HTML Elements: tags, attributes and elements, how elements nest inside each other, the page layout elements such as <header>, <nav>, <main> and <footer>, and two reference tables of common tags and attributes.
• Working With Text in HTML: headings, paragraphs, fonts and special characters such as < and ©.
• Text Formatting in HTML: marking text as important, emphasized or quoted.
• Managing Media in HTML: adding images with the right size information, and adding audio and video.
• HTML Hyperlinks: creating links with the <a> element, turning an image into a link, and creating email and phone links.
• Working With HTML Lists: ordered, unordered and nested lists, and description lists for terms and their descriptions.
• HTML Tables: rows, cells, headers, captions, cells that span several columns or rows with colspan and rowspan, nested tables and tables that fit small screens.
• HTML Forms and User Input: controls for text, numbers and dates, controls for choices, files and buttons, labels, grouping, the checks a browser makes before it sends a form, and where the form data goes.
• HTML Meta Tags and SEO: the <meta> tags that describe a page to browsers and search engines, favicons, and page redirection.
• HTML Miscellaneous: backgrounds, inline SVG graphics, the <code> element, embedding another page with <iframe>, collapsible content with <details> and <summary>, and drawing with <canvas>.

How the Course Works

The lessons follow a fixed order, and each one uses only what earlier lessons have taught. When an example needs something the course has not taught yet, such as one line of CSS, the lesson says in one sentence what that line does.

Every lesson is built around complete examples. You can copy any example into a file that ends in .html, open the file in your browser, and then change the markup to see what happens. The lessons also describe what the browser shows, so you can compare your result with the expected one.

The course follows the current HTML standard and current browser behavior. Where older tutorials teach elements or attributes that are now obsolete, the lessons say so and show what replaced them.

What Comes After This Course

HTML describes what each part of a page is: a heading, a paragraph, a link or a form field. It does not decide colors and layout, which is the job of CSS, and it does not respond to the reader's actions, which is the job of JavaScript. After this course you will be ready to learn those two languages, because both of them work on the HTML you will have learned to write.