Your first HTML page
Every HTML document shares the same small frame: a line that declares the document type, a root element that wraps everything, a head for information about the page, and a body for the content people see. This chapter takes that frame apart one line at a time and then saves it to a file you can open in a browser.
The document skeleton
Here is the skeleton every page starts from. You can copy it exactly and change the parts inside the body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>The first line, <!DOCTYPE html>, tells the browser this is a modern HTML page. After that comes the root element, <html>, which wraps everything else on the page. Inside it sit two boxes: <head> for behind-the-scenes information, and <body> for the words and pictures a visitor sees. Your heading and paragraph go in the body, because that is the part on show.
Think of the whole thing as a labelled parcel. The doctype is the stamp that says which postal system to use, <html> is the box, the head is the label on the outside, and the body is what is packed inside.
<!DOCTYPE html>, then <html> wrapping a <head> and a <body>. Copy it as-is and put your own words in the body. You are not meant to memorise it yet; you will type it enough times that it sticks on its own. What goes in the head versus the body
The two boxes inside <html> have different jobs. The <head> holds things the browser needs to know but the visitor does not read on the page. The <body> holds everything the visitor does see.
<head>
<title>My recipe notes</title>
</head>
<body>
<h1>Banana bread</h1>
<p>Mix, pour, bake for an hour.</p>
</body>The <title> sits in the head, and it is the name of the page: it shows up in the browser tab, not in the middle of the page. The heading and the paragraph sit in the body, so they appear on the page itself. A simple rule to start with: if a visitor should read it, it goes in the body.
<title> lives in the head and names the browser tab; your headings and paragraphs live in the body where people read them. If a visitor should see it, it goes in the body. That one question sorts almost everything. Charset and viewport
Two more lines go in the head of nearly every page. You can copy them in as-is:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first page</title>
</head>The first line tells the browser how to read your text so that accented letters, curly quotes, and emoji come out right instead of turning into odd symbols. The second line tells the browser to fit the page to the width of the screen, which is what makes it look sensible on a phone rather than a tiny zoomed-out version of the desktop page. You do not need to understand every word yet. Put both near the top of the head and your pages will behave.
Saving and opening a .html file
An HTML page is a plain text file, so you can make one in any text editor. The one thing that matters is the name: save it ending in .html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>Save that as index.html. Then find the file on your computer and double-click it: it opens in your browser and shows your heading and paragraph. There is no server to start and nothing to install. The .html ending is the signal that tells your computer to open it as a web page rather than as a wall of code. Change a word, save, and refresh the browser tab to see the update.
.html. Save yours as index.html, double-click it, and the browser opens it right away, no setup at all. To see a change, save the file and refresh the tab. That save-and-refresh loop is the whole rhythm of building a page.