HTML describes what is on a web page: headings, paragraphs, lists, links, images and forms. Everything you build from here on attaches to it — Rails renders HTML, your CSS selects it, your JavaScript walks it.
Important
Work on this lesson in
teachermode.
Note
Many trainees arrive already knowing HTML. If that is you, read the learning goals, confirm you could do the exercises, and move on to the next card. This card exists so that nobody has to pick HTML up by guessing.
Learning goals
- You can write a complete HTML document — doctype,
<head>,<body>— and say what belongs in the head rather than on the page. - You can mark up text with the element that matches its meaning: headings, paragraphs, lists, links, images.
- You can structure a page with the document elements (
<header>,<nav>,<main>,<section>,<footer>) and explain why they beat a page built entirely from<div>s. - You can nest elements correctly, and read a document as the tree it describes.
- You can use
id,classanddata-attributes, and explain what each is for. - You can build a form with labelled inputs of several types and a submit button, and explain what an input's
nameattribute does when the form is sent. - You can inspect the rendered document in your browser's developer tools, and check a document for errors with a validator.
Resources
Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.
Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.
Pick one introduction
- 📄 MDN: Structuring content with HTML Show archive.org snapshot — lessons with live editors. Do Basic HTML syntax Show archive.org snapshot , Headings and paragraphs Show archive.org snapshot , Lists Show archive.org snapshot , Structuring documents Show archive.org snapshot and HTML forms Show archive.org snapshot ; skip the media, tables and SEO lessons for now
- 📄 Learn HTML (web.dev) Show archive.org snapshot — the longer text alternative to the MDN lessons
Reference and tools
- 📄 MDN: HTML element reference Show archive.org snapshot — every element, with what it means and what may go inside it
- 🎮 W3C Markup Validation Service Show archive.org snapshot — paste a document and have it list what is wrong with it
Exercises
Create a separate directory for each exercise, inside the exercises repository. These are plain .html files — no server, no Rails yet. Open them in your browser with file://.
Mark up a document
Take about a page of prose you didn't write — a Wikipedia section or a README — and mark it up as a complete HTML document. No CSS; this exercise is only about structure.
It should contain at least: a title in the head, headings at two levels, paragraphs, a list, a link, and an image with a meaningful alt text. Wrap the page in the document elements (<header>, <main>, <footer>) rather than in <div>s.
- Open it in your browser, then open the developer tools (
Ctrl+Shift+I) and compare the Elements tree with the file you wrote. - Run it through the validator (see Resources) and fix what it complains about.
Hint
Two things beginners get wrong: headings are for structure, not for size (
<h2>because it's a sub-section, not because you wanted smaller text), and an element must be closed inside the element it was opened in.
A form, and what it sends
Build a form for a movie: a text field for the title, a number field for the release year, a <select> for a genre, a checkbox, and a submit button. Give every input a <label> that is actually associated with it.
Then find out what a form sends:
- Give the form
method="get"and leave theactionempty, so it submits back to the same file. - Fill it out and submit it. Your values appear in the address bar as
?title=Sunshine&release_year=2007&.... - Change one input's
nameattribute and submit again. Watch the URL change. - Remove a
nameattribute entirely and submit again. That input's value is gone.
Those key/value pairs are exactly what a Rails application receives as params. Ruby on Rails basics picks this thread up and follows it all the way into a database record.
Hint
A
<label>is associated with an input either by wrapping it, or withfor="<the input's id>". Click the label text — if the input focuses, you got it right. Screen readers depend on the same association, which is why we always write it.
