Anatomy of an HTML document — Create Websites With Me

Every website you have ever visited started life as a plain text file with a particular shape. Before we style anything or add a single image, it is worth knowing that shape by heart, because every page you build for the rest of this course sits inside it. This first lesson is short, and by the end you will have written a complete, valid web page from nothing.

The smallest page that counts

A browser asks for surprisingly little before it will treat your file as a real web page. Here is close to the least you can write and still have something correct:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world</h1>
  </body>
</html>

Save that as index.html, open it in a browser, and you have a working page. Let us walk through it one line at a time, because each line is doing a specific job.

The doctype

The first line, <!DOCTYPE html>, tells the browser to read the rest of the file using modern standards. It looks like a leftover from an older era of the web, and in some ways it is, but leaving it out quietly drops the browser into a compatibility mode that can make your layout behave in strange ways. You write it once at the very top of every page and then never think about it again.

The html element and its language

Everything else on the page lives inside a single <html> element, which is why it is sometimes called the root. The lang attribute on it names the language the page is written in, en for English here. Nothing visibly breaks if you forget it, which is exactly why it gets skipped so often, but it does real work behind the scenes.

The head, which your reader never sees

The <head> holds information about the page rather than the content of the page itself. None of it shows up in the main window, yet it shapes how the page is understood by browsers, search engines, and social platforms. Three pieces belong in even the simplest document.

Character encoding

The line <meta charset="utf-8"> tells the browser how to turn the bytes in your file back into letters. Using utf-8 covers essentially every character and symbol you are likely to type, from accented names to emoji, so text shows up the way you wrote it. Set it near the top of the head and it applies to the whole page.

The viewport

Add this one line and your page behaves properly on phones:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Without it, a phone pretends to be a wide desktop screen and shrinks your whole page down to fit, leaving the reader pinching and zooming. The line tells the browser to use the device’s real width and start at normal zoom, which is what makes responsive layouts possible later on.

The page title

The <title> is the text that shows in the browser tab, in a bookmark, and as the clickable headline in search results. It is small but it carries weight, so write something clear and specific to the page rather than leaving it as Untitled. We give titles and search basics a full lesson of their own a little later.

The body, which everyone sees

Everything a visitor actually reads, clicks, and looks at goes inside <body>. For now it holds a single heading, but across the next few lessons it fills up with real structure and content, and that is where most of your work as a builder happens.

Putting it together

Here is the same page with the viewport line added and a little real content in the body. This is a genuine starting point for the personal site you will build across the course:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Jordan Reese, web developer</title>
  </head>
  <body>
    <h1>Jordan Reese</h1>
    <p>I build websites in Asheville, NC.</p>
  </body>
</html>

That is a complete, valid, accessible web page, written entirely by hand. Swap in your own name and a line about yourself and it is already yours. In the next lesson we give the body real structure, so that the browser and assistive technology understand which part is the header, which is the main content, and which is the footer.