Beginner • HTML • Web Structure

🌐 Build Your Personal Profile Page

Progress: 0 of 7 exercises complete

📋 What You'll Build

In this interactive lesson, you'll learn HTML by building your own personal profile page! You'll add headings, paragraphs, lists, links, and images - all the building blocks of web pages.

How it works: Type HTML code directly into the editors, click "Run Code" to see your page come to life, and check your answers to unlock the next exercise!

🎯 What is HTML?

HTML stands for HyperText Markup Language. It's the skeleton of every website - it tells the browser what content to show and how to structure it.

🌍 Why HTML Matters - The Foundation of the Web

Every single website you've ever visited - from Google to YouTube to your favorite game sites - is built with HTML. It's literally the foundation of the entire internet!

Think of building a house:

HTML = The structure (walls, floors, rooms)
CSS = The decoration (paint, furniture, style)
JavaScript = The functionality (lights that turn on, doors that open)

Without HTML, you can't have a website - just like you can't decorate a house that hasn't been built yet!

📚 What Does "HyperText Markup Language" Actually Mean?

Let's break down this fancy name:

HyperText = Text that links to other text (like clickable links that take you to other pages!)
Markup = Adding special symbols/tags to regular text to give it meaning
Language = A set of rules for communicating (like English or Spanish, but for browsers!)

In simple terms: HTML is a way to write text with special instructions that tell browsers how to display it and connect it to other pages.

🎭 How Browsers Read HTML

When you visit a website, here's what happens behind the scenes:

Your browser (Chrome, Firefox, Safari, etc.) requests the HTML file from a server
The server sends back the HTML code (just text!)
Your browser reads the HTML tags and interprets them
The browser builds a visual page based on those instructions
You see the final formatted webpage!

Amazing fact: Your browser is constantly converting HTML code into visual pages millions of times per day. Every webpage you see is HTML being interpreted in real-time!

📖 Understanding HTML Tags - The Building Blocks

HTML uses tags to mark up content. Think of tags as instructions that tell the browser "this is a heading" or "this is a paragraph".

🏷️ What Are Tags? (The Instructions)

Tags are like labels or instructions wrapped around your content. They tell the browser exactly how to treat each piece of information.

Real-world analogy: Think of a package delivery:

The opening tag is like writing "FRAGILE" on a box - it tells the handler "be careful with this"
Your content is the actual item inside the box
The closing tag is like sealing the box with "END OF FRAGILE ITEMS"

Without the labels, the delivery person wouldn't know how to handle the package!

Opening Tag

<h1> - Starts an element

Content

Your text or other elements

Closing Tag

</h1> - Ends the element

🔍 How Opening and Closing Tags Work

Why do we need BOTH opening and closing tags?

The opening tag tells the browser where an element starts, and the closing tag tells it where the element ends. Without both, the browser wouldn't know what content belongs to that element!

Example:

<p>This is a paragraph</p>

