The outline
Every complete HTML page has the same shape: a doctype line, then an html element that holds two parts, head and body. Here is a full page in ten lines. The indents show which part sits inside which.
Line 1, <!DOCTYPE html>, is not an element. It tells the browser: this is a modern HTML page, so use today's rules (called standards mode). It goes at the very top and is not shown on the page.
Line 2 opens the html element. It is the root: every other element goes inside it, and its closing tag, </html>, is the last line. The attribute lang="en" says the page is in English, which helps screen readers.
Head: about the page
Inside html come two parts. The first is head. It holds information about the page, called metadata: the title, the character set, links to style files. Nothing in the head is drawn on the page. Line 6 closes it.
Line 4, <meta charset="utf-8">, tells the browser how to turn the file's bytes into letters. UTF-8 can store every alphabet and emoji. meta is a void element: it has no content and no closing tag.
Line 5 is the title, also inside the head. A valid page has exactly one. It is not drawn on the page: the browser shows it on the tab and uses it for bookmarks and search results.
Body: the page itself
The second part is body. It holds everything you see on the page: headings, paragraphs, links, pictures. There is one body, and it comes right after the head. Line 9 closes it.
Line 8 puts a heading inside the body. Because it is in the body, the browser draws it on the page: Hello!, big and bold. Everything you add to a page from now on goes here.
A tree of boxes
Elements inside elements form a tree. html is the parent of head and body. They are its children, and siblings of each other. meta and title are children of head. Each element closes before its parent.
Some pages leave out the html, head and body tags. They still work: the browser adds those elements itself. Writing them out is clearer. To see any page's tree, right-click it and choose Inspect.
What happens
;; step 1/10 · same-shape file index.html (plain text, 10 lines) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>My page</title> 6 </head> 7 <body> 8 <h1>Hello!</h1> 9 </body> 10 </html> shape doctype, then html = head + body
Indenting is only for people. The browser ignores the spaces at the start of a line, so the page looks the same without them; the indents just make the nesting easy to see. The browser reads the whole file and builds the tree almost at once. The figure builds one part per step so you can follow it.