Your first
HTML page.
One file. Ten lines. A page in your browser. By the end of this lesson you'll have written HTML, saved it to disk, opened it in a browser, and understood every line you typed. No install. No compiler. No terminal. Just a text file and a browser tab.
Your first HTML page is a text file that opens in a browser. Open a text editor, paste the boilerplate below, save it as index.html, and double-click the file. The browser renders it. That's it. Everything else in HTML is built on this same pattern — write tags in a file, open the file, see the page. The whole language works this way.
Before this lesson: you need a plain-text editor (Notepad, VS Code, or TextEdit) and a browser. Nothing else. No install, no setup.
📝 Step 1: Write the file
Open your text editor. Create a new file. Paste this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title> </head> <body> <h1>Hello, world!</h1> <p>This is my first HTML page.</p> </body> </html>
Save the file with a .html extension
Windows Notepad: File → Save As. Set "Save as type" to "All Files". Filename: index.html. Without "All Files", Notepad saves it as index.html.txt.
macOS TextEdit: Format → Make Plain Text first. Then File → Save. Filename: index.html.
VS Code: File → Save As. Filename: index.html. Done.
The .txt trap. Windows and macOS hide file extensions by default. If you see index.html in your folder but the browser shows the code as text instead of a page, the actual filename is index.html.txt. Fix: enable "show file extensions" in your system settings, then rename the file to remove the .txt.
🌐 Step 2: Open it in a browser
Three ways. All produce the same result.
Double-click the file
The file opens in your default browser. This is the fastest way — just find the file and double-click it.
Right-click → Open with → your browser
Choose a specific browser — Chrome, Firefox, Safari, Edge. Useful if your default browser is set to something else or if you want to test cross-browser rendering.
Drag the file into a browser window
Open your browser first, then drag the HTML file into the tab bar or content area. Works the same as double-clicking.
You should see a page with a large heading saying "Hello, world!" and a paragraph below it. If you see the code instead of a rendered page, the file extension is wrong — see the .txt trap above.
Refresh after every change. When you edit the HTML file, save it, then press F5 or Ctrl+R in the browser to see the update. The browser doesn't watch the file — you have to tell it to re-read. This is the entire edit-save-refresh loop that every web developer uses thousands of times a day.
🔍 Step 3: Understand every line
Ten lines. Each one does something specific. Nothing is boilerplate you should ignore.
<!DOCTYPE html>
Tells the browser "this is modern HTML5." Must be the very first line. Without it, browsers switch to "quirks mode" and render inconsistently. Include it in every page.
<html lang="en">
The root element. Everything else goes inside it. lang="en" tells screen readers and search engines the page is in English — important for accessibility.
<head>
Metadata container. Nothing inside it is visible on the page — it's information about the page. Contains title, character encoding, meta tags, stylesheet links.
<meta charset="UTF-8">
Tells the browser how to interpret text characters. UTF-8 handles every language, every emoji, every special character. Without it, accented letters and emojis show as garbage.
<meta name="viewport">
Tells mobile browsers to render the page at device width. Without it, phones show a tiny zoomed-out desktop layout. Every modern page includes this tag.
<title>
The page title. Appears in the browser tab, in bookmarks, in Google search results. The single most important line for SEO — it's what users see before clicking.
<body>
The visible content container. Everything the user sees goes inside the body. Text, images, links, forms — all in the body.
<h1> and <p>
h1 is the page's main heading — one per page. p is a paragraph. Both are semantic: they mean something, they're not just styled text.
<!DOCTYPE html> ← always first <html lang="en"> ← root element <head> ← metadata <meta charset="UTF-8"> <meta name="viewport" ...> <title>...</title> </head> <body> ← visible content ...everything users see... </body> </html>
Every page you'll ever write has this same structure. Ten years from now, a React app, a WordPress site, and a plain static page all start with the same <!DOCTYPE html> + head + body shape. Learn it once, use it forever. The head might have 20 more tags; the body might have 5000 lines; the structure stays the same.
💡 Add a few more elements
Once the basic page works, try these. Each one introduces a new element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title> </head> <body> <h1>Hello, world!</h1> <p>This is my <strong>first</strong> HTML page. It has <em>styled text</em> and a <a href="https://example.com">link</a>.</p> <h2>Things I'm learning</h2> <ul> <li>Headings</li> <li>Paragraphs</li> <li>Lists</li> <li>Links</li> </ul> <h2>My favorite image</h2> <img src="https://picsum.photos/400/200" alt="A random photo"> <hr> <p>That's enough for one page.</p> </body> </html>
<strong>
Bold text that's semantically important. Different from <b> — strong means "this matters," b just means "looks bold." Use strong for emphasis.
<em>
Italic text with emphasis. Different from <i> — em means "stress this word," i just means "looks italic." Use em.
<ul> and <li>
Unordered list and list item. Each item in the list is an li inside the ul. For numbered lists, use ol instead of ul.
<img>
Self-closing image tag. Requires src (the URL) and alt (text description). The alt is required — it's what screen readers say and what shows if the image fails to load.
Self-closing tags. Some elements have no closing tag: <img>, <br>, <hr>, <input>, <meta>, <link>. They're called "void elements." Writing </img> is technically wrong (though browsers tolerate it). Everything else — <p>, <div>, <h1>, <ul> — needs a closing tag.
🏆 Challenge
One small task. Do it in your own file, not the browser.
Your turn — 5 minutes
Create a new file called about.html with these elements:
1. A proper HTML boilerplate (DOCTYPE, html, head, body).
2. A <title> that says "About Me".
3. An <h1> with your name.
4. Two <p> tags — one about your background, one about why you're learning HTML.
5. An <h2> "My Hobbies" with a <ul> of 3 hobbies.
6. One <img> with a proper alt attribute.
Save it, open it in your browser, and refresh as you make changes. If it renders, you've written a real HTML page. If it doesn't, tell me what you see and we'll fix it.
⚠️ Common mistakes (right now)
The errors you'll hit in the next 24 hours, and how to fix them.
Windows Notepad adds .txt unless you set "Save as type" to "All Files". If your browser shows the code as text instead of a page, the extension is wrong. Enable file extension display in your OS and rename the file.
<p>Hello without </p> works in some cases but breaks the layout in others. Always close non-void tags: <p>, <div>, <h1>, <ul>, <li>, <a>.
Without <!DOCTYPE html> as the very first line, the browser switches to "quirks mode" and renders inconsistently. Always include it.
Text directly inside <head> doesn't render. Everything visible goes inside <body>. If your page is blank, check whether the content is in the body or accidentally in the head.
<img src="x.png"> without alt fails screen readers and SEO. Always add alt="description" — or alt="" for purely decorative images.
You saved the file but see the old version. Fix: press F5 or Ctrl+R to refresh. Or in Chrome, hold Shift while refreshing for a hard reload that skips the cache.
<p><strong>Hello</p></strong> is broken — tags must nest properly. Fix: <p><strong>Hello</strong></p>. Close the inner tag before the outer one.
➡️ What's next
You've written your first page. Here's the natural next step.
❓ Frequently asked questions
How do I create an HTML file?
Open any plain-text editor (Notepad, VS Code, TextEdit). Type your HTML. Save the file with a .html extension — for example, index.html. On Windows, set 'Save as type' to 'All Files' so Notepad doesn't add .txt. On Mac, TextEdit must be in plain text mode: Format → Make Plain Text first.
How do I open an HTML file in a browser?
Double-click the .html file — it opens in your default browser. Alternatively, right-click and choose 'Open with' → your browser. You can also drag the file into a browser window, or paste its file:// path into the address bar.
What is the DOCTYPE declaration?
DOCTYPE tells the browser which version of HTML to use. Modern HTML uses just !DOCTYPE html — no version number, no URL. It must be the very first line of the file. Without it, browsers switch to 'quirks mode' and render pages with old, inconsistent rules.
What goes in the head vs the body?
The head contains metadata — the title (shown in browser tab), meta description, character encoding, stylesheet links, and scripts. The body contains the visible content — everything the user sees. Put all text, images, and structure in the body.
Why does my HTML show as text instead of a page?
Two causes: (1) the file was saved with a .txt extension instead of .html, (2) you opened the file in a text editor, not a browser. The fix is to rename the file to .html and open it by double-clicking. Windows hides extensions by default, so 'index.html' may actually be 'index.html.txt'.
Do I need a server to run HTML?
No. HTML files run directly in the browser — no server, no build step, no compiler. Open the file locally and it works. You need a server only when you want to load files via JavaScript fetch or share the page with other people online.
What is the viewport meta tag?
The viewport meta tag tells mobile browsers how to scale the page: meta name='viewport' content='width=device-width, initial-scale=1.0'. Without it, phones render pages at desktop width and zoom out — text is tiny. Every modern page includes this tag.
What is the difference between h1 and h2?
h1 is the page's main heading — exactly one per page, stating what the page is about. h2 is a section heading within the page — the second level of the outline. Never skip levels: h1 → h2 → h3, not h1 → h4. Browsers style h1 biggest, but the real purpose is document structure.