Your First HTML Page
Write a complete, valid HTML document by hand โ boilerplate, title, headings, and paragraphs โ and understand every line of it.
No templates, no generators โ in this lesson you write a real HTML document and every single line in it will be something you can explain.
The smallest complete page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This page was written by hand.</p>
</body>
</html>
Line by line:
<!DOCTYPE html>โ the document type declaration. It is not an element; it tells the browser "this is a modern HTML document, use the modern rendering rules". Every page you write starts with it.<html lang="en">โ the root element. Everything else lives inside it.langsays what language the page is in โ screen readers use it to pick the right voice, and translation tools use it to decide whether to offer translation.<head>โ information about the page. Nothing in here renders on the page itself.<meta charset="UTF-8" />โ the character encoding, so symbols likeรฉandไฝ ๅฅฝrender correctly. Put it first in the head, always.<title>โ the page's name: it appears in the browser tab and as the link text in search results. Also announced as the page name by screen readers.<body>โ everything the visitor actually sees.
Nesting is the whole game
HTML is elements inside elements inside elements. <h1> sits inside <body>, which
sits inside <html>. Indentation does not change what the browser sees โ but consistent
indentation is how you keep the structure visible:
<!-- easy to read: matching indentation for each level -->
<body>
<h1>Welcome</h1>
<p>Short and clear.</p>
</body>
If you open an element, close it. A missing </p> will not crash anything โ the browser
guesses, sometimes wrongly, which is exactly the kind of bug you do not want.
The elements you have so far
<h1>โ<h6>: headings, most to least important. Use one<h1>per page โ the page's main topic โ and step down without skipping levels.<p>: a paragraph. Browsers add sensible spacing between paragraphs automatically.
Try it now
Open a text editor, copy the smallest complete page, change the <title> and the
<h1> text to something of yours, save it as index.html, and double-click the file.
It opens in your browser โ that file is a website. (Why index.html? Servers serve
index.html by default when a visitor asks for a folder โ a convention worth keeping.)
What you learned
<!DOCTYPE html>,<html lang>,<head>,<meta charset>,<title>,<body>โ and what each is for- Nesting and indentation as readability
<h1>โ<h6>with one<h1>per page;<p>for paragraphs- A saved
.htmlfile is already a working page
Next: a tool professionals use every day to see inside any page โ DevTools.