Building Your First Web Page

Every website starts with a single HTML page. In this tutorial, you’ll create your very first web page from scratch, learning the essential structure that powers every site on the internet!

What is a Web Page?

A web page is a document written in HTML (HyperText Markup Language) that your web browser can display. Think of HTML as the blueprint for a house—it defines where everything goes: the walls (structure), the doors (links), the pictures on the wall (images), and the furniture (content).

When you visit a website, your browser downloads the HTML file and interprets it to show you the page exactly as the developer intended.

The Basic HTML Structure

Every HTML document follows a standard structure. This structure tells the browser important information about your page and organizes your content. Here’s the absolute minimum HTML you need:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first web page!</p>
</body>
</html>

Breaking Down the Code

Let’s understand what each part does:

<!DOCTYPE html> — This declaration tells the browser that this document uses HTML5 (the latest version of HTML). It must always be the very first line of your HTML file.

<html lang="en"> — The root element that wraps all content on your page. The lang="en" attribute specifies that your page content is in English, which helps search engines and screen readers understand your content better.

<head> — The head section contains metadata (information about your page) that isn’t displayed on the page itself. This includes the page title, character encoding, and links to stylesheets or scripts.

<meta charset="UTF-8"> — Tells the browser which character set to use. UTF-8 supports all languages and special characters, making it the standard choice.

<meta name="viewport"> — Makes your page look good on mobile devices by controlling how the page scales on different screen sizes.

<title> — The text that appears in the browser tab. This is also what shows up in search engine results!

<body> — Everything inside the body tag is what actually appears on your web page. This is where all your visible content goes.

Adding Content to Your Page

Now let’s make your page more interesting by adding different types of content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<p>Hi! I'm learning HTML and this is my first web page.</p>
<p>I'm excited to learn more about web development!</p>

<h2>My Interests</h2>
<ul>
  <li>Learning to code</li>
  <li>Building websites</li>
  <li>Creating cool projects</li>
</ul>
</body>
</html>

Understanding Content Elements

<h1> to <h6> — Headings from largest (h1) to smallest (h6). Always use <h1> for your main page title, and use the others to organize your content hierarchically.

<p> — Paragraph tags create blocks of text with automatic spacing above and below.

<ul> and <li> — Creates an unordered (bulleted) list. Each <li> is one list item.

Saving and Opening Your HTML File

To see your web page in action:

Create a new file — Open a text editor (like Notepad on Windows, TextEdit on Mac, or any code editor)
Copy the HTML code — Use any of the examples above
Save the file — Save it with the name index.html (the .html extension is important!)
Open in browser — Double-click the file or right-click and choose “Open with” and select your web browser

Your page will appear in the browser just like any other website!

Common Mistakes to Avoid

Forgetting to Close Tags

Problematic example:

<p>This paragraph is never closed
<p>This starts a new paragraph

Improved example:

<p>This paragraph is properly closed</p>
<p>This starts a new paragraph</p>

Most HTML tags come in pairs: an opening tag <tag> and a closing tag </tag>. Always close your tags!

Missing the DOCTYPE

Problematic example:

<html>
<head>
  <title>My Page</title>
...

Improved example:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
...

Without <!DOCTYPE html>, browsers might display your page in “quirks mode” and things won’t look right.

Forgetting the lang Attribute

Problematic example:

<html>

Improved example:

<html lang="en">

The lang attribute helps search engines, screen readers, and translation tools understand your content.

Try It Yourself

Ready to practice? Try these challenges:

Challenge 1: Personal Introduction (Basic)

Create a web page with:

A main heading with your name
A paragraph introducing yourself
A list of three things you like

Challenge 2: Favorite Things (Intermediate)

Build a page that includes:

A main heading: “My Favorite Things”
Three <h2> subheadings for different categories (e.g., “Favorite Foods”, “Favorite Movies”, “Favorite Places”)
A paragraph under each heading explaining your choice

Challenge 3: Mini Portfolio (Advanced)

Create a more complex page with:

A main heading with your name
An “About Me” section with 2-3 paragraphs
A “Skills” section with a list
A “Projects” section with at least two project descriptions
Proper use of <h1>, <h2>, and <h3> tags to organize content

What You Learned

Congratulations! You now know:

The basic structure of an HTML document
How to use essential HTML tags like headings, paragraphs, and lists
How to save and view an HTML file in a browser
Common mistakes to avoid when writing HTML

Next Steps

Now that you’ve built your first web page, you’re ready to learn more!

HTML Basics — Dive deeper into HTML fundamentals
Links and Navigation — Learn how to link pages together
Adding Images — Make your pages visual with images
Text and Headings — Master text formatting and structure

Want to experiment right now? Try our interactive HTML editor to write and test HTML code instantly!

Back to all tutorials