PHASE 1: FOUNDATIONS OF THE WEB
PHASE 2: TEXT & CONTENT ELEMENTS
PHASE 3: LINKS & MEDIA
PHASE 4: LISTS & TABLES
PHASE 5: FORMS
PHASE 6: SEMANTIC HTML
PHASE 7: HTML IN REAL WORLD
HTML = HyperText Markup Language
It is NOT a programming language.
It does NOT do logic. It does NOT calculate. It does NOT think.
It only:
👉 Structures content on a webpage.
💡 Real-life analogy:
If a website is a house:
Without HTML → nothing exists.
Let's break it like engineers:
That's it.
HTML is the first thing browser reads.
HTML works using tags.
Example:
<p>Hello</p>
Together they form an element.
📌 Important:
Most tags have:
<tag> content </tag>
But some are self-closing:
<img /> <br /> <hr />
Element = Opening tag + content + closing tag
Example:
<h1>Welcome</h1>
This whole thing is one element.
Attributes give extra information to tags.
Example:
<a href="https://google.com">Go to Google</a>
Here: href is an attribute.
General format:
<tag attribute="value">
💡 Engineering analogy:
Every HTML file starts like this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Let's decode it:
HTML ignores indentation, BUT humans don't.
Bad:
<html><body><h1>Hi</h1></body></html>
Good:
<html>
<body>
<h1>Hi</h1>
</body>
</html>Readable code = professional code.
Used to write notes in code:
<!-- This is a comment -->
Browser ignores it.
(Where your webpage finally starts looking alive)
Think of this phase like: 👉 Adding furniture inside the house structure we built in Phase 1.
HTML gives us 6 heading levels:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
📌 Important:
💡 Engineering analogy:
Think of headings like:
It creates a proper structure.
🚨 Common Mistake:
Don't use <h1> because it looks big.
Use headings for meaning, not size.
Size is CSS job.
Used to write normal text.
<p>This is a paragraph.</p>
Browser automatically adds spacing between paragraphs.
💡 Important:
HTML ignores extra spaces and line breaks.
This:
<p>Hello world</p>
Still shows: Hello world
HTML collapses whitespace.
Used when you want to break line manually.
Hello<br> World
Output: Hello
World
📌 Self-closing tag.
Creates a horizontal line.
<hr>
Used to separate sections visually.
💡 Engineering analogy:
Like dividing two sections in documentation.
Now comes something very important.
There are two types of formatting:
🔹 Bold Text
<b>Bold text</b> <strong>Important text</strong>
Difference:
👉 Use <strong> in real projects.
🔹 Italic Text
<i>Italic text</i> <em>Emphasized text</em>
Difference:
👉 <em> is better.
💡 Engineering thinking:
HTML is about meaning. CSS is about styling.
Preformatted text.
It keeps:
Example:
<pre>
def add(a, b):
return a + b
</pre>Without <pre>, indentation will break.
📌 You'll use this a LOT in your coding notes app.
Used in formulas.
H<sub>2</sub>O x<sup>2</sup>
Output: H2O x2
Used in math and chemistry content.
Bad thinking:
"I use whatever tag looks good."
Good thinking:
"I use tag based on meaning."
Example:
Wrong:
<b>Warning</b>
Better:
<strong>Warning</strong>
Because screen readers understand it.
💡 This matters for:
(This is where your website becomes a real website 🌍)
Without links, a website is just a digital poster.
With links → it becomes a network.
Used to create links.
Basic syntax:
<a href="https://google.com">Go to Google</a>
Breakdown:
💡 Real-life analogy:
Anchor tag is like a door.
href is where that door leads.
🔹 External Link
Goes to another website.
<a href="https://leetcode.com">LeetCode</a>
🔹 Internal Link
Goes to another page inside your project.
<a href="/about.html">About Page</a>
📌 In Next.js, this becomes <Link> component later.
<a href="https://google.com" target="_blank"> Open Google </a>
Opens in new tab.
💡 Use this for:
Adds tooltip on hover.
<a href="https://google.com" title="Search Engine"> Google </a>
Small thing. But makes site feel professional.
Adds images.
<img src="image.jpg" alt="Laptop image">
Breakdown:
🚨 VERY IMPORTANT: alt Attribute
If image fails to load, alt text appears.
Also:
💡 Engineering rule:
Never use <img> without alt.
Bad:
<img src="photo.jpg">
Good:
<img src="photo.jpg" alt="Team working on project">
🔹 Online Image
<img src="https://example.com/pic.jpg">
🔹 Local Image
<img src="images/pic.jpg">
Relative path matters.
<img src="pic.jpg" width="300" height="200">
⚠️ Not recommended in real projects.
Use CSS instead.
<audio controls> <source src="audio.mp3"> </audio>
controls → shows play button.
<video width="320" height="240" controls> <source src="video.mp4"> </video>
Adds video player.
Absolute:
https://example.com/page
Relative:
/about ../images/pic.jpg
Engineering analogy:
Use:
Wrong:
Using <button> to go to another page.
Correct:
Use <a> for navigation.
(This is where HTML becomes structured like real data)
Think of this phase like: 👉 Turning random notes into organized documentation.
Lists are used everywhere:
Used when order doesn't matter.
<ul> <li>Python</li> <li>HTML</li> <li>CSS</li> </ul>
Output: • Python • HTML • CSS
💡 Engineering thinking:
Use <ul> when sequence is not important.
Used when order matters.
<ol> <li>Install Python</li> <li>Write Code</li> <li>Run Program</li> </ol>
Output:
💡 Use <ol> when:
Lists inside lists.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>Used for:
<dl> <dt>HTML</dt> <dd>Structure of web</dd> <dt>CSS</dt> <dd>Styling of web</dd> </dl>
Good for documentation sites.
Tables are used to display structured data.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alex</td>
<td>20</td>
</tr>
</table>Breakdown:
💡 Engineering analogy:
Think of table like Excel sheet:
Better version:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>20</td>
</tr>
</tbody>
</table>Why use <thead> and <tbody>?
🔹 Colspan (Merge Columns)
<td colspan="2">Merged Cell</td>
🔹 Rowspan (Merge Rows)
<td rowspan="2">Merged</td>
Used when:
💡 Engineering thinking:
Like merging cells in Excel.
Old developers used tables to design whole websites.
That is WRONG.
Tables are only for tabular data.
Layout should be done using CSS.
This is where HTML becomes interactive.
Without forms: Website = brochure
With forms: Website = application
Examples:
All depend on forms.
<form> <input type="text"> </form>
<form> wraps all input fields.
Basic:
<input type="text">
But input has many types.
🔹 Text
<input type="text">
For names, search, etc.
🔹 Password
<input type="password">
Hides characters.
<input type="email">
Browser validates email format automatically.
🔹 Number
<input type="number">
Accepts only numbers.
🔹 Date
<input type="date">
Shows calendar.
🔹 Radio (Single Choice)
<input type="radio" name="gender"> Male <input type="radio" name="gender"> Female
Important:
Same name → only one can be selected.
🔹 Checkbox (Multiple Choice)
<input type="checkbox"> Python <input type="checkbox"> Java
Multiple allowed.
<label for="name">Name:</label> <input type="text" id="name">
Why use label?
This is VERY IMPORTANT.
<input type="text" name="username">
Backend reads data using name.
Without name → backend receives nothing.
<input type="text" placeholder="Enter your name">
Shows hint inside input.
<input type="email" required>
Browser prevents submission if empty.
For long text:
<textarea rows="4" cols="30"></textarea>
Used in:
<select> <option>India</option> <option>USA</option> </select>
Better UX than text input for fixed choices.
<button type="submit">Submit</button>
Important types:
<form action="/submit" method="POST">
🔹 GET vs POST
GET:
POST:
💡 Engineering thinking:
Now we move from beginner → professional.
Before HTML5, developers used:
<div>
for everything.
That created messy structure.
Now we use semantic tags.
Because:
🔹 <header>
Top section of page.
🔹 <nav>
Navigation links.
🔹 <main>
Main content of page.
Only one per page.
🔹 <section>
Logical grouping of content.
Like modules.
🔹 <article>
Independent content.
🔹 <aside>
Side content.
🔹 <footer>
Bottom section.
💡 Engineering analogy:
Semantic tags = labeled boxes.
Instead of random containers.
Search engines understand:
Better SEO ranking.
Screen readers depend on:
Real developers care about accessibility.
Now we move beyond tags.
Right-click → Inspect.
You can:
Professional developers use this daily.
Shows original HTML from server.
Good for:
If website is human body:
Static:
Dynamic:
Modern websites use:
But HTML is always foundation.