? HTML Introduction

Lesson 1 · Beginner · 10 min read

? What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on web pages.

Think of HTML as the skeleton of a website. It tells the browser what elements to display — headings, paragraphs, images, links, and more.

HTML is a markup language, not a programming language. It uses tags to label pieces of content.

? Key Point

Every website uses HTML. It works with CSS (styling) and JavaScript (behavior).

Why Learn HTML?

Foundation of all web development.
Used in websites, emails, and apps.
Easy to learn — first step to becoming a developer.

? How HTML Works

Write HTML code in a text file.
Save the file with a .html extension.
Open the file in a web browser.
The browser reads the HTML and displays the content.

Key Terms

Term	Meaning
Tag	HTML command in angle brackets, e.g., `<p>`
Element	Opening tag + content + closing tag
Attribute	Extra info added to a tag, e.g., `href`

? Best Practices

Use lowercase tags: <p> not <P>
Always close your tags.
Indent nested elements for readability.
Start every file with <!DOCTYPE html>

? Basic Structure

Every HTML page follows this structure:

<!-- Basic HTML Document --> <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h1> <p>My first paragraph.</p> </body> </html>

Parts explained:

<!DOCTYPE html> — Tells the browser this is HTML5.
<html> — Root element wrapping everything.
<head> — Hidden info (title, meta tags).
<title> — Text shown in the browser tab.
<body> — Everything visible on the page.

Opening & Closing Tags

<p>This is a paragraph.</p>

Most tags need a closing tag with a / slash.

Self-Closing Tags

<br> <!-- line break --> <hr> <!-- horizontal line --> <img> <!-- image (uses attributes) -->

These tags don't need a closing tag.

? Examples

? Example 1 — Basic Page

A simple page with a heading and paragraph.

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h1> <p>This is my first web page.</p> </body> </html>

? Output

Hello World

This is my first web page.

? Example 2 — Page with Multiple Sections

Using headings to organize content into sections.

<!DOCTYPE html> <html> <head> <title>About Me</title> </head> <body> <h1>Welcome to My Website</h1> <p>Hi! My name is John.</p> <h2>My Hobbies</h2> <p>I enjoy reading and coding.</p> <h2>My Goals</h2> <p>I want to become a web developer.</p> </body> </html>

? Output

Welcome to My Website

Hi! My name is John.

My Hobbies

I enjoy reading and coding.

My Goals

I want to become a web developer.

? Example 3 — Page with List and Link

Adding a bullet list and a clickable link.

<!DOCTYPE html> <html> <head> <title>My Skills</title> </head> <body> <h1>My Skills</h1> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>Visit <a href="https://google.com">Google</a></p> </body> </html>

? Output

My Skills

HTML
CSS
JavaScript

Visit Google

? Live Code Editor

Write HTML code below and see the result instantly. Click Run Code to update the preview.

✏️ HTML Code

?️ Live Preview

? Try These Changes

Change the text inside <h1> to your name.
Add a new paragraph <p>I am learning HTML.</p>
Add a line break <br> between two lines.
Change the title inside <title>.

✏️ Practice Exercises

Exercise 1 — Simple Homepage

Create a page with the title "My Homepage" and a heading that says "Welcome to My Site".

Exercise 2 — Two Paragraphs

Write a page with two paragraphs: "I love coding." and "HTML is fun to learn."

Exercise 3 — Multiple Headings

Create a page with h1, h2, and h3 headings with different text.

Exercise 4 — Fruit List

Write a page with a list of 5 fruits using <ul> and <li>.

Exercise 5 — Favorite Website Link

Create a link to your favorite website with the text "Click here to visit my favorite site".

? Mini Project

My Personal Introduction Page

Create a page that introduces yourself to the world.

Requirements

Proper HTML structure: <!DOCTYPE html>, <html>, <head>, <body>
A meaningful <title>
At least one <h1> heading
At least two <p> paragraphs
A list (<ul> or <ol>)
At least one <a> link

✅ Summary

You learned:

HTML is a markup language for structuring web pages.
Every HTML document needs <!DOCTYPE html>, <html>, <head>, and <body>.
Tags come in pairs (opening + closing) or are self-closing.
Headings (h1–h6), paragraphs (p), lists (ul/li), and links (a) are basic building blocks.

? Next Lesson

HTML Editors — Learn the tools to write HTML code efficiently.