Headings and paragraphs
Most text on a web page is headings, paragraphs and lists. Each is a block element: it starts on a new line and takes the full width. This file uses all three to make a small recipe page.
Line 1 is an h1 element: a heading, level 1. It is the title of the whole page, so a page should have just one. The browser draws it bold and big, twice the normal text size.
Line 2 is a p element: a paragraph. It is a block too, so it starts on a new line, with a little space above and below. Long text wraps to fit the window.
Look after "Slow," in the file: three spaces. The page shows one. The browser turns any run of spaces, tabs and line breaks into a single space. So pressing Enter in the file does not start a new paragraph: a new p does.
Lists and sections
Lines 3 to 6 are a ul element, an unordered list: items whose order does not matter. Each item is an li (list item) element inside it. The browser indents the list and puts a bullet before each item.
Line 7 is an h2: a level-2 heading that starts a section under the h1. There are six levels, h1 to h6. Each level is a part of the one above it, like the chapters and sections of a book.
Lines 8 to 11 are an ol element, an ordered list: steps where order matters. Its items are li elements too. The browser numbers them itself, 1 and 2, so adding a step renumbers the list for you.
Meaning, not looks
The headings alone give the page its outline: Cold brew, then its section Steps. Screen readers let people jump from heading to heading. So choose a level by its place in the outline, never for its size, and do not skip levels.
Try it: change ol to ul on lines 8 and 11. The numbers turn into bullets. The li items do not change at all; only the list's own tag decides between numbers and bullets.
What happens
;; step 1/9 · blocks
file recipe.html (11 lines: the page's body)
blocks h1, h2 headings
p a paragraph
ul, ol lists, holding li items
block starts on a new line, full width
The card shows only what goes inside <body>. A full page wraps it in <!DOCTYPE html>, <html>, <head> (with a <title>) and <body>. The browser reads the whole file and draws the page almost at once. The figure draws one element per step so you can follow it.