From a Blank Page to the World Wide Web: The Guide to Making Your First HTML Page

This post may contain affiliate links. If you make a purchase through these links, we may earn a commission at no additional cost to you.

Ever wondered how websites are made? It might seem like some sort of digital magic, but it all starts with something surprisingly simple: a plain text file. This guide will walk you through everything you need to know about creating your very own web page using HTML. Think of it as a recipe. We’ll gather the ingredients, follow the steps, and by the end, you’ll have cooked up your first-ever piece of the internet.

You don’t need to be a computer whizz or a maths genius. If you can write an email, you can write HTML. It’s the language that gives every website its basic skeleton. From the BBC News homepage to your local takeaway’s menu, HTML is the foundation holding it all together. So, grab a brew, get comfortable, and let’s build something brilliant together.

What on Earth is HTML, Anyway?

Before we start building, let’s get our heads around what we’re working with. HTML stands for HyperText Markup Language. That sounds a bit of a mouthful, doesn’t it? Let’s break it down.

• Markup Language: Imagine you’re marking an essay. You might underline a title, circle a spelling mistake, or highlight an important sentence. You’re not changing the words, but you’re adding ‘marks’ to tell someone how to understand the text. HTML does the same thing for a web browser. You use ‘tags’ to tell the browser, “This bit is a heading,” “This is a paragraph,” or “This should be a link.” It’s a language of instructions.
• HyperText: This is the clever bit that makes the web, well, a web. A normal text document is linear; you read it from top to bottom. But hypertext allows you to jump from one document to another using links. When you click on a link to go from one page to another, you’re using hypertext. It’s what connects all the pages on the internet into a giant, interconnected library.

So, in short, HTML is the standard language used to create the structure and content of web pages. It’s not a programming language like Python or Java; you can’t use it to do complex calculations. Instead, it’s a structural language, like the scaffolding of a building. It defines where the walls, doors, and windows go. The paint, wallpaper, and furniture—the style and look of the site—come later, with a language called CSS. But for now, we’re focusing on the solid foundation.

A Very British Beginning: How HTML Came to Be

The story of HTML, and indeed the entire World Wide Web, has a hero who’s one of our own: Sir Tim Berners-Lee. Back in the late 1980s, Berners-Lee was a British computer scientist working at CERN, the European Organization for Nuclear Research in Switzerland. He saw a problem: scientists from all over the world were collaborating, but they had no easy way to share their documents and data.

His solution was revolutionary. In 1989, he proposed a system of interconnected documents that could be accessed via the internet. To make it work, he invented three core technologies that are still with us today:

