Build a Personal Profile Page with HTML: Learn HTML Basics Step by Step

Prakruthi Rao — Wed, 12 Feb 2025 19:23:04 +0000

Intro

Hey there! Have you ever wondered how web pages are created? Well, it all starts with HTML—the language of the web. In this guide, you’ll learn the most important HTML tags while building your very own Personal Profile Page. Don't worry if you’re new to coding. We'll keep things simple and fun.

Step 1: The Skeleton of Every Web Page

Imagine HTML as the skeleton of your web page—it gives structure to everything. Let’s start by creating the most basic HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Profile Page</title>
</head>
<body>
  <h1>Welcome to My Profile Page</h1>
</body>
</html>

What is all that about?

!DOCTYPE html: This line tells the browser, "Hey, I’m using HTML5!"
html: This is like the container for your entire page. Everything goes inside this tag.
head: Think of this as the backstage of your web page. It’s where the settings go (like the title).
title: Sets the name of your page that appears on the browser tab.
body: This is the main part—where all the visible content lives (like text, images, and links).

Step 2: Introducing Yourself with Headings and Paragraphs

Time to add a short introduction about yourself. Use headings to organize your page and paragraphs to describe things.

<h2>About Me</h2>
<p>Hello! I’m learning how to create web pages with HTML. I love technology, and this is my very first project!</p>

What does this mean?

Headings (h1 to h6): Used for titles and section headings. h1 is the biggest, h6 is the smallest.
Paragraph (p): For regular text, like descriptions or stories. Think of it as a sentence or block of text.

The Final Code

Here’s the full code for your Personal Profile Page:

<!DOCTYPE html>
<html>
<head>
  <title>My Profile Page</title>
</head>
<body>
  <h1>Welcome to My Profile Page</h1>
  <h2>About Me</h2>
  <p>Hello! I’m learning how to create web pages with HTML. I love technology, and this is my very first project!</p>
</body>
</html>

Activity! Make it your Own...

Now it’s your turn! Try these:

Change the title: Make it something fun, like "My Awesome Profile" or "Welcome to My World". Add another heading (h3): Maybe something like "My Hobbies". Write a paragraph (p) about your hobbies or favorite activities.