Chapter 1: HTML Fundamentals

Learn to build the structure of web pages — the skeleton that everything else is built on.

What is HTML?

Text Tags

Links & Images

Lists & Tables

Forms

Semantic HTML

Quiz

What is HTML?

HTML is like the skeleton of a human body. Without bones, you'd be a blob on the floor. Without HTML, a website would just be a wall of plain text with no structure. HTML gives your content structure — headings, paragraphs, lists, images, forms, and more.

HTML stands for HyperText Markup Language. Let's break that down:

HyperText = text that can link to other pages (clickable links!)
Markup = you "mark up" content with tags to define its purpose
Language = a set of rules the browser understands

The Basic Structure

Every HTML page follows this skeleton. Edit the code and click Run to see how it looks:

HTML — Page Skeleton

<!DOCTYPE html>
<!-- This tells the browser: "This is an HTML5 page" -->

<html lang="en">
<!-- The root element - everything goes inside html -->

<head>
    <!-- The head contains INVISIBLE info about the page -->
    <meta charset="UTF-8">
    <title>My Page Title</title>
    <!-- This title appears on the browser TAB, not on the page -->
</head>

<body>
    <!-- The body contains everything VISIBLE on the page -->
    <h1>Welcome to My Website!</h1>
    <p>This is a paragraph of text.</p>
    <p>HTML is the foundation of every website.</p>
</body>

</html>

What is a Tag?

Tags are like labels on boxes. When you move house, you label boxes "Kitchen", "Bedroom", "Bathroom". HTML tags label your content: "this is a heading", "this is a paragraph", "this is a link".

A tag has three parts:

            <h1>
            Hello World
            </h1>
            
                ↑ opening tag   
                ↑ content (what you see)   
                ↑ closing tag (has /)

Forgetting the closing tag is the #1 beginner mistake! Every <tag> needs a </tag>. The closing tag has a forward slash / before the tag name.

Text Tags

HTML has different tags for different types of text. Try editing and running the code below:

HTML — Text Tags

<!-- HEADINGS: h1 is biggest, h6 is smallest -->
<h1>Main Title (h1 - use ONCE per page)</h1>
<h2>Section Title (h2)</h2>
<h3>Sub-section (h3)</h3>
<h4>Minor heading (h4)</h4>

<!-- PARAGRAPH: blocks of text -->
<p>This is a paragraph. It automatically adds space above and below. Every block of text should be inside a p tag.</p>

<p>This is another paragraph. Notice the gap between paragraphs.</p>

<!-- TEXT FORMATTING -->
<p>
    <strong>This is bold (important)</strong><br>
    <em>This is italic (emphasis)</em><br>
    <u>This is underlined</u><br>
    <s>This is strikethrough</s><br>
    <mark>This is highlighted</mark><br>
    <small>This is small text</small>
</p>

<!-- br = line break (new line without starting new paragraph) -->
<!-- hr = horizontal rule (a dividing line) -->
<hr>
<p>The line above is created by &lt;hr&gt; tag.</p>

<!-- TRY: Change the heading text, add your own paragraph below! -->

Tag Reference

Tag	What It Does	Example
`<h1>-<h6>`	Headings (h1=biggest, h6=smallest)	Page titles, section titles
`<p>`	Paragraph	Any block of text
`<strong>`	Bold + important	Key information
`<em>`	Italic + emphasis	Emphasized words
`<br>`	Line break	New line (no closing tag needed!)
`<hr>`	Horizontal line	Section divider (no closing tag!)
`<mark>`	Highlighted text	Important terms

Links & Images

A link (<a>) is like a door — click it and you go somewhere else. An image (<img>) is like a photo frame — it displays a picture on your page.

HTML — Links & Images

<h2>Links (Anchor Tags)</h2>

<!-- The "href" attribute tells the link WHERE to go -->
<p><a href="https://google.com">Go to Google</a></p>

<!-- target="_blank" opens in a NEW tab -->
<p><a href="https://google.com" target="_blank">Open Google in new tab</a></p>

<!-- Email link -->
<p><a href="mailto:hello@example.com">Send me an email</a></p>

<h2>Images</h2>

<!-- src = where the image is located -->
<!-- alt = description shown if image fails to load (also helps blind users) -->
<!-- width/height = size in pixels -->
<img src="https://via.placeholder.com/300x150/6c5ce7/ffffff?text=My+Image"
     alt="A placeholder image"
     width="300">

<p><small>The image above is loaded from the internet.</small></p>

<!-- TRY: Change the link text, add your own image URL! -->

What are Attributes?

Attributes give extra information about a tag. They go inside the opening tag:

            <a href="https://google.com" target="_blank">Click me</a>
            
                ↑ attribute (where to go)   
                ↑ attribute (open in new tab)

Lists & Tables

