Getting Started with Your First HTML Page

Learn the basics of HTML structure and write your first web page. A practical walkthrough for complete beginners.

6 min read Beginner May 2026

Author

Marcus Lim

Senior Web Design Instructor & Curriculum Developer

Senior web design instructor with 12 years of front-end development experience and a track record of training 800+ creative professionals in Singapore.

Why HTML Matters

HTML isn’t magic. It’s just instructions. You’re telling the browser, “This is a heading. That’s a paragraph. Here’s a link.” The browser reads these instructions and displays your content. Simple as that.

Every website you’ve ever visited? Built with HTML (plus CSS and JavaScript). It’s the foundation. You can’t skip it. But here’s the good news â€” you don’t need to memorize 200 tags. You’ll build functional pages knowing maybe 15 of them.

Person at desk with laptop showing HTML code on screen, notebook with web design sketches, warm office lighting

The Basic Structure

Every HTML document starts the same way. You’ve got opening tags and closing tags. Tags are instructions wrapped in angle brackets. So a paragraph tag looks like this: <p> and closes with </p>.

Key concept: Tags come in pairs. Opening and closing. The content goes between them. <tag>content</tag>

Your first page needs three main sections. The <html> tag wraps everything. Inside that, you’ve got <head> (invisible info) and <body> (what people see). That’s it. Build from there.

Close-up of HTML code on monitor screen with proper indentation and color-coded syntax highlighting, desk workspace with keyboard

Colorful sticky notes on whiteboard showing HTML tag structure and hierarchy, creative workspace

Essential Tags You’ll Actually Use

Don’t memorize. Just know these 10-12 tags exist and what they’re for. You’ll look them up every time at first â€” and that’s normal.

<h1> to <h6> â€” Headings. H1 is biggest, H6 is smallest. Use only one H1 per page.
<p> â€” Paragraph. Plain text content goes here.
<a> â€” Link. The href attribute tells it where to go.
<img> â€” Image. Self-closing. No closing tag needed.
<div> â€” Container. Groups content together for styling.
<button> â€” Clickable button. Pair with CSS for styling.

Start with these. Once you’re comfortable, explore <section>, <article>, <nav>, and <footer>. They’re semantic â€” they tell the browser what content means.

Attributes: Giving Tags Extra Information

Tags can have attributes. These are extra details inside the opening tag. An image needs a src (source) telling it where the file is. A link needs an href (hypertext reference) showing where it points.

Example: <img src=”photo.jpg” alt=”Description”> â€” The src and alt are attributes.

The alt attribute matters. It’s alternative text that displays if the image doesn’t load. Screen readers use it too. You’re not being nice â€” you’re being professional.

Developer pointing at code on dual monitors, explaining HTML attributes, modern office environment

Educational Disclaimer

This guide provides foundational information about HTML structure and best practices for beginners. While the techniques described are industry-standard, your specific implementation should account for your project’s requirements, accessibility standards, and target browsers. For complex projects or professional deployments, consult current web standards documentation and consider working with experienced developers.

Your Next Step

You’ve got the foundation. Now you need to write actual code. Open a text editor â€” not Word, not Google Docs, a real code editor. Create a file called index.html. Type out the basic structure. Then save it and open it in your browser. You’ll see your first web page.

That moment when you write code and see it rendered in the browser? That’s addictive. It’s why people build careers in web development. You’re not far from that feeling. Keep going.