Last updated on November 12, 2025
What you need
- A plain text editor (Notepad on Windows, TextEdit on Mac in plain-text mode, or a code editor like VS Code).
- A modern web browser (Chrome, Firefox, Edge, or Safari) to open your file.
- A little curiosity and patience.
Step 1 — Create a new file and save it as index.html
Open your text editor and create a new file. Save it as index.html. The .html extension tells the browser to render it as a web page.
Step 2 — Add the basic HTML structure
Start with the minimal HTML template. Type the following exactly and save the file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Now open index.html in your browser (double-click the file). You should see the heading “Hello, world!”. That means your first HTML page works.
Step 3 — Add more content: paragraphs, lists, and links
HTML uses tags to structure content. Here’s how to add paragraphs, a list, and a link:
<body>
<h1>Welcome to my page</h1>
<p>This is a short paragraph about my site. I can write anything here.</p>
<h2>My favorite websites</h2>
<ul>
<li><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a></li>
<li><a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">W3Schools</a></li>
</ul>
</body>Notice the <a> tag for links. The attributes target="_blank" and rel="noopener noreferrer" open the link in a new tab safely.
Step 4 — Add an image
Images make pages lively. Save an image file (for example photo.jpg) into the same folder as your HTML file and add:
<img src="photo.jpg" alt="A description of the photo" width="400">Always include the alt attribute — it’s important for accessibility and SEO.
Step 5 — Add simple styling with CSS
CSS controls how things look. Add a small style block inside the <head> to keep everything in one file:
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; max-width: 800px; margin: auto; }
h1 { color: #2c3e50; }
a { color: #1e90ff; }
</style>Save and refresh the browser to see the updated look. Styling makes your page readable and pleasant.
Step 6 — Add a simple form (optional)
Forms collect input from users. Here’s a tiny contact form that demonstrates the basic elements:
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Send</button>
</form>Here action="#" means the form won’t actually submit anywhere — it’s useful for testing locally.
Step 7 — Save, refresh, and debug
After each change, save your file and refresh the browser. If something doesn’t show up, open the browser’s developer tools (press F12) and check the Console for errors.
Step 8 — Accessibility and best practices
A few quick rules that matter:
- Use semantic tags:
<header>,<nav>,<main>,<footer>to improve structure. - Always include
alttext for images. - Keep your code tidy and indented for readability.
- Validate your HTML with the W3C validator if you’re unsure.
Step 9 — Where to go next
Once you’re comfortable with basic HTML and CSS, try these next steps:
- Learn more CSS: layouts, flexbox, and grid.
- Explore JavaScript to add interactivity (like showing/hiding content).
- Use a code editor like Visual Studio Code for helpful features (live preview, syntax highlighting).
Step 10 — Publish your page (quick options)
When you’re ready to share your page online, you have simple options:
- Use GitHub Pages to host static pages for free.
- Use a free hosting service like Netlify or Vercel for small projects.
- Upload files to a cheap shared hosting provider if you want a custom domain.
Quick examples you can copy
Here’s a single-file example you can copy into index.html and open directly in your browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini Demo Page</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: auto; }
header { text-align: center; margin-bottom: 20px; }
img { max-width: 100%; height: auto; }
.card { border: 1px solid #eee; padding: 12px; border-radius: 6px; margin-bottom: 12px; }
</style>
</head>
<body>
<header>
<h1>Mini Demo Page</h1>
<p>A tiny HTML example you can edit and reuse.</p>
</header>
<div class="card">
<h2>About</h2>
<p>This is a simple section with an image and a link.</p>
<img src="photo.jpg" alt="sample photo">
<p><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">Learn more HTML</a></p>
</div>
<footer>
<p>Made with HTML — edit this file and refresh to see changes.</p>
</footer>
</body>
</html>Final thoughts
HTML is the easiest and most satisfying way to see immediate results while learning web development. Start small, experiment, and don’t be afraid to break things — that’s how you learn. Keep this file, tweak it, and you’ll be surprised how quickly you pick up new tags and techniques.
If you’d like, I can also provide a step-by-step video script or a printable one-page cheat sheet you can keep beside your keyboard.