<p> = Opening tag (starts the paragraph)
This is a paragraph = Content (what's inside)
</p> = Closing tag (ends the paragraph) - notice the forward slash /

⚠️ Important: The closing tag MUST have a forward slash (/) before the tag name. Without it, the browser thinks it's another opening tag!

What happens if you forget the closing tag?
The browser will keep treating everything after the opening tag as part of that element, which can mess up your entire page layout!

📦 Understanding Attributes

What are attributes?

Attributes provide extra information about an element. They go inside the opening tag and follow this pattern:

<tag attributeName="value">content</tag>

Example with a link:

<a href="https://google.com">Click here</a>

href = Attribute name (tells WHERE the link goes)
"https://google.com" = Attribute value (the actual URL)
Attribute values MUST be in quotes!

📦 Real-World Analogy: Containers

Think of HTML tags like labeled containers:

The opening tag is like opening a labeled box (<h1> = "This box contains a heading")
The content is what you put inside the box
The closing tag is like sealing the box shut (</h1> = "End of heading box")

Just like you can't stack things in an open box without a bottom, you need both tags to properly contain your content!

🪆 Nesting Elements

What is nesting?

You can put HTML elements INSIDE other HTML elements. This is called nesting.

Example:

<div>
    <h1>My Title</h1>
    <p>This paragraph is inside the div</p>
</div>

Rules for nesting:

The inner element must be completely closed BEFORE you close the outer element
Think of it like Russian dolls - the smaller doll must fit completely inside the larger one
Wrong: <div><p>Text</div></p> ❌
Right: <div><p>Text</p></div> ✅

⚠️ Common Beginner Mistakes (And How to Avoid Them!)

Mistake #1: Forgetting the Closing Tag

<h1>My Heading
<p>My paragraph</p>

❌ The <h1> was never closed! This will make everything after it part of the heading.

✅ Fix: <h1>My Heading</h1>

Mistake #2: Forgetting the Forward Slash in Closing Tags

<p>Hello<p>

❌ The second <p> should be </p> with a forward slash!

✅ Fix: <p>Hello</p>

Mistake #3: Mixing Up the Order (Wrong Nesting)

<div><p>Text</div></p>

❌ The <p> starts inside the <div>, but closes outside it!

✅ Fix: <div><p>Text</p></div>

Mistake #4: Forgetting Quotes Around Attributes

<img src=photo.jpg>

❌ The filename needs to be in quotes!

✅ Fix: <img src="photo.jpg">

Mistake #5: Using the Wrong Tag Name in Closing Tag

<h1>Title</h2>

❌ Started with <h1> but closed with </h2> - they must match!

✅ Fix: <h1>Title</h1>

🔧 Debugging Tips - When Your Code Doesn't Work

Don't worry if your code doesn't work the first time - this happens to ALL programmers, even experts! Here's how to fix it:

Step 1: Check Your Tags Match

Every <tag> needs a </tag>
Count them - you should have equal numbers!
Make sure they have the same name

Step 2: Look for the Forward Slash /

Closing tags MUST have a / before the tag name
Example: </p> not <p>

Step 3: Check Your Nesting

Tags should close in reverse order from how they opened
Think: First opened, last closed!

Step 4: Look for Missing Quotes

All attribute values need quotes: src="..."
Make sure you have BOTH opening and closing quotes

Pro Tip: If you're stuck, try commenting out parts of your code to find which line is causing the problem!

💡 Best Practices - Writing Clean HTML

1. Use Indentation (Spacing)

This makes your code WAY easier to read:

<div>
    <h1>Title</h1>
    <p>Paragraph</p>
</div>

Notice how the inner tags are indented? This shows they're inside the <div>!

2. Use Meaningful Tag Names

<h1> for your main title (only use ONE per page!)
<h2> for section headings
<p> for paragraphs of text

3. Add Comments to Remember What You Did

<!-- This is a comment - the browser ignores it -->
<h1>My Website</h1>
<!-- Main content section below -->
<p>Welcome to my site!</p>

Comments help you (and others) understand your code later!

🛠️ Interactive Exercises: Build Your Profile!

🎓 How These Exercises Work

Here's what you'll do:

Read the instructions carefully for each exercise
Type your HTML code directly into the text box
Click "Run Code" to see your code come to life in the preview area
Click "Check Answer" to verify you got it right
When you pass, the next exercise unlocks automatically!

💡 Important Tips:

Take your time - there's no rush!
Use the "Run Code" button frequently to test your work
If you get stuck, click the "Hint" button for help
You can retry as many times as you need - mistakes are part of learning!
Each exercise builds on the previous one, so don't skip ahead

Exercise 1: Your First HTML Tags

Not Started

Goal: Create a heading and a paragraph about yourself.

📚 What You Need to Know:

The <h1> Tag (Heading 1):

Creates the largest, most important heading on your page
Format: <h1>Your heading text here</h1>
You MUST have both opening <h1> and closing </h1> tags
The closing tag has a forward slash (/) before h1

The <p> Tag (Paragraph):

Creates a paragraph of text
Format: <p>Your paragraph text here</p>
Also needs both opening <p> and closing </p> tags
The browser automatically adds spacing above and below paragraphs

📝 Step-by-Step Instructions:

Type <h1> to start your heading
Type your name or a title
Type </h1> to close the heading (don't forget the /!)
Press Enter to go to the next line
Type <p> to start your paragraph
Write a sentence about yourself
Type </p> to close the paragraph

✅ Complete Example:

<h1>Jane Smith</h1>
<p>I'm a student learning web development!</p>

<!-- Type your HTML here -->

Hint: Replace "Your Name Here" with your actual name, and write something interesting about yourself in the paragraph!

Click "Run Code" to see your page!

Exercise 2: Headings and Multiple Paragraphs

Locked 🔒

Goal: Use different heading sizes and create multiple paragraphs.

📚 What You Need to Know:

Heading Hierarchy (6 levels):

<h1> - Biggest heading (use once per page for the main title)
<h2> - Second level (for major sections)
<h3> - Third level (for subsections)
<h4>, <h5>, <h6> - Smaller headings (less common)

Why use different heading levels?

Think of headings like an outline for an essay:

<h1> is your essay title
<h2> are your main section headings
<h3> are subsections within those sections

Multiple Paragraphs:

You can have as many <p> tags as you want! Each one creates a new paragraph with spacing.

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

📝 What to do:

Use <h1> for your name (main title)
Use <h2> to create section headings like "About Me" or "My Interests"
Under each <h2>, write at least one paragraph
Remember: every opening tag needs a closing tag!

<!-- Add headings and paragraphs about yourself -->

Hint: Use <h1> for your name, <h2> for section headings, and <p> for paragraphs about yourself!

Complete Exercise 1 to unlock...

Exercise 3: Lists and Links

Locked 🔒

Goal: Create a list of your hobbies and add a link.

📚 What You Need to Know:

Creating Lists - Two Tags Working Together:

Lists need TWO types of tags that work as a team:

<ul> = "Unordered List" (the container for the whole list)
<li> = "List Item" (each individual bullet point)

How it works:

<ul>                    <!-- Start the list container -->
    <li>First item</li>    <!-- First bullet point -->
    <li>Second item</li>   <!-- Second bullet point -->
    <li>Third item</li>    <!-- Third bullet point -->
</ul>                   <!-- Close the list container -->

⚠️ Important:

The <li> tags must be INSIDE the <ul> tags (this is nesting!)
Each <li> needs its own closing </li> tag
The browser automatically adds bullet points to each <li>

Creating Links - Using Attributes:

Links use the <a> tag ("a" stands for "anchor") with a special href attribute:

Anatomy of a Link:

<a href="https://github.com">Click here</a>

<a = Start of the link tag
href="https://github.com" = Attribute that tells WHERE to go (must have quotes!)
> = End of opening tag
Click here = The clickable text that users see
</a> = Closing tag

📝 Step-by-Step for Lists:

Type <ul> to start the list container
Press Enter and type <li>
Type your first hobby
Type </li> to close that list item
Repeat steps 2-4 for each hobby
Type </ul> to close the list container

📝 Step-by-Step for Links:

Type <a href="
Type the URL (like https://github.com)
Type "> to close the opening tag
Type the text you want to be clickable
Type </a> to close the link

<!-- Create a list of hobbies -->

Hint:

Replace "Hobby 1, 2, 3" with your actual hobbies
You can add more <li> items!
Change the link to point to your real profile (or keep it as an example)

Complete Exercise 2 to unlock...

Exercise 4: Adding Images

Locked 🔒

Goal: Add an image to your profile page.

📚 What You Need to Know:

The <img> Tag - A Special Self-Closing Tag:

Unlike other tags, <img> doesn't have a separate closing tag! It's self-closing because images don't contain content - they ARE the content.

Anatomy of an Image Tag:

<img src="url-to-image.jpg" alt="Description of image">

Required Attributes (you MUST include both):

src = "Source" - where the image is located (URL or file path)
alt = "Alternative text" - describes the image for people who can't see it

Why is alt important?

Screen readers use it to describe images to blind users
If the image fails to load, this text shows instead
Search engines use it to understand what the image shows

Breaking Down the Image Tag:

<img src="https://via.placeholder.com/200" alt="Profile Picture">

<img = Start of image tag
src="https://via.placeholder.com/200" = Where the image comes from
alt="Profile Picture" = Description of the image
> = End of tag (no </img> needed!)

📝 Step-by-Step:

Type <img src="
Type the image URL (keep the example URL or use your own)
Type " alt="
Type a description of the image
Type "> to close the tag

✅ Common Mistakes to Avoid:

❌ <img src="url"></img> - Don't add a closing tag!
❌ <img src=url alt=text> - Must have quotes around attribute values!
✅ <img src="url" alt="text"> - Correct!

<!-- Add an image -->

Hint:

The src attribute is the image URL
The alt describes the image for accessibility
Notice <img> doesn't have a closing tag - it's self-closing!

Complete Exercise 3 to unlock...

Exercise 5: Create a Table

Locked 🔒

Goal: Learn to organize data using HTML tables.

📚 What You Need to Know:

Tables - Multiple Tags Working Together:

Tables are more complex because they need FOUR different tags working as a team:

<table> = The container for the entire table
<tr> = "Table Row" - creates each horizontal row
<th> = "Table Header" - cells in the header row (bold and centered)
<td> = "Table Data" - regular cells with data

How Tables Are Structured (Like a Grid):

Think of a table like a spreadsheet:

<table border="1">           <!-- Start table, border makes it visible -->
    <tr>                      <!-- First row (header row) -->
        <th>Name</th>          <!-- First column header -->
        <th>Age</th>           <!-- Second column header -->
    </tr>                     <!-- Close first row -->
    <tr>                      <!-- Second row (data row) -->
        <td>Jane</td>          <!-- First column data -->
        <td>25</td>            <!-- Second column data -->
    </tr>                     <!-- Close second row -->
</table>                  <!-- Close table -->

Understanding the Nesting:

The <table> wraps everything
Each <tr> must be inside the <table>
Each <th> or <td> must be inside a <tr>
Everything must be properly closed in reverse order

What's the border="1" attribute?

This is an attribute that adds visible borders to your table so you can see the cells. Without it, the table would be invisible!

📝 Step-by-Step to Build a Table:

Type <table border="1"> to start the table
Type <tr> to start the first row (header row)
For each column header: type <th>Header Text</th>
Type </tr> to close the header row
Type <tr> to start a data row
For each cell: type <td>Data</td>
Type </tr> to close the data row
Repeat steps 5-7 for more rows
Type </table> to close the table

✅ Key Rule: All cells in a row should have the same number of <th> or <td> elements, or your table will look broken!

<!-- Create a table of your skills and experience -->

Hint: Table structure:

<table> wraps the entire table
<tr> creates each row
<th> creates header cells (bold and centered)
<td> creates regular data cells
Add more rows with your own skills!

Complete Exercise 4 to unlock...

Exercise 6: Create a Form

Locked 🔒

Goal: Build an interactive form to collect user input.

📚 What You Need to Know:

Forms - Making Interactive Websites:

Forms let users type information and send it to a website. Think of them like paper forms, but digital!

The Tags You'll Need:

<form> = Container for all form elements
<label> = Text label that describes an input
<input> = Where users type information (self-closing!)
<textarea> = Multi-line text input
<button> = Clickable submit button

Understanding Labels and IDs:

Labels and inputs work together using matching IDs:

<label for="userName">Name:</label>
<input type="text" id="userName">

The label's for="userName" matches the input's id="userName"
This connects them so clicking the label focuses the input
Makes your form more user-friendly and accessible!

Different Input Types:

type="text" = Regular text input
type="email" = Email input (validates email format)
type="password" = Password input (hides characters)

What's placeholder?

The placeholder attribute shows hint text inside an input:

<input type="text" placeholder="Enter your name">

This gray text disappears when the user starts typing!

The <br> Tag - Another Self-Closing Tag:

<br> creates a line break (like pressing Enter). It's self-closing, so no </br> needed!

Complete Form Example with Explanation:

<form>                                      <!-- Start form -->
    <label for="name">Name:</label>         <!-- Label for name input -->
    <br>                                    <!-- Line break -->
    <input type="text" id="name" placeholder="Your name">  <!-- Text input -->
    <br><br>                                <!-- Two line breaks for spacing -->
    
    <label for="email">Email:</label>       <!-- Label for email -->
    <br>
    <input type="email" id="email" placeholder="you@email.com">  <!-- Email input -->
    <br><br>
    
    <label for="message">Message:</label>   <!-- Label for message -->
    <br>
    <textarea id="message" rows="4" placeholder="Your message"></textarea>  <!-- Text area -->
    <br><br>
    
    <button type="submit">Send</button>     <!-- Submit button -->
</form>                                     <!-- Close form -->

📝 Step-by-Step:

Type <form> to start the form container
For each input field:
- Add a <label for="uniqueId">Label Text</label>
- Add <br> for a line break
- Add the input with matching id="uniqueId"
- Add <br><br> for spacing
Add a <button type="submit"> at the end
Type </form> to close the form

⚠️ Important:

<input> is self-closing - no </input> needed
<textarea> DOES need a closing tag: </textarea>
The for attribute in labels must match an id in inputs

<!-- Create a contact form -->

Hint: Form elements:

<form> wraps all form elements
<label for="id"> labels inputs (for attribute matches input id)
<input type="text"> creates text input
<input type="email"> creates email input
<textarea> creates multi-line text input
<button type="submit"> creates submit button

Complete Exercise 5 to unlock...

Exercise 7: Build a Complete Profile Page!

Locked 🔒

Final Challenge: Combine everything you've learned to create a complete, professional profile page!

📚 What You Need to Know:

Putting It All Together:

This exercise tests everything you've learned! You'll use:

✅ <h1> and <h2> - Headings for structure
✅ <p> - Paragraphs for descriptions
✅ <ul> and <li> - Lists for hobbies/skills
✅ <a href=""> - Links to your profiles
✅ <img src="" alt=""> - Your profile picture
✅ <table> with <tr>, <th>, <td> - Data in a table
✅ <form> with <input> and <button> - Contact form

📋 Checklist - Your Page Must Include:

One <h1> heading (your name)
At least two <h2> section headings
Multiple <p> paragraphs
One <img> tag (profile picture)
One <ul> list with at least 3 <li> items
One <table> with headers and at least 2 data rows
One <form> with at least 2 inputs and a button
One <a> link

💡 Tips for Success:

Take your time - this is complex!
Make sure every opening tag has a closing tag (except self-closing tags like <img>, <br>, <input>)
Watch your nesting - inner elements must close before outer elements
Use the "Run Code" button frequently to see your progress
If something looks wrong, check for:
- Missing closing tags
- Missing quotes around attribute values
- Wrong nesting order

✅ Example Structure:

<h1>Your Name</h1>
<img src="url" alt="description">

<h2>About Me</h2>
<p>Your description...</p>

<h2>My Skills</h2>
<ul>
    <li>Skill 1</li>
    <li>Skill 2</li>
</ul>

<h2>Experience</h2>
<table border="1">
    <tr>
        <th>Skill</th>
        <th>Level</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Learning</td>
    </tr>
</table>

<h2>Contact</h2>
<form>
    <label for="email">Email:</label><br>
    <input type="email" id="email"><br><br>
    <button type="submit">Send</button>
</form>

<p><a href="url">Link text</a></p>

<!-- Build your complete profile page! -->

Hint: Make it yours!

Replace ALL placeholder text with your real information
Must include: <h1>, <h2>, <p>, <ul>, <img>, <table>, <form>, and <a>
Add more sections, skills, or table rows if you want!
Make sure every opening tag has a closing tag

Complete Exercise 6 to unlock...

🎉 Congratulations! 🎉

📚 Lesson Contents

🌐 Build Your Personal Profile Page

📋 What You'll Build

🎯 What is HTML?

🌍 Why HTML Matters - The Foundation of the Web

📚 What Does "HyperText Markup Language" Actually Mean?

🎭 How Browsers Read HTML

📖 Understanding HTML Tags - The Building Blocks

🏷️ What Are Tags? (The Instructions)

🔍 How Opening and Closing Tags Work

📦 Understanding Attributes

📦 Real-World Analogy: Containers

🪆 Nesting Elements

⚠️ Common Beginner Mistakes (And How to Avoid Them!)

🔧 Debugging Tips - When Your Code Doesn't Work

💡 Best Practices - Writing Clean HTML

🛠️ Interactive Exercises: Build Your Profile!

🎓 How These Exercises Work

📚 What You Need to Know:

📚 What You Need to Know:

📚 What You Need to Know:

📚 What You Need to Know:

📚 What You Need to Know:

📚 What You Need to Know:

📚 What You Need to Know: