What a page is made of

HTML describes structure, not appearance. The browser reads the tags and builds a tree: what's a heading, what's a paragraph, what's a link. CSS adds the style later, JavaScript the behavior. A page starts with a document, not with a chunk of markup in the middle of a file.

<!DOCTYPE html> tells the browser: this is modern HTML, not the old compatibility mode. Without it the page still opens, but some rules are calculated differently. html is the root. Inside it there are exactly two children: head (for the browser and search engines) and body (what a person sees).

An attribute goes in the opening tag: a name and a value in quotes. href says where a link goes, alt says what's in the image if it can't be seen. The order of attributes doesn't matter. An unquoted value works only as long as it has no space in it — don't rely on that.

• head — the tab title, the encoding, the description. None of it is on screen.
• body — the visible content. Everything a person should see goes here.
• Nesting reads like Russian dolls: a list inside nav, an item inside the list.
• The browser collapses spaces and line breaks between tags. Format nicely for yourself, not for the output.

The browser closes an unclosed p before the next one. An unclosed li too. The page "works", but the tree is different, and styles and scripts end up in the wrong place. Write closing tags yourself, except for void ones. More about the document in MDN · Basic HTML syntax.