Learn HTML
A Step-by-Step, Easy-to-Understand Guide
for Absolute Beginners
Part 1 of your HTML → CSS → JavaScript → Git → GitHub journey
Table of Contents
Lesson 1 — What is HTML? 3
Lesson 2 — Your First HTML Page 4
Lesson 3 — Headings & Paragraphs 5
Lesson 4 — Text Formatting 6
Lesson 5 — Links 7
Lesson 6 — Images 8
Lesson 7 — Lists 9
Lesson 8 — Divs, Spans & Attributes 10
Lesson 9 — Tables 11
Lesson 10 — Forms 12
Lesson 11 — Semantic HTML5 13
Lesson 12 — Comments & Clean Code 14
Lesson 13 — Mini Project: Build a Profile Page 15
Cheat Sheet — Common Tags at a Glance 16
Each lesson has: a simple explanation, an example, a tip, and a "Try It Yourself" exercise. Go one lesson at a time —
don't rush!
LESSON 1
What is HTML?
HTML stands for HyperText Markup Language. It is not a programming language — it's a markup language, which
means it describes the structure of a webpage using "tags."
Think of HTML like the skeleton of a human body. It doesn't make the page pretty (that's CSS) and it doesn't make it
interactive (that's JavaScript) — it just defines what's on the page: this is a heading, this is a paragraph, this is a
picture.
How HTML Works
Every piece of content is wrapped in tags. A tag has an opening part and a closing part:
<p>This is a paragraph of text.</p>
The opening tag is <p> and the closing tag is </p> (notice the forward slash). Everything between them is the content.
TIP
Some tags don't need a closing tag because they don't wrap around content — like <img> or <br> . These are called
"self-closing" or "void" tags.
What You Need to Get Started
A text editor — VS Code is free and the most popular choice
A web browser — Chrome, Firefox, Edge, or Safari all work
That's it! No installation of HTML itself is needed — every browser understands it.
✏ TRY IT YOURSELF
Open a text editor (even Notepad works for now). Just get comfortable with the idea that you'll type code and save it
as a .html file. No need to write anything yet — that's Lesson 2!
LESSON 2
Your First HTML Page
Every HTML document follows the same basic skeleton. Let's break it down piece by piece.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my very first webpage.</p>
</body>
</html>
Part What it does
<!DOCTYPE html> Tells the browser "this is a modern HTML5 document"
<html> The root — wraps around the entire page
<head> Info about the page (not visible on screen)
<title> Text shown in the browser tab
<body> Everything visible on the page goes here
Saving and Viewing Your Page
1. Open your text editor and paste the code above
2. Save the file as [Link] (the name index is the standard "homepage" filename)
3. Find the file on your computer and double-click it — it opens in your browser!
⚠ WATCH OUT
Make sure the file ends in .html , not .txt . Some editors add .txt automatically — when saving, choose "All
Files" as the type if that happens.
✏ TRY IT YOURSELF
Create [Link] using the code above. Change "Hello, world!" to a greeting with your own name, save the
file, refresh your browser, and watch it update!
LESSON 3
Headings & Paragraphs
Text content is organized using headings and paragraphs.
Headings: h1 through h6
HTML has six levels of headings, from biggest ( <h1> ) to smallest ( <h6> ). Use <h1> for the main title of the page, and
smaller headings for sub-sections.
<h1>Main Title</h1>
<h2>A Section Heading</h2>
<h3>A Smaller Sub-section</h3>
Paragraphs
Regular blocks of text go inside <p> tags:
<p>This is a paragraph. Browsers automatically add
space above and below it.</p>
TIP
Only use one <h1> per page — it should describe what the whole page is about, like a book's title.
✏ TRY IT YOURSELF
In your [Link] , add an <h2> below your main heading, followed by two <p> paragraphs introducing yourself.
LESSON 4
Text Formatting
You can emphasize or style text inline using these common tags:
Tag Effect Example
<strong> Bold, important text Bold text
<em> Italic, emphasized text Italic text
<br> Line break (no closing tag) —
<hr> Horizontal divider line —
<small> Smaller text fine print
<mark> Highlighted text highlighted
<p>I am <strong>very</strong> excited to learn <em>HTML</em>!</p>
TIP
You'll sometimes see <b> and <i> — they look the same as <strong> and <em> but carry no real meaning. Prefer
<strong> / <em> since they also help screen readers.
✏ TRY IT YOURSELF
Rewrite one of your paragraphs from Lesson 3 so it has at least one bold word and one italic word.
LESSON 5
Links
Links are what make the web a "web" — they connect pages together using the <a> (anchor) tag.
<a href="[Link] Google</a>
The href is an attribute — extra information inside the opening tag that tells the browser where the link goes.
Linking to Other Pages on Your Own Site
<a href="[Link]">About Me</a>
Opening a Link in a New Tab
<a href="[Link] target="_blank">Google</a>
TIP
An "attribute" always goes inside the opening tag, as name="value" . You'll see this pattern everywhere in HTML.
✏ TRY IT YOURSELF
Add a link at the bottom of your page to your favorite website. Then make it open in a new tab.
LESSON 6
Images
Images are added with the <img> tag — it's self-closing, so it never wraps content.
<img src="[Link]" alt="A sleeping orange cat">
Attribute Purpose
src The image file path or URL (required)
alt Text shown if the image fails to load, and read aloud by screen readers (required for accessibility)
width / height Size in pixels (optional)
You can use a local file in the same folder, or a full web address:
<img src="photos/[Link]" alt="Me at the beach">
<img src="[Link] alt="Company logo">
⚠ WATCH OUT
Never skip the alt attribute — it's required for accessibility and it's considered a bad practice to leave it out.
✏ TRY IT YOURSELF
Find any image on your computer, put it in the same folder as your [Link] , and add it to your page with a
meaningful alt description.
LESSON 7
Lists
HTML has two main types of lists.
Unordered List (bullet points)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
Ordered List (numbered)
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Eat breakfast</li>
</ol>
Every item — in either type — goes inside an <li> (list item) tag. Lists can also be nested inside each other for sub-
items.
TIP
Use <ul> when order doesn't matter (a shopping list) and <ol> when it does (step-by-step instructions).
✏ TRY IT YOURSELF
Add an unordered list of 3 of your hobbies, and an ordered list of the first 3 steps of your morning routine.
LESSON 8
Divs, Spans & Attributes
<div> and <span> are generic "containers" with no meaning of their own — they exist purely to group content, usually
so CSS or JavaScript can target them later.
Tag Type Use
<div> Block-level (starts on a new line) Group a whole section
<span> Inline (stays in the flow of text) Wrap a small piece of text
<div class="card">
<h3>Product Name</h3>
<p>This is a <span class="highlight">great</span> product.</p>
</div>
The class and id Attributes
These don't change appearance by themselves (that comes later, with CSS) — they're labels you attach so you can style
or select elements:
class="..." — can be reused on many elements
id="..." — must be unique, only one element per page
✏ TRY IT YOURSELF
Wrap your introduction paragraph from Lesson 3 in a <div> with class="intro" . We'll style it once CSS lessons
begin!
LESSON 9
Tables
Tables display data in rows and columns.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sara</td>
<td>28</td>
</tr>
<tr>
<td>Musa</td>
<td>34</td>
</tr>
</table>
Tag Meaning
<table> The whole table
<tr> Table row
<th> Header cell (bold, top row)
<td> Regular data cell
TIP
Tables are for tabular data (spreadsheet-like info) — never use them just to arrange a page's layout. That's a job for
CSS.
✏ TRY IT YOURSELF
Make a small table listing 3 of your favorite movies and their release years, with a header row.
LESSON 10
Forms
Forms let users type in information and submit it — logins, search boxes, sign-up forms, etc.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
Input type Used for
text Plain single-line text
email Validates an email format
password Hides typed characters
checkbox Yes/no toggle
radio Pick one from a group
TIP
Always pair an <input> with a <label> , and connect them using matching for and id values — it helps
accessibility and lets users click the label to focus the input.
✏ TRY IT YOURSELF
Build a simple contact form with a name field, an email field, and a submit button.
LESSON 11
Semantic HTML5
"Semantic" tags describe the meaning of a section, not just its appearance. Instead of using <div> everywhere, HTML5
gives us more descriptive tags:
Tag Meaning
<header> Top section — logo, site title, nav
<nav> Navigation links
<main> The primary content of the page
<section> A thematic grouping of content
<article> Self-contained content (a blog post, a card)
<footer> Bottom section — copyright, links
<header>
<h1>My Website</h1>
<nav><a href="#">Home</a> <a href="#">About</a></nav>
</header>
<main>
<article>
<h2>My First Post</h2>
<p>Post content here...</p>
</article>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
TIP
Semantic tags make your page easier for search engines and screen readers to understand — and easier for you to
read six months from now!
✏ TRY IT YOURSELF
Restructure your page using <header> , <main> , and <footer> instead of plain <div> s.
LESSON 12
Comments & Clean Code
Comments are notes in your code that the browser ignores — useful for leaving reminders or temporarily disabling code:
<!-- This is a comment, it won't show on the page -->
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden/disabled</p> -->
Good Habits Going Forward
Indent nested tags consistently (2 or 4 spaces)
Always close your tags
Use lowercase for tag names and attributes
Give meaningful class / id names ( class="nav-bar" , not class="thing1" )
✏ TRY IT YOURSELF
Add a comment above each major section of your page (header, main, footer) explaining what it does.
LESSON 13
Mini Project: Build a Profile Page
Time to put it all together! Build a simple "About Me" page using everything from Lessons 1–12.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<nav>
<a href="#about">About</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<img src="[Link]" alt="Photo of Jane Doe">
<p>I'm a <strong>web developer</strong> learning <em>HTML</em>.</p>
</section>
<section id="hobbies">
<h2>Hobbies</h2>
<ul>
<li>Reading</li>
<li>Hiking</li>
<li>Coding</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="email">Email me:</label>
<input type="email" id="email" name="email">
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Jane Doe</p>
</footer>
</body>
</html>
✏ TRY IT YOURSELF
Build your own version with your real name, photo, hobbies, and a contact form. This will become the foundation you
add CSS styling to next!
Cheat Sheet — Common Tags at a Glance
Tag Purpose
<!DOCTYPE html> Declares HTML5 document
<html> Root of the page
<head> Metadata (not visible)
<title> Browser tab text
<body> Visible content
<h1>–<h6> Headings, biggest to smallest
<p> Paragraph
<strong> / <em> Bold / italic
<a href=""> Link
<img src="" alt=""> Image
<ul> / <ol> / <li> Bullet / numbered list / item
<div> / <span> Generic block / inline container
<table><tr><th><td> Table, row, header cell, data cell
<form><input><label> Form, field, field label
<header><nav><main><section><article><footer> Semantic page structure
<!-- comment --> Note the browser ignores
Next up: CSS — where your page finally gets colors, fonts, spacing, and layout. Great work getting through HTML!
Made for your personal learning journey — HTML → CSS → JavaScript → Git → GitHub