HTML Basics: Building Your First Web Page from Scratch

If you’ve ever wanted to create your own website but didn’t know where to start, HTML is the best place to begin. Short for HyperText Markup Language, HTML is the foundation of every web page you’ve ever visited. It tells the browser what content to display and how to structure it.

The good news is you don’t need any expensive software or advanced skills to write HTML. All it takes is a text editor and a web browser. In this beginner-friendly guide, you’ll learn how to build your very first web page from scratch—and see your code come to life in just minutes.

What is HTML and why is it important?

HTML is not a programming language—it’s a markup language used to organize and display content on the web. Think of it as the skeleton of your website. It defines elements like headings, paragraphs, links, images, and lists. Without HTML, web pages wouldn’t have any structure.

Every website you visit, whether it’s a personal blog or a massive e-commerce platform, starts with HTML. Once you understand the basics, you’ll be able to build your own pages and move on to more advanced tools like CSS and JavaScript.

Setting up your workspace

Before writing any code, you need two simple tools:

  • A text editor – You can use Notepad (Windows), TextEdit (Mac), or a free code editor like Visual Studio Code, Atom, or Sublime Text.
  • A web browser – Chrome, Firefox, Safari, or Edge will work fine.

Create a new file on your desktop and name it something like index.html. This will be the main page of your website.

Writing your first HTML page

Open your text editor and copy the following basic structure into your file:

My First Web Page

Hello, world!

This is my very first website built with HTML.

Save the file and double-click it to open in your browser. You should see a heading that says “Hello, world!” and a paragraph below it. Congratulations—you’ve just built your first web page.

Understanding the structure

Let’s break down what each part of the code does:

  • <!DOCTYPE html> tells the browser you’re writing in modern HTML5.
  • <html> is the root of the page.
  • <head> contains meta information like the page title and character encoding.
  • <title> defines what shows up in the browser tab.
  • <body> holds everything that appears on the actual page.

Inside the <body>, you can add all kinds of content—headings, text, links, images, lists, and more.

Adding more content

Let’s add some new elements to make your page a bit more interesting:

About Me

I’m learning how to build websites from scratch using HTML.

My Hobbies

  • Coding
  • Reading
  • Traveling

Check out my favorite site for learning HTML.

This adds headings, a paragraph, an unordered list, and a clickable link. Every element has an opening tag (like <p>) and a closing tag (like </p>).

Adding images

To add an image to your page, use the <img> tag. Here’s an example:

Placeholder image
  • src is the URL of the image.
  • alt is alternative text shown if the image can’t load or for screen readers.

Make sure the image URL is valid or you can use your own image stored locally in the same folder as your .html file.

Best practices for beginners

  • Use proper indentation to keep your code organized and readable.
  • Save your file frequently and refresh the browser to see updates.
  • Test different tags to understand what each one does.
  • Use online validators like validator.w3.org to catch errors in your code.

Where to go from here

Once you’re comfortable writing basic HTML, you can explore CSS to style your pages with colors, fonts, and layouts, or dive into JavaScript to add interactivity. But HTML remains the backbone of every website—and learning it gives you the confidence to move forward.

You’ve just taken your first real step into web development, and the skills you build here will serve you across any platform or framework you choose to explore next.

Website https://easysitelearn.com