Welcome to the very beginning of your web development journey! Before you can build dynamic apps or create beautiful animations, you need to learn the language that gives the web its structure. That language is HTML.
It might sound technical, but the concept is simple. Think of a house. Before you can paint the walls or choose the furniture, you need a blueprint and a structural frame. HTML is the blueprint and the frame for every website you’ve ever visited.
By the end of this guide, you will have built your very first webpage from scratch. No, seriously. Let’s get started.
What is HTML, Really?
HTML stands for HyperText Markup Language. Let’s break that down:
- HyperText: This refers to the “links” that connect web pages to one another, forming the “web.”
- Markup Language: This means it’s a language used to “mark up” or annotate text to give it meaning and structure. You tell the browser, “This text is a heading,” “This text is a paragraph,” or “This is an image.”
The most important thing to remember is: HTML is all about structure, not style. It’s the skeleton, not the clothes. We’ll worry about making it look pretty later.
Your First Toolkit (It’s Simpler Than You Think)
You don’t need any fancy, expensive software to write HTML. You already have everything you need.
- A Simple Text Editor: You can use something basic like Notepad (on Windows) or TextEdit (on Mac). However, most developers use a free, powerful code editor. We highly recommend downloading Visual Studio Code (VS Code). It’s free and will make your life much easier.
- A Web Browser: Anything like Google Chrome, Firefox, or Safari will do. This is what you’ll use to view your creation.
That’s it. Let’s start building.
Let’s Build Your First Webpage: An “About Me” Page
We’re going to create a simple page about you.
Step 1: Create Your Project File
- Create a new folder anywhere on your computer. Name it My First Website.
- Inside that folder, open your text editor (like VS Code) and create a new file.
- Save this file as index.html.
Why index.html? Web servers are configured to look for a file named index.html by default when someone visits a website. It’s the conventional name for a homepage.
Step 2: The Basic HTML Structure (The Boilerplate)
Every HTML page needs a basic structure to work correctly. Think of this as the non-negotiable part of the skeleton. Copy and paste the following code into your index.html file.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
</body>
</html>What does this mean?
- <!DOCTYPE html>: This tells the browser you’re using the modern version of HTML (HTML5).
- <html>: This is the root tag that wraps everything. The whole skeleton is inside here.
- <head>: This is the “brain” of your page. Information here isn’t visible on the page itself, but it contains important metadata, like the page title that appears in the browser tab.
- <body>: This is the visible part of the skeleton! Everything you want to show on the page—text, images, links—goes inside the body.
Step 3: Adding Your Content
Now for the fun part. Let’s add content inside the <body> tags.
Headings (<h1> to <h6>)
Headings are used for titles and subtitles. <h1> is the most important, and <h6> is the least.
<body>
<h1>Your Name</h1>
<h2>About Me</h2>
</body>Paragraphs (<p>)
The <p> tag is for any block of text.
<body>
<h1>Your Name</h1>
<h2>About Me</h2>
<p>I am learning to code and this is my very first webpage! It's exciting to see how HTML works to structure content.</p>
</body>Lists (<ul> and <li>)
Let’s add a list of your hobbies. <ul> stands for “unordered list” (bullet points), and <li> stands for “list item.”
<body>
<h1>Your Name</h1>
<h2>About Me</h2>
<p>I am learning to code and this is my very first webpage! It's exciting to see how HTML works to structure content.</p>
<h3>My Hobbies</h3>
<ul>
<li>Reading</li>
<li>Gaming</li>
<li>Coding (now!)</li>
</ul>
</body>Images (<img>)
An image tag is self-closing. It needs two key attributes: src (source) for the image file and alt (alternative text) to describe the image for screen readers and if the image fails to load.
For now, let’s link to an image from the web.
<body>
...
<img src="https://via.placeholder.com/150" alt="A 150x150 placeholder image">
</body>Links (<a>)
A link, or “anchor” tag, wraps around text and uses an href (hypertext reference) attribute to know where to go.
<body>
...
<p>You can follow my progress on my (soon to be built) blog or find me on <a href="https://www.linkedin.com/">LinkedIn</a>.</p>
</body>Step 4: View Your Creation!
Your final index.html file should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Your Name's Page</title>
</head>
<body>
<h1>Your Name</h1>
<h2>About Me</h2>
<p>I am learning to code and this is my very first webpage! It's exciting to see how HTML works to structure content.</p>
<h3>My Hobbies</h3>
<ul>
<li>Reading</li>
<li>Gaming</li>
<li>Coding (now!)</li>
</ul>
<img src="https://via.placeholder.com/150" alt="A 150x150 placeholder image">
<p>You can follow my progress on my (soon to be built) blog or find me on <a href="https://www.linkedin.com/">LinkedIn</a>.</p>
</body>
</html>- Save the file.
- Find the index.html file in its folder on your computer.
- Double-click it.
It will open in your default web browser. And just like that… you’ve built a webpage!
What’s Next? Making It Look Good
Right now, your page probably looks pretty plain. That’s because we’ve only built the skeleton (HTML). We haven’t added any style.
In our next guide, we’ll dive into CSS (Cascading Style Sheets), the language we use to add colors, change fonts, and create beautiful layouts. Now that we have a structure, it’s time to give it some clothes.
Congratulations on taking your first, most important step. You are officially a web developer.