HTML tutorial
Give your web pages structure and meaning
About this tutorial
HTML is the language every web page is written in. In this beginner class you go from an empty file to a complete, accessible web page: text, links, images, lists, tables, page layout, forms and media.
Every lesson has examples you can open in the CodeLab Playground, an exercise, and a short quiz. Finish with the final quiz to check you are ready for CSS.
Lessons
Getting started
- Your first web pageWhat HTML is, how a page is put together, and how to see your own page in a browser.
- Headings, paragraphs and textOrganise text with six levels of headings, paragraphs, line breaks and emphasis.
- Attributes and commentsGive elements extra information with attributes, and leave notes in your code with comments.
Links, images and lists
Structuring content
- TablesShow data in rows and columns with captions and header cells.
- Page layout with semantic elementsUse header, nav, main, section, article, aside and footer to describe the parts of a page.
- Divs, spans, classes and idsGroup content with div and span, and name elements with class and id so CSS and JavaScript can find them.
Forms and media
- FormsCollect information with form, label, input, textarea, select and button.
- Form validation and accessibilityLet the browser check answers with required, min, max and pattern, and make forms easy for everyone.
- Audio, video and embedded contentAdd sound, video and embedded pages such as maps and YouTube videos.
Putting it together
- The head: meta tags, SEO and accessibilityHelp search engines, phones and screen readers with the right head tags and good habits.
- Project: build your profile pagePut everything together in a complete, accessible personal profile page.
- HTML final quizTwelve questions covering the whole HTML beginner class. Score yourself before moving on to CSS.