1. HTML: The language to create the web pages.
2. HTTP (Hypertext Transfer Protocol): The set of rules for sending and receiving web pages across the internet.
3. URL (Uniform Resource Locator): A unique address for every single page on the web (like https://www.google.co.uk).

He created the first-ever web browser and web server, and in 1991, the world’s first website went live. It was a simple page explaining what the World Wide Web was. From that single page, created by a Brit with a brilliant idea, the entire digital world we know today has grown. It’s a proper British success story.

Your Toolkit: What You’ll Need to Get Started

The fantastic thing about making a basic HTML page is that you don’t need any fancy or expensive software. In fact, your computer already has everything you need.

1. A Simple Text Editor

This is where you’ll write your HTML code. It’s crucial that you use a plain text editor, not a word processor like Microsoft Word or Google Docs. Word processors add all sorts of hidden formatting that will confuse a web browser.

• On Windows: You can use Notepad, which comes pre-installed. Just search for it in your Start menu.
• On a Mac: You can use TextEdit. But be careful! By default, TextEdit saves in a rich text format. You must go to Format > Make Plain Text before you start writing.

While these are fine for your first page, most people who write code regularly use a more powerful text editor designed for the job. These are often called code editors. They help you out by colour-coding your tags, auto-completing bits of code, and helping you spot mistakes.

Some popular free code editors include:

• Visual Studio Code (VS Code): Incredibly popular, powerful, and made by Microsoft. It’s a fantastic choice for beginners and professionals alike.
• Sublime Text: A lightweight and speedy editor that’s been a favourite for years.
• Atom: Created by the people behind GitHub, it’s very customisable.

For this guide, we’ll stick to the basics. Just open up Notepad or a plain TextEdit document. That’s all you need.

2. A Web Browser

This is what you’ll use to see the results of your work. It doesn’t matter which one you use—Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari on a Mac will all do the job perfectly. You’ll be writing your code in the text editor and then opening the file in your browser to see what it looks like.

That’s it! A text editor and a browser. No cost, no downloads (unless you want a fancier editor). You’re ready to start building.

The Anatomy of an HTML Page: Understanding the Building Blocks

Every HTML page, no matter how complicated, is built from the same basic elements and follows the same structure. Think of them as LEGO bricks. You have different types of bricks, and you clip them together to build your creation. In HTML, these bricks are called tags.

What Are Tags?

HTML tags are keywords surrounded by angle brackets (< and >). They usually come in pairs: an opening tag and a closing tag.

• An opening tag looks like this: <p>
• A closing tag looks the same but has a forward slash before the tag name: </p>

The content you want the tag to affect goes between the opening and closing tags. For example, to make a paragraph of text, you’d write:

<p>This is my very first paragraph.</p>

This whole thing—the opening tag, the content, and the closing tag—is called an element.

Some tags are self-closing, meaning they don’t need a separate closing tag because they don’t wrap around any content. An example is the line break tag, <br>, or the image tag, <img>. We’ll see these in action later.

The Basic Skeleton of Every HTML Page

Every single HTML page needs a few essential tags to set it up correctly. This is the boilerplate, the standard structure you’ll start with every time.

Let’s look at the code, and then we’ll break down what each part does.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first time making a web page. It's quite exciting!</p>
  </body>
</html>

This might look a bit intimidating at first, but it’s quite straightforward.

1. <!DOCTYPE html>: This is the very first thing on the page. It’s not technically an HTML tag, but an instruction. It tells the web browser, “Hey, the document you’re about to read is written in the modern version of HTML (HTML5).” It’s a bit of a historical quirk, but you must always include it.
2. <html>: This is the root element. Every other element on the page goes inside this one. It has an opening <html> tag right at the start (after the DOCTYPE) and a closing </html> tag at the very end of the file.
3. <head>: This element contains all the meta-information about your web page. This is stuff that isn’t displayed on the main page itself but is important for the browser and search engines. It’s like the information on the back cover of a book. Things that go in the <head> include the page title, links to style sheets (for CSS), and character set information.
4. <title>: This is nested inside the <head>. The text you put here will appear in the browser tab at the top of the window. It’s also what search engines like Google will typically use as the main headline for your page in their search results. It’s very important for SEO (Search Engine Optimisation).
5. <body>: This is where the magic happens! Everything you put inside the <body> element is the content that will actually be visible on your web page. All your headings, paragraphs, images, links, and lists will go in here.

Think of it like this: the <html> tag is the whole house. The <head> is the loft, where you store all the important background stuff. The <body> is the main living area, where all the visible things are.

Let’s Build Your First Page: A Step-by-Step Guide

Right, theory over. It’s time to get our hands dirty and actually make something.

Step 1: Open Your Text Editor

Fire up Notepad (on Windows) or TextEdit (on Mac). Remember to switch TextEdit to plain text mode (Format > Make Plain Text). You should be looking at a completely blank, white window.

Step 2: Write the Basic HTML Skeleton

Type (or copy and paste) the basic HTML structure we just discussed into your blank document. It’s good practice to try typing it out yourself to get a feel for it.

<!DOCTYPE html>
<html>
  <head>
    <title>My Awesome Website</title>
  </head>
  <body>

  </body>
</html>

Notice I’ve left the <body> section empty for now. That’s where we’re going to add our own content.

Step 3: Add Some Content

Let’s add a main heading and a couple of paragraphs. We’ll use some common tags for this:

• <h1> to <h6>: These are the heading tags. <h1> is for the most important, main heading on the page. <h2> is for a subheading, <h3> for a sub-subheading, and so on, down to <h6>. You should only ever have one <h1> per page.
• <p>: This is the paragraph tag, for regular blocks of text.

Let’s add them into the <body> section of your document.

<!DOCTYPE html>
<html>
  <head>
    <title>My Awesome Website</title>
  </head>
  <body>
    <h1>Welcome to My First Page!</h1>
    <p>This is a page I made all by myself. It's not much yet, but it's a start.</p>
    <p>HTML is the first step to becoming a web developer. It's all about adding structure to content.</p>
  </body>
</html>

Your text editor should now look something like this.

Step 4: Save Your HTML File

This is a very important step. You need to save the file in a way that your computer and browser recognise as a web page.

1. Go to File > Save As....
2. Choose a location to save it, like your Desktop, so it’s easy to find.
3. In the “File name” box, type index.html.
   • The name index.html is a special convention. When a browser visits a website folder, it automatically looks for a file named index.html to display as the homepage.
4. Crucially, in the “Save as type” dropdown menu, select “All Files”. If you leave it as “.txt”, it will save as index.html.txt, which won’t work.
5. Click Save.

You should now see a new file on your Desktop with the icon of your default web browser.

Step 5: Open Your Page in a Browser

This is the moment of truth! Find the index.html file you just saved and double-click on it.

It should open up in your web browser, and you should see your heading and paragraphs displayed. Look up at the browser tab—it should say “My Awesome Website,” which is the text you put in the <title> tag.

Congratulations! You’ve just created your very first web page. You’ve taken plain text, marked it up with HTML, and a browser has understood it and displayed it. It might not look like much, but you’ve taken the first and most important step.

Adding More Flavour: Essential HTML Tags to Know

A website with just headings and paragraphs is a bit boring. Let’s spice things up by learning a few more essential tags. We’ll add these inside the <body> of your index.html file. Just open it back up in your text editor, make the changes, save it, and then refresh the page in your browser to see the results.

Creating Lists

There are two main types of lists in HTML: unordered (bullet points) and ordered (numbered).

Unordered Lists (<ul>)

For a list where the order doesn’t matter, like a shopping list, you use the <ul> (unordered list) tag. Each item in the list is then wrapped in an <li> (list item) tag.

<h2>My Hobbies</h2>
<ul>
  <li>Playing football</li>
  <li>Watching films</li>
  <li>Learning to code</li>
</ul>

Add this code below your last paragraph. When you save and refresh, you’ll see a subheading and a neat bulleted list.

Ordered Lists (<ol>)

For a list where the order is important, like a set of instructions, you use <ol> (ordered list). The list items still use the <li> tag.

<h2>How to Make a Cup of Tea</h2>
<ol>
  <li>Boil the kettle.</li>
  <li>Put a teabag in a mug.</li>
  <li>Pour on the boiling water.</li>
  <li>Add milk and sugar to taste.</li>
</ol>

Adding Links (<a>)

Links, or hyperlinks, are what make the web a web. The tag for a link is <a>, which stands for “anchor.” It needs an attribute called href (hypertext reference) to tell it where to link to.

The text that you want to be clickable goes between the opening <a> and closing </a> tags.

<p>My favourite website for news is the <a href="[https://www.bbc.co.uk/news](https://www.bbc.co.uk/news)">BBC News</a> website.</p>

When you add this, the words “BBC News” will become a blue, underlined link. Clicking it will take you to the BBC News homepage.

You can also link to other pages on your own website. If you had another file called about.html in the same folder, you could link to it like this:

<a href="about.html">Learn more about me</a>

Adding Images (<img>)

Images bring a page to life. The image tag is <img>, and it’s a self-closing tag. It requires two main attributes:

1. src (source): This is the path to the image file. It can be a URL to an image online or a local path to an image on your computer.
2. alt (alternative text): This is a description of the image. It’s incredibly important for accessibility—screen readers for visually impaired users will read out this text. It’s also what shows up if the image fails to load, and it helps search engines understand what your image is about. Always include alt text.

Let’s find a picture online to add. For example, let’s use a placeholder image.

<h2>A Picture of a Cute Puppy</h2>
<img src="[https://placehold.co/600x400/EFEFEF/AAAAAA&text=Cute+Puppy](https://placehold.co/600x400/EFEFEF/AAAAAA&text=Cute+Puppy)" alt="A placeholder image of a cute puppy">

This will display the image on your page. You can also control the size with width and height attributes, but it’s generally better practice to do this with CSS later on.

Emphasising Text

Sometimes you want to make certain words stand out. HTML gives you a few ways to do this.

• <strong>: This tag is used to indicate that the text is important. Browsers will typically display this as bold.<p>It is <strong>very important</strong> to save your file as .html.</p>
• <em>: This tag is used for emphasis. Browsers usually show this as italics.<p>I <em>really</em> think you should try this.</p>

It’s tempting to think of these as just “bold” and “italic,” but they have semantic meaning. You’re telling the browser about the importance or emphasis of the text, not just how it should look. The visual styling is a byproduct. For purely visual changes, you should use CSS.

Putting It All Together: Your Updated Page

Let’s combine everything we’ve learned into our index.html file. Your final code should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Awesome Website</title>
  </head>
  <body>
    <h1>Welcome to My First Page!</h1>
    <p>This is a page I made all by myself. It's not much yet, but it's a start.</p>
    <p>HTML is the first step to becoming a web developer. It is <strong>very important</strong> because it's all about adding structure to content.</p>

    <h2>My Hobbies</h2>
    <ul>
      <li>Playing football</li>
      <li>Watching films</li>
      <li>Learning to <em>code</em></li>
    </ul>

    <h2>How to Make a Perfect Cup of Tea</h2>
    <ol>
      <li>Boil the kettle.</li>
      <li>Put a teabag in a mug.</li>
      <li>Pour on the boiling water.</li>
      <li>Add milk and sugar to taste.</li>
    </ol>

    <h2>A Picture I Like</h2>
    <img src="[https://placehold.co/600x400/EFEFEF/AAAAAA&text=A+Lovely+View](https://placehold.co/600x400/EFEFEF/AAAAAA&text=A+Lovely+View)" alt="A placeholder image of a lovely view">

    <h2>Where to Find More Information</h2>
    <p>My favourite website for learning is <a href="[https://www.w3schools.com/html/](https://www.w3schools.com/html/)">W3Schools</a>.</p>
  </body>
</html>

Save this, refresh your browser, and look at what you’ve created! You now have a page with headings, paragraphs, lists, emphasized text, an image, and a link. This is a genuinely structured, proper web page.

Common Pitfalls and How to Avoid Them

When you’re starting out, it’s easy to make small mistakes. Here are a few common trip-ups to watch out for.

• Forgetting Closing Tags: One of the most common errors. If your page starts looking strange, with half the text in italics or bold, you’ve probably forgotten a closing </em> or </strong> tag somewhere.
• Saving as a .txt File: As mentioned earlier, if your page just shows the raw code in the browser, you’ve almost certainly saved it as a text file. Make sure you select “All Files” when saving and that the filename ends in .html.
• Broken Image Links: If your image shows up as a broken icon, double-check the src path. A single typo in the filename or URL will stop it from working. Paths are case-sensitive on most web servers, so MyImage.jpg is different from myimage.jpg.
• Using Word Processors: Don’t be tempted to use Microsoft Word. It adds “smart quotes” (curly ones) instead of the straight quotes (") that code requires, and it injects lots of invisible formatting that will break your page. Stick to a plain text editor.

The Next Steps: Where to Go from Here?

You’ve mastered the absolute basics of HTML. You can create a structured document that a browser can understand. So, what’s next on your journey to becoming a web wizard?

Learn More HTML Tags

There are over 100 HTML tags, each with a specific purpose. You don’t need to learn them all, but it’s worth getting familiar with more of them. Some important ones to look up are:

• <div> and <span>: Generic containers used for grouping elements, especially for styling with CSS.
• <table>, <tr>, <th>, <td>: For creating tables of data.
• <form>, <input>, <button>: For creating forms that users can fill in.

Say Hello to CSS

Right now, your page probably looks a bit plain. It has structure, but no style. That’s where CSS (Cascading Style Sheets) comes in. CSS is the language you use to control the presentation of your website: the colours, fonts, layout, and spacing.

HTML and CSS work together as best mates. HTML provides the meaning and structure, while CSS provides the look and feel. Learning CSS is the natural next step. It will let you turn your black-and-white page into a colourful, beautifully designed website.

Get Your Page Online

Your index.html file currently only exists on your computer. To share it with the world, you need to upload it to a web host. A web host is a company that provides servers (powerful computers that are always connected to the internet) where you can store your website’s files.

There are many free and cheap options for beginners:

• GitHub Pages: A completely free and brilliant way to host simple, static websites like the one you’ve just built.
• Netlify: Another excellent free option with a very user-friendly drag-and-drop interface.
• Shared Hosting Providers: Companies like GoDaddy or Hostinger offer cheap hosting plans (often just a few quid a month) that come with a domain name.

Once you upload your file to a host, your web page will be live on the internet, accessible to anyone with its URL.

You’ve taken a huge step today. You’ve gone from being a consumer of the web to a creator. You’ve learned the fundamental language that underpins our entire digital world, and you’ve built something tangible. The journey from here is one of constant learning and creativity. Keep building, keep experimenting, and who knows where that simple index.html file might take you. Welcome to the club.

Further Reading and Resources:

• MDN Web Docs (Mozilla) – An incredibly thorough and respected resource for all web technologies.
• W3Schools HTML Tutorial – A fantastic, interactive learning site for beginners.
• freeCodeCamp – Offers comprehensive, free courses on web development, including HTML and CSS.
• The Odin Project – A full-stack, open-source curriculum for learning web development.