Let's read the full HTML document from the outside in, so the nesting becomes easy to see.
- <!DOCTYPE html> comes first. It tells the browser to use modern HTML rules. - <html lang="en"> wraps the entire document. Nothing should sit outside this main element except the doctype declaration. - <head> contains information about the document rather than the page's main visible content. - <meta charset="UTF-8"> sets the character encoding. - <title> gives the document its browser-tab title. - </head> closes the head before the visible page begins. - <body> contains the content a visitor reads or interacts with. - Headings, paragraphs, links, images, lists, forms, and other page content normally live inside <body>. - </body> closes the visible part of the document. - </html> closes the outer HTML element.
Now look at the nesting: <body> is inside <html>, and <h1> or <p> can be inside <body>. This is why HTML is often described as a tree of nested elements.