HTML — Lists & Tables

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background: #6c5ce7; color: white; }
    tr:nth-child(even) { background: #f2f2f2; }
</style>

<h2>Unordered List (bullet points)</h2>
<ul>
    <li>HTML - Structure</li>
    <li>CSS - Styling</li>
    <li>JavaScript - Behavior</li>
</ul>

<h2>Ordered List (numbered)</h2>
<ol>
    <li>Learn HTML first</li>
    <li>Then learn CSS</li>
    <li>Then learn JavaScript</li>
</ol>

<h2>Table</h2>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>25</td>
            <td>Mumbai</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>22</td>
            <td>Delhi</td>
        </tr>
    </tbody>
</table>

<!-- TRY: Add yourself as a new row in the table! -->

🎯 Challenge!

Add a new item to the unordered list
Add yourself as a new row in the table (add a new <tr> with <td> cells)
Click Run to see your changes!

Forms

A form is like a paper application — it has fields for name, email, checkboxes, dropdowns, and a submit button. HTML forms work the same way, but digitally.

HTML — Forms

<style>
    body { font-family: Arial, sans-serif; max-width: 400px; margin: 20px auto; }
    label { display: block; margin-top: 12px; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ddd; border-radius: 4px; }
    button { margin-top: 16px; padding: 10px 24px; background: #6c5ce7; color: white; border: none; border-radius: 6px; cursor: pointer; }
</style>

<h2>Registration Form</h2>

<form onsubmit="event.preventDefault(); alert('Form submitted! (In a real app, this would send data to a server)')">

    <!-- TEXT input: for short text like name -->
    <label for="name">Full Name:</label>
    <input type="text" id="name" placeholder="Enter your name" required>

    <!-- EMAIL input: validates email format -->
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="you@example.com" required>

    <!-- PASSWORD input: hides the text -->
    <label for="password">Password:</label>
    <input type="password" id="password" placeholder="Min 6 characters" required>

    <!-- NUMBER input -->
    <label for="age">Age:</label>
    <input type="number" id="age" min="1" max="120">

    <!-- DROPDOWN (select) -->
    <label for="city">City:</label>
    <select id="city">
        <option value="">Select a city</option>
        <option value="mumbai">Mumbai</option>
        <option value="delhi">Delhi</option>
        <option value="bangalore">Bangalore</option>
    </select>

    <!-- TEXTAREA: for longer text -->
    <label for="bio">About You:</label>
    <textarea id="bio" rows="3" placeholder="Tell us about yourself..."></textarea>

    <!-- SUBMIT button -->
    <button type="submit">Register</button>

</form>

<!-- TRY: Fill out the form and click Register! -->

Input Types Reference

Type	What It Creates	Example
`text`	Basic text field	Name, address
`email`	Email with validation	user@example.com
`password`	Hidden text field	●●●●●●
`number`	Number with arrows	Age, quantity
`date`	Date picker	Birthday
`checkbox`	Tick box	"I agree to terms"
`radio`	One choice from group	Gender selection
`file`	File upload	Upload resume

Semantic HTML

Semantic means "meaningful." Instead of using <div> for everything (which just means "a box"), semantic tags tell the browser AND search engines WHAT the content IS. It's like the difference between a box labeled "stuff" vs one labeled "kitchen utensils."

HTML — Semantic Tags

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    header { background: #6c5ce7; color: white; padding: 15px 20px; }
    nav a { color: white; margin-right: 15px; text-decoration: none; }
    main { padding: 20px; min-height: 200px; }
    aside { background: #f0f0f0; padding: 15px; border-radius: 8px; margin-top: 15px; }
    footer { background: #333; color: white; padding: 15px 20px; text-align: center; }
</style>

<!-- header = the top area (logo, navigation) -->
<header>
    <h1>My Blog</h1>
    <!-- nav = navigation links -->
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

<!-- main = the primary content of the page -->
<main>
    <!-- article = self-contained content (blog post, news story) -->
    <article>
        <h2>Learning HTML</h2>
        <p>HTML is the foundation of every website on the internet.</p>
    </article>

    <!-- aside = sidebar content, related info -->
    <aside>
        <h3>Related Topics</h3>
        <p>CSS, JavaScript, React</p>
    </aside>
</main>

<!-- footer = the bottom area (copyright, links) -->
<footer>
    <p>&copy; 2026 My Blog. All rights reserved.</p>
</footer>

Semantic Tag	Meaning	Instead of...
`<header>`	Top of page (logo, nav)	`<div class="header">`
`<nav>`	Navigation links	`<div class="nav">`
`<main>`	Main content	`<div class="content">`
`<article>`	Self-contained content	`<div class="post">`
`<aside>`	Sidebar info	`<div class="sidebar">`
`<footer>`	Bottom of page	`<div class="footer">`
`<section>`	A themed group	`<div class="section">`

📝 Chapter 1 Quiz

1. Which tag creates a paragraph?

<h1>

<p>

<a>

<div>

2. What does the alt attribute do in an <img> tag?

Sets the image size

Makes the image clickable

Provides a text description of the image

Changes the image color

3. What's the difference between <ul> and <ol>?

ul = bullet points, ol = numbered list

ul = numbered, ol = bullet points

They are the same thing

ul = underline, ol = overline

4. Where does the <title> tag go?

Inside <body>

Inside <footer>

Anywhere on the page

Inside <head>

5. How do you make a form field mandatory?

Add important="true"

Add required

Add mandatory="yes"

Use <strong> tag

← Chapter 0: Getting Started Chapter 2: CSS →