The page as a whole
An HTML document has two main jobs: it gives the browser information about the page, and it provides content for the browser to display. Its basic structure makes those jobs easier to separate. A complete page begins with a doctype declaration. After that comes an html element containing a head element followed by a body element.
You can explore this structure with any plain-text editor and a modern web browser. No package manager, server, or framework is needed for the exercise below. Save your file with an .html extension, then open it in your browser. If you edit the file, save it and refresh the browser to see your changes. HTML does not require you to choose a particular numbered version for this basic exercise.
The doctype and outer html element
The doctype is the first line of a typical HTML page. It is a declaration rather than an element that wraps content. It tells the browser to interpret the document using its standard HTML rendering mode. Without it, a browser may use a compatibility mode that handles some layout rules differently. For a new page, include the short HTML doctype declaration before everything else.
Next is the html element. Think of it as the outer container for the document: both the head and the body belong inside it. The opening html tag commonly includes a lang attribute, such as en for English. That attribute identifies the document’s primary language, which can help assistive technology and other tools interpret its text. If a page is mainly in another language, use the appropriate language value instead.
The head describes the page
The head is for information about the document, not the main content a reader sees on the page. A useful starting head contains a character-encoding declaration, a viewport setting, and a title. UTF-8 is a common encoding choice that supports a wide range of characters. The viewport setting helps a page use the available screen width on mobile devices. The title supplies text that browsers commonly show on a tab or in a bookmark.
A beginner might reasonably expect the title to appear as a visible heading, but it does not serve that purpose. To put a heading in the page itself, add one to the body. The head can also refer to a stylesheet or contain other metadata as a project grows. Keep the distinction in mind: the head describes or supports the document, while the body holds the content people interact with.
The body contains the page content
The body is where the visible structure of a page begins. Headings, paragraphs, links, images, lists, and forms normally belong here. For a small first page, a main heading and one paragraph are enough. You might use “Welcome to my page” as the heading and “I am learning how HTML documents are organized” as the paragraph. A browser displays these as content, unlike the title in the head.
Elements in the body can be nested to show relationships. For example, a paragraph can contain a link, and a main content area can contain several sections. Use elements for what they mean rather than only for their default appearance: a heading identifies a heading, while a paragraph identifies a paragraph. This makes the document easier to understand and maintain, even before you add CSS.
Build and inspect a tiny page
Create a new plain-text file named first-page.html. Start with the HTML doctype declaration, then add the opening and closing html tags with the head and body between them, in that order. Set the html element’s language to English. In the head, set the character encoding to UTF-8, add a viewport setting for the device width, and give the page a short title. In the body, add one heading and one paragraph using the example text above.
Open the saved file in your browser. Check that the heading and paragraph appear in the page, while the title appears on the browser tab. Then change only the title, save, and refresh. The tab text should change without adding a new heading to the page. Change the body heading next and refresh again. This small comparison makes the head–body distinction concrete.
If nothing changes, first check that you saved the file and refreshed the same file in the browser. If text appears in an unexpected place, check that the head and body each have matching opening and closing tags and that the body follows the head. The doctype, head, and body do different jobs, but together they give every new HTML page a clear starting point.
