1. What is HTML?
HTML stands for HyperText Markup Language. It is the standard language
used to create web pages.
Think of it like this:
"If a website were a house, HTML is the bricks and structure — it builds what
you see."
HTML is not a programming language — it is a markup language, meaning
it uses tags to describe and structure content on a page.
2. What TO ALWAYS Keep in Mind
Before teaching anything else, drill these rules into learners:
Rule 1: Every tag you open must be closed
Rule 2: HTML files must be saved as .html not .txt
Rule 3: Browsers forgive mistakes — but that doesn't mean the code is correct
Rule 4: Spacing and indentation make your code readable
Rule 5: Always work inside a folder — keep all files together
Rule 6: File names must have no spaces and no capital letters
Rule 7: Always preview your work in a browser after every change
3. How HTML Works
HTML uses tags to mark up content. A tag is a keyword inside angle brackets:
html
<tagname> content goes here </tagname>
Most tags come in pairs:
Opening Tag Closing Tag What it means
Start and end a
<h1> </h1>
heading
Start and end a
<p> </p>
paragraph
<b> </b> Start and end bold text
Opening Tag Closing Tag What it means
Some tags are self-closing (they don't need a closing tag):
html
<img /> <!-- image -->
<br /> <!-- line break -->
<hr /> <!-- horizontal line -->
4. The Basic Structure of Every HTML Page
Every HTML page must have this structure — no exceptions:
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title Here</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
5. EXPLANATION OF DIFFERENT PARTS
Part Purpose
<!DOCTYPE html> Tells the browser this is an HTML5 document
<html> The root — everything lives inside this tag
<head> Contains behind-the-scenes info (title, links, styles)
Part Purpose
<title> The text that appears on the browser tab
<body> Everything the user sees on the page
6. Headings
HTML has 6 levels of headings — <h1> is the biggest, <h6> is the smallest:
html
<h1>This is Heading 1 - Biggest</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6 - Smallest</h6>
There should only be one <h1> per page — it is the main title.
7. Paragraphs and Text Formatting
html
<p>This is a paragraph of text.</p>
<b>This text is bold</b>
<i>This text is italic</i>
<u>This text is underlined</u>
<br /> <!-- Line break — moves to next line -->
<hr /> <!-- Horizontal line — a divider -->
8. Lists
Unordered list (bullet points):
html
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Mangoes</li>
</ul>
Ordered list (numbered):
html
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Go to school</li>
</ol>
9. Tables
html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Zama</td>
<td>18</td>
<td>Durban</td>
</tr>
<tr>
<td>Sipho</td>
<td>17</td>
<td>Johannesburg</td>
</tr>
</table>
Tag Meaning
<table> Creates the table
<tr> Table Row
<th> Table Heading (bold by default)
<td> Table Data (regular cell)
[Link] Styling with the style Attribute
You can add color and style directly to tags:
html
<p style="color: red;">This text is red</p>
<p style="color: blue; font-size: 20px;">Blue and bigger</p>
<body style="background-color: lightyellow;">
[Link] Your File Correctly in Notepad
This is where most learners go wrong. Always:
1. Open Notepad → write your code
2. Click File → Save As
3. Change Save as type to All Files (*.*)
4. Name the file [Link]
5. Save it inside your project folder