1️⃣ BASIC HTML STRUCTURE
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
🔍 Line-by-Line Explanation
<!DOCTYPE html>
This tells the browser:
“This document is written in HTML5.”
It is not a tag.
It is a declaration that ensures the browser uses the correct version of HTML.
If this is missing, the browser may enter quirks mode (old rendering behavior).
<html>
This is the root element.
Everything inside the webpage must be inside the <html> tag.
Think of it as the container of the entire website.
<head>
The <head> contains metadata (information about the page).
This is NOT visible on the webpage itself.
Inside <head>, we usually put:
Title
CSS links
Meta tags
Scripts
<title>My First Webpage</title>
This sets the title shown in the browser tab.
If students open multiple tabs, this is what identifies the page.
Important for:
User experience
SEO (Search Engine Optimization)
<body>
Everything inside <body> is visible on the webpage.
This is where:
Text
Images
Links
Forms
Tables
are displayed.
<h1>Hello World!</h1>
<h1> is a heading tag.
It represents the most important heading on the page.
HTML has:
<h1> (largest, most important)
<h2>
<h3>
<h4>
<h5>
<h6> (smallest)
Important rule:
You should only have one <h1> per page for proper structure.
<p>This is my first HTML page.</p>
<p> stands for paragraph.
It separates text into readable blocks.
Browsers automatically add spacing before and after paragraphs.
2️⃣ HEADINGS
Code:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
🔍 Explanation
Headings are used to structure content hierarchically.
Think of it like:
<h1> → Book Title
<h2> → Chapter Title
<h3> → Section Title
They are not just for making text big.
They are important for:
SEO
Accessibility
Screen readers
Page organization
Search engines use headings to understand page structure.
3️⃣ PARAGRAPH
Code:
<p>This is a paragraph.</p>
🔍 Explanation
The <p> tag defines a paragraph.
Browsers:
Automatically add spacing
Wrap text inside it
Important concept:
HTML ignores extra spaces.
If you type:
<p>Hello World</p>
It will display:
Hello World
Because HTML collapses multiple spaces into one.
4️⃣ TEXT FORMATTING
Code:
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strong>Important</strong>
<em>Emphasized</em>
🔍 Explanation
<b>
Makes text bold visually.
But it has no semantic meaning.
<strong>
Also makes text bold.
BUT it means:
“This text is important.”
Search engines and screen readers recognize it.
So <strong> is better than <b>.
<i>
Makes text italic visually.
No semantic meaning.
<em>
Makes text italic AND indicates emphasis.
Screen readers change tone when reading it.
Better than <i>.
<u>
Underlines text.
Not commonly used anymore because underlined text looks like links.
5️⃣ LISTS
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
🔍 Explanation
<ol> means ordered list (numbered).
<li> means list item.
The browser automatically numbers them:
1. Item 1
2. Item 2
Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
🔍 Explanation
<ul> means unordered list (bullets).
Browser automatically adds bullet points.
Used for:
Navigation menus
Feature lists
Product lists
6️⃣ LINKS
Code:
<a href="[Link] Google</a>
🔍 Explanation
<a> stands for anchor.
It creates hyperlinks.
href
Hypertext Reference.
This tells the browser where to go.
When clicked:
Browser loads that URL.
If linking to another page in same folder:
<a href="[Link]">About</a>
7️⃣ IMAGES
Code:
<img src="[Link]" alt="Description of image">
🔍 Explanation
<img> displays an image.
It does NOT have a closing tag.
It is self-closing.
src
Source of the image.
Can be:
Local file
Online URL
alt
Alternative text.
Very important because:
Screen readers use it
Displays if image fails to load
Improves accessibility
Required for SEO
8️⃣ TABLES
Code:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
🔍 Explanation
<table>
Creates table container.
border="1"
Old way to add border.
Today we use CSS instead.
<tr>
Table row.
<th>
Table header.
Text is bold and centered automatically.
<td>
Table data cell.
Normal cell.
Structure logic:
table
→ row
→ cell
9️⃣ FORMS
Code:
<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
Password: <input type="password"><br>
<input type="submit" value="Submit">
</form>
🔍 Explanation
<form>
Container for user input.
It sends data to a server.
<input type="text">
Single-line text field.
<input type="email">
Validates email format automatically.
If user types wrong format, browser shows error.
<input type="password">
Hides typed characters.
<input type="submit">
Creates submit button.
When clicked:
Sends form data.
<br>
Line break.
Moves content to next line.
🔟 SEMANTIC TAGS
Code:
<header>
<nav>
<main>
<section>
<article>
<footer>
🔍 Explanation
These tags improve structure.
<header>
Top part of webpage.
Usually contains:
Logo
Title
<nav>
Navigation links.
Menus.
<main>
Main content area.
Only one per page.
<section>
Groups related content.
<article>
Independent content.
Example:
Blog post
News article
<footer>
Bottom of webpage.
Usually contains:
Copyright
Contact info
🎓 IMPORTANT CONCEPTS YOU SHOULD TELL STUDENTS
1. HTML is structure, not design.
2. Always close your tags.
3. Tags must be properly nested.
4. Indentation makes code readable.
5. Use semantic tags for professional coding.