🌐 Complete HTML Course for Beginners

Learn HTML from absolute zero and build your first complete website from scratch.

Welcome to this beginner-friendly HTML course.

This course is designed for students who have never written HTML before. You don't need previous programming knowledge.

The course follows a simple rule:

Learn → Understand → Type → Experiment → Practice → Build

By the end of this course, you should be able to open a blank HTML file and build a basic multi-page website without copying someone else's code.

📚 Table of Contents

What is HTML?
How Websites Work
Setting Up Your Environment
Your First HTML Page
HTML Tags and Elements
HTML Document Structure
Headings and Paragraphs
Line Breaks and Horizontal Rules
Text Formatting
HTML Comments
Links
Images
Lists
Tables
HTML Attributes
Div and Span
File Paths
Forms
Input Types
Form Controls
HTML Validation
Audio
Video
Iframe
Semantic HTML
HTML5 Structure
The Head Section
Meta Tags
HTML Entities
Accessibility
Best Practices
Common Mistakes
Debugging HTML
Mini Projects
Final Project
HTML Cheat Sheet
Final Assessment
What to Learn After HTML

1. What is HTML?

What does HTML mean?

HTML = HyperText Markup Language

HTML is the standard language used to create the structure and content of webpages.

HTML is not a programming language.

It is a markup language.

Think of a Website Like a House

Imagine building a house.

HTML       → Structure
CSS        → Design
JavaScript → Behaviour

For example:

HTML
 ├── Heading
 ├── Paragraph
 ├── Image
 ├── Button
 └── Form

CSS
 ├── Colors
 ├── Fonts
 ├── Size
 └── Layout

JavaScript
 ├── Click actions
 ├── Calculations
 ├── Animations
 └── Dynamic behaviour

We will focus on HTML first.

2. How Websites Work

When you open a website:

You
 ↓
Browser
 ↓
Website files
 ↓
HTML
 ↓
Browser understands HTML
 ↓
Webpage appears

Common browsers:

Google Chrome
Microsoft Edge
Mozilla Firefox
Safari

HTML files normally use:

.html

Example:

index.html
about.html
contact.html

3. Setting Up Your Environment

You need:

1. A browser

Chrome, Edge, Firefox, etc.

2. A code editor

Recommended:

Visual Studio Code

You can also use:

Notepad
Notepad++
Sublime Text
Any online HTML editor

4. Your First HTML Page

Create a file:

index.html

Write:

<!DOCTYPE html>

<html>

<head>
    <title>My First Website</title>
</head>

<body>

    <h1>Hello World!</h1>

    <p>This is my first webpage.</p>

</body>

</html>

Save it.

Then open index.html in your browser.

Congratulations!

You created your first webpage.

5. HTML Tags and Elements

HTML uses tags.

Example:

<p>Hello World</p>

Here:

<p>          Opening tag
Hello World  Content
</p>         Closing tag

Together they form an HTML element.

Another Example

<h1>My Website</h1>

h1 is the heading element.

Some Elements Don't Need Closing Tags

Example:

<br>

<img src="photo.jpg" alt="My photo">

These are called void elements.

Important void elements include:

<br>
<hr>
<img>
<input>
<meta>
<link>
<source>
<area>
<base>
<embed>
<param>
<wbr>

You don't need to memorize all of them immediately.

6. HTML Document Structure

The standard basic structure is:

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

</head>

<body>

    <!-- Visible content goes here -->

</body>

</html>

Understand this properly.

`<!DOCTYPE html>`

Tells the browser that the document uses modern HTML.

`<html>`

The root element.

`<head>`

Contains information about the webpage.

`<title>`

The title displayed in the browser tab.

`<body>`

Contains the visible webpage content.

7. Headings and Paragraphs

HTML provides six heading levels.

<h1>Main Heading</h1>

<h2>Second Heading</h2>

<h3>Third Heading</h3>

<h4>Fourth Heading</h4>

<h5>Fifth Heading</h5>

<h6>Sixth Heading</h6>

Usually:

h1 → Main page heading
h2 → Major section
h3 → Subsection
h4 → Smaller subsection

Paragraph

<p>This is a paragraph.</p>

Example:

<h1>About Me</h1>

<p>
    My name is Rahul. I am an 8th class student.
    I enjoy learning computers.
</p>

Practice

Create a page about yourself containing:

Your name
Your school
Your class
Your hobbies
Your favourite subject

8. Line Breaks and Horizontal Rules

Line Break

<p>Hello<br>World</p>

<br> moves content to the next line.

Horizontal Rule

<hr>

Example:

<h1>My Website</h1>

<hr>

<p>Welcome to my website.</p>

9. Text Formatting

HTML provides several elements for giving meaning or emphasis to text.

Bold

<b>This is bold text.</b>

Strong

<strong>This is important.</strong>

<strong> has semantic meaning.

Italic

<i>This is italic text.</i>

Emphasis

<em>This text is emphasized.</em>

Highlight

<mark>Important text</mark>

Small Text

<small>This is small text.</small>

Deleted Text

<del>Old price: ₹500</del>

Inserted Text

<ins>New price: ₹400</ins>

Subscript

H<sub>2</sub>O

Output:

H₂O

Superscript

x<sup>2</sup>

Output:

x²

Combining Formatting

<p>
    I am learning
    <strong>HTML</strong>
    and I really <em>enjoy</em> it.
</p>

10. HTML Comments

Comments are not displayed on the webpage.

<!-- This is a comment -->

Example:

<!-- Website header starts here -->

<h1>My Website</h1>

Comments are useful for organizing large HTML files.

11. Links

Links are created using <a>.

<a href="https://www.google.com">
    Google
</a>

Open Link in New Tab

<a href="https://www.google.com" target="_blank">
    Open Google
</a>

Email Link

<a href="mailto:example@gmail.com">
    Send Email
</a>

Phone Link

<a href="tel:+911234567890">
    Call Us
</a>

Internal Link

Suppose you have:

index.html
about.html

Then:

<a href="about.html">
    About Me
</a>

Link to a Section

<a href="#contact">
    Contact
</a>

<section id="contact">

    <h2>Contact Me</h2>

</section>

12. Images

Use:

<img src="photo.jpg" alt="My photo">

Important attributes

src → image location
alt → alternative text

Image Size

<img
    src="photo.jpg"
    alt="Mountain"
    width="400"
    height="300"
>

Image Folder

Suppose:

website/
│
├── index.html
│
└── images/
    └── mountain.jpg

Use:

<img
    src="images/mountain.jpg"
    alt="Mountain"
>

Important Rule

Always try to provide useful alt text.

Good:

<img src="dog.jpg" alt="Brown dog sitting in a garden">

Bad:

<img src="dog.jpg">

13. Lists

Unordered List

<ul>

    <li>Apple</li>
    <li>Mango</li>
    <li>Banana</li>

</ul>

Ordered List

<ol>

    <li>Wake up</li>
    <li>Go to school</li>
    <li>Study</li>

</ol>

Nested List

<ul>

    <li>
        Programming

        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>

    </li>

</ul>

Description List

HTML also supports:

<dl>

    <dt>HTML</dt>
    <dd>Markup language used to structure webpages.</dd>

    <dt>CSS</dt>
    <dd>Language used to style webpages.</dd>

</dl>

Important elements:

<dl> → Description list
<dt> → Term
<dd> → Description

14. Tables

Basic table:

<table border="1">

    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Class</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>13</td>
        <td>8</td>
    </tr>

    <tr>
        <td>Aman</td>
        <td>14</td>
        <td>8</td>
    </tr>

</table>

Table Elements

<table> → Table
<tr>    → Table row
<th>    → Table heading
<td>    → Table data

Colspan

<table border="1">

    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td colspan="2">Total Students: 20</td>
    </tr>

</table>

Rowspan

<table border="1">

    <tr>
        <th rowspan="2">Class 8</th>
        <td>Rahul</td>
    </tr>

    <tr>
        <td>Aman</td>
    </tr>

</table>

Better Table Structure

HTML also supports:

<table>

    <caption>Student Marks</caption>

    <thead>
        <tr>
            <th>Name</th>
            <th>Math</th>
            <th>Science</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Rahul</td>
            <td>90</td>
            <td>85</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <td colspan="3">End of table</td>
        </tr>

    </tfoot>

</table>

15. HTML Attributes

Attributes provide additional information about an element.

Example:

<a href="https://google.com" target="_blank">
    Google
</a>

Here:

href   → Attribute
target → Attribute

Common Attributes

Important attributes to know:

id
class
title
style
href
src
alt
width
height
name
value
placeholder
required
disabled
readonly
checked
selected
min
max
minlength
maxlength

ID

<h1 id="main-title">
    My Website
</h1>

An id should identify a specific element.

Class

<p class="important">
    This is important.
</p>

Classes are commonly used by CSS and JavaScript.

Title

<p title="This is additional information">
    Hover over me.
</p>

16. Div and Span

`<div>`

div is a general-purpose block container.

<div>

    <h2>About Me</h2>

    <p>
        I am a student.
    </p>

</div>

`<span>`

span is an inline container.

<p>
    My favourite color is
    <span>blue</span>.
</p>

Remember:

div   → Block-level container
span  → Inline container

17. File Paths

Understanding file paths is essential.

Suppose:

website/
│
├── index.html
│
├── about.html
│
└── images/
    └── photo.jpg

From index.html:

<img src="images/photo.jpg">

Subfolder

<a href="pages/about.html">
    About
</a>

Parent Folder

Suppose:

website/
│
├── index.html
│
└── pages/
    └── about.html

From about.html:

<a href="../index.html">
    Home
</a>

.. means:

Go to the parent directory.

18. Forms

Forms collect information from users.

Basic form:

<form>

    <label>Name:</label>

    <input type="text">

    <br><br>

    <label>Email:</label>

    <input type="email">

    <br><br>

    <input type="submit">

</form>

19. Input Types

HTML provides many input types.

Text

<input type="text">

Password

<input type="password">

Email

<input type="email">

Number

<input type="number">

Date

<input type="date">

Time

<input type="time">

File

<input type="file">

Checkbox

<input type="checkbox">

Radio

<input type="radio">

Color

<input type="color">

Range

<input type="range">

Search

<input type="search">

URL

<input type="url">

Telephone

<input type="tel">

Submit

<input type="submit">

Reset

<input type="reset">

20. Form Controls

Label

Correct form structure:

<label for="name">
    Name:
</label>

<input
    type="text"
    id="name"
>

The for value connects with the input's id.

Placeholder

<input
    type="text"
    placeholder="Enter your name"
>

Radio Buttons

<p>Select your gender:</p>

<label>
    <input type="radio" name="gender" value="male">
    Male
</label>

<label>
    <input type="radio" name="gender" value="female">
    Female
</label>

The same name groups the radio buttons.

Checkboxes

<p>Select your hobbies:</p>

<label>
    <input type="checkbox" name="hobby">
    Cricket
</label>

<label>
    <input type="checkbox" name="hobby">
    Gaming
</label>

<label>
    <input type="checkbox" name="hobby">
    Reading
</label>

Dropdown

<label for="city">
    Choose your city:
</label>

<select id="city">

    <option>Delhi</option>
    <option>Kolkata</option>
    <option>Mumbai</option>
    <option>Patna</option>

</select>

Textarea

<label for="message">
    Message:
</label>

<textarea
    id="message"
    rows="5"
    cols="30"
></textarea>

Button

<button type="button">
    Click Me
</button>

Submit:

<button type="submit">
    Submit
</button>

Reset:

<button type="reset">
    Reset
</button>

21. HTML Validation

HTML can perform basic form validation.

Required

<input type="text" required>

The user cannot submit the form without filling it.

Email

<input type="email" required>

Minimum and Maximum

<input
    type="number"
    min="1"
    max="100"
>

Minimum Length

<input
    type="text"
    minlength="3"
>

Maximum Length

<input
    type="text"
    maxlength="20"
>

Pattern

HTML can also use patterns:

<input
    type="text"
    pattern="[A-Za-z]+"
>

22. Audio

<audio controls>

    <source
        src="music.mp3"
        type="audio/mpeg"
    >

    Your browser does not support audio.

</audio>

Useful attributes:

controls
autoplay
loop
muted

23. Video

<video
    width="500"
    controls
>

    <source
        src="video.mp4"
        type="video/mp4"
    >

    Your browser does not support video.

</video>

Useful attributes:

controls
autoplay
loop
muted
poster
width
height

24. Iframe

An iframe embeds another document or supported external content.

Example:

<iframe
    src="https://example.com"
    width="600"
    height="400">
</iframe>

You may also encounter iframes when embedding:

YouTube videos
Maps
Other external content

25. Semantic HTML

Semantic elements tell us what different parts of a webpage mean.

Important semantic elements:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<address>
<time>

Example

<body>

    <header>

        <h1>My Website</h1>

    </header>

    <nav>

        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>

    </nav>

    <main>

        <section>

            <h2>About Me</h2>

            <p>
                I am an 8th class student.
            </p>

        </section>

        <section>

            <h2>My Hobbies</h2>

            <p>
                I enjoy cricket and programming.
            </p>

        </section>

    </main>

    <footer>

        <p>© 2026 My Website</p>

    </footer>

</body>

26. HTML5 Structure

A complete modern HTML page can look like this:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>My Website</title>

</head>

<body>

    <header>

        <h1>My Website</h1>

    </header>

    <nav>

        <a href="index.html">Home</a>
        <a href="about.html">About</a>

    </nav>

    <main>

        <section>

            <h2>Welcome</h2>

            <p>
                Welcome to my website.
            </p>

        </section>

    </main>

    <footer>

        <p>© 2026 My Website</p>

    </footer>

</body>

</html>

27. The `<head>` Section

The <head> contains information about the document.

Common elements:

<head>

    <title>My Website</title>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <meta
        name="description"
        content="My personal website"
    >

</head>

Later, CSS and external resources are also commonly connected here.

28. Meta Tags

Character Encoding

<meta charset="UTF-8">

This allows the browser to correctly interpret many characters.

Responsive Viewport

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

This is important for mobile-friendly webpages.

Description

<meta
    name="description"
    content="A personal website created using HTML."
>

29. HTML Entities

Sometimes special characters need to be represented using entities.

&lt;     <
&gt;     >
&amp;    &
&nbsp;   space
&quot;   "
&apos;   '
&copy;   ©
&reg;    ®

Example:

<p>
    Copyright &copy; 2026
</p>

30. Accessibility

A good webpage should be usable by as many people as possible.

Use meaningful headings

Good:

<h1>My School</h1>

<h2>About Our School</h2>

<h2>Our Teachers</h2>

Don't randomly use headings just because they look large.

Use `alt`

<img
    src="school.jpg"
    alt="Front view of our school building"
>

Use labels

Good:

<label for="email">
    Email:
</label>

<input
    type="email"
    id="email"
>

Use semantic HTML

Prefer:

<header>
<nav>
<main>
<section>
<footer>

when those elements accurately describe the content.

31. Best Practices

Follow these rules.

1. Use lowercase tags

Prefer:

<h1>Hello</h1>

Instead of:

<H1>Hello</H1>

2. Indent your code

Bad:

<body><h1>Hello</h1><p>Hello World</p></body>

Good:

<body>

    <h1>Hello</h1>

    <p>
        Hello World
    </p>

</body>

3. Use meaningful names

Good:

<section id="about">

Bad:

<section id="x1">

4. Always close normal elements

Good:

<p>Hello</p>

5. Don't use HTML for styling everything

HTML provides structure.

CSS should handle most visual styling.

32. Common Mistakes

Mistake 1

Forgetting closing tags:

<p>Hello

Better:

<p>Hello</p>

Mistake 2

Wrong nesting:

Bad:

<p>
    <strong>Hello
</p>
</strong>

Good:

<p>
    <strong>Hello</strong>
</p>

Mistake 3

Wrong image path

<img src="photo.jpg">

when the image is actually:

images/photo.jpg

Correct:

<img src="images/photo.jpg">

Mistake 4

Forgetting quotes around attributes

Bad:

<a href=https://google.com>

Good:

<a href="https://google.com">

Mistake 5

Using <br> everywhere to create spacing

Don't use:

<br><br><br><br><br>

for layout.

CSS should handle spacing.

33. Debugging HTML

Errors are normal.

When something doesn't work:

Step 1

Read your code carefully.

Step 2

Check:

Closing tags
Quotes
File names
Folder names
Image paths
Link paths
Attribute spelling

Step 3

Open browser developer tools.

Usually:

Right Click → Inspect

Then look at:

Console
Elements

Debugging Challenge

Take:

<h1>My Website</h1>

<p>This is my website.

<img src="photo.png" alt="My photo">

<a href="about.html">About Me</a>

Find what is wrong.

Answer:

The paragraph is not closed.

Correct:

<h1>My Website</h1>

<p>
    This is my website.
</p>

<img
    src="photo.png"
    alt="My photo"
>

<a href="about.html">
    About Me
</a>

34. Mini Projects

Don't move forward without practicing.

🟢 Project 1 — My Introduction

Create:

my-introduction/
└── index.html

Must contain:

Your name
Your class
Your school
A paragraph about yourself
Favourite subject
Hobbies

🟢 Project 2 — Favourite Things

Create a webpage containing:

Favourite food
Favourite sport
Favourite game
Favourite movie
Favourite subject

Use:

Headings
Paragraphs
Lists
Images
Links

🟡 Project 3 — Student Marks Table

Create:

student-marks/
└── index.html

Table should contain:

Name
English
Math
Science
Computer
Total

🟡 Project 4 — Registration Form

Create:

registration-form/
└── index.html

Include:

Name
Email
Password
Phone
Date of birth
Gender
Hobbies
Class
City
Address
Submit
Reset

Use validation wherever appropriate.

🔵 Project 5 — Personal Profile

Create:

profile/
│
├── index.html
└── images/
    └── profile.jpg

Include:

Profile image
Name
Introduction
Education
Hobbies
Skills
Favourite subjects
Contact information

🔵 Project 6 — School Website

Create:

school-website/
│
├── index.html
├── about.html
├── teachers.html
├── students.html
├── contact.html
└── images/

Every page should have navigation.

35. FINAL PROJECT — Complete Personal Website

This is the final HTML challenge.

The student must build the entire project independently.

Project Structure

my-personal-website/
│
├── index.html
├── about.html
├── hobbies.html
├── gallery.html
├── contact.html
│
├── images/
│   ├── profile.jpg
│   ├── hobby.jpg
│   └── gallery1.jpg
│
└── media/
    ├── video.mp4
    └── music.mp3

Home Page

index.html

Must contain:

Header
Website title
Navigation
Introduction
Profile image
About section
Hobbies section
Link to other pages
Footer

Example structure:

<header>

    <h1>My Personal Website</h1>

    <nav>

        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="hobbies.html">Hobbies</a>
        <a href="gallery.html">Gallery</a>
        <a href="contact.html">Contact</a>

    </nav>

</header>

<main>

    <section>

        <h2>Hello!</h2>

        <p>
            Welcome to my personal website.
        </p>

        <img
            src="images/profile.jpg"
            alt="My profile photo"
            width="250"
        >

    </section>

</main>

<footer>

    <p>© 2026 My Website</p>

</footer>

About Page

about.html

Include:

About yourself
Education
Goals
Favourite subjects
Skills

Hobbies Page

hobbies.html

Include:

Favourite hobbies
Ordered/unordered lists
Images
Descriptions

Gallery Page

gallery.html

Include:

At least 6 images
Meaningful alt text
Image captions

Example:

<figure>

    <img
        src="images/gallery1.jpg"
        alt="Mountain landscape"
        width="300"
    >

    <figcaption>
        My favourite mountain view
    </figcaption>

</figure>

Contact Page

contact.html

Create a complete form:

<form>

    <label for="name">
        Name:
    </label>

    <input
        type="text"
        id="name"
        name="name"
        required
    >

    <br><br>

    <label for="email">
        Email:
    </label>

    <input
        type="email"
        id="email"
        name="email"
        required
    >

    <br><br>

    <label for="message">
        Message:
    </label>

    <textarea
        id="message"
        name="message"
        rows="5"
        required
    ></textarea>

    <br><br>

    <button type="submit">
        Send
    </button>

</form>

36. HTML Cheat Sheet

Document

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Text

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

<p>
<br>
<hr>

<b>
<strong>
<i>
<em>
<mark>
<small>
<del>
<ins>
<sub>
<sup>

Links

<a>

Important attributes:

href
target
download

Images

<img>

Important attributes:

src
alt
width
height

Lists

<ul>
<ol>
<li>

<dl>
<dt>
<dd>

Tables

<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>

Important attributes:

colspan
rowspan

Containers

<div>
<span>

Semantic HTML

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<address>
<time>

Forms

<form>
<label>
<input>
<textarea>
<select>
<option>
<button>
<fieldset>
<legend>
<datalist>
<output>

Media

<audio>
<video>
<source>
<track>
<iframe>

Head

<head>
<title>
<meta>
<link>
<style>
<base>

37. Final Assessment

Before saying:

"I have completed HTML."

You should be able to answer YES to all of these.

Basic Understanding

I know what HTML is.
I know the difference between HTML, CSS and JavaScript.
I understand tags and elements.
I understand opening and closing tags.
I understand the basic HTML document structure.

Text

Links and Images

Tables

Forms

Structure

Media

I can add audio.
I can add video.
I understand iframe.

Files

I understand folders.
I understand relative paths.
I can connect multiple HTML pages.
I can organize images and media.

Accessibility

I use meaningful alt text.
I use labels for forms.
I use headings logically.
I understand why semantic HTML matters.

Independent Building

Most importantly:

I can create a webpage without following a tutorial.
I can find and fix basic HTML errors.
I can build a multi-page website independently.
I can explain what my HTML code does.

🧠 The Golden Rule

Don't learn HTML by memorizing tags.

Learn HTML by asking:

"What does this content mean?"

For example:

If you need a main heading:

<h1>My School</h1>

If you need a paragraph:

<p>My school is a wonderful place.</p>

If you need a navigation link:

<a href="about.html">About</a>

If you need an image:

<img src="school.jpg" alt="Our school">

If you need a list:

<ul>
    <li>Math</li>
    <li>Science</li>
    <li>Computer</li>
</ul>

HTML becomes much easier when you think about meaning instead of memorization.

🚫 Don't Copy-Paste Everything

Copying code can make a webpage appear to work while teaching you almost nothing.

For every example:

Read it.
Understand it.
Type it yourself.
Change something.
Break something intentionally.
Fix it.
Build your own version.

If you can only build the webpage while looking at the tutorial, you haven't learned it yet.

🎯 The Real Goal

The final goal isn't:

"I know 100 HTML tags."

The final goal is:

Give me a blank folder and a blank HTML file, and I can create a working website myself.

Once you can do that, you're ready for the next stage:

HTML
  ↓
CSS
  ↓
Responsive Design
  ↓
JavaScript
  ↓
Git & GitHub
  ↓
Real Projects

🚀 What Comes After HTML?

After completing this course, start learning:

1. CSS

Learn:

Colors
Fonts
Borders
Margins
Padding
Box model
Flexbox
Grid
Positioning
Responsive design
Animations
Media queries

2. JavaScript

Learn:

Variables
Data types
Conditions
Loops
Functions
Arrays
Objects
DOM
Events
Forms
APIs

3. Git & GitHub

Learn:

Repository
Commit
Push
Pull
Branch
GitHub Pages

Then start building real projects.

👨‍💻 Learning Philosophy

This repository is designed around one idea:

Don't just consume tutorials. Build things.

Every topic should eventually become a project.

Every project should eventually become something you can show someone.

And every mistake should become something you understand.

⭐ Final Challenge

Close this README.

Open VS Code.

Create:

index.html

Don't search for a template.

Don't copy the final project.

Don't ask someone for the code.

Start with:

<!DOCTYPE html>

and build your own website.

If you can do that successfully, you have actually learned HTML.

📌 Course Status

HTML Beginner → Intermediate

Progress:
[ ] Not Started
[ ] Basics
[ ] Content
[ ] Forms
[ ] Media
[ ] Semantic HTML
[ ] Accessibility
[ ] Mini Projects
[ ] Final Project
[ ] Independent Website

👨‍🏫 Created for Learning

HTML Learning Repository

Built to make HTML understandable for beginners and practical enough to create real websites.

Learn → Practice → Build → Break → Fix → Repeat.

Uh oh!

FilesExpand file tree

HTML.md

Latest commit

History

HTML.md

File metadata and controls

🌐 Complete HTML Course for Beginners

📚 Table of Contents

1. What is HTML?

What does HTML mean?

Think of a Website Like a House

2. How Websites Work

3. Setting Up Your Environment

1. A browser

2. A code editor

4. Your First HTML Page

5. HTML Tags and Elements

Another Example

Some Elements Don't Need Closing Tags

6. HTML Document Structure

<!DOCTYPE html>

<html>

<head>

<title>

<body>

7. Headings and Paragraphs

Paragraph

Practice

8. Line Breaks and Horizontal Rules

Line Break

Horizontal Rule

9. Text Formatting

Bold

Strong

Italic

Emphasis

Highlight

Small Text

Deleted Text

Inserted Text

Subscript

Superscript

Combining Formatting

10. HTML Comments

11. Links

Open Link in New Tab

Email Link

Phone Link

Internal Link

Link to a Section

12. Images

Important attributes

Image Size

Image Folder

Important Rule

13. Lists

Unordered List

Ordered List

Nested List

Description List

14. Tables

Table Elements

Colspan

Rowspan

Better Table Structure

15. HTML Attributes

Common Attributes

ID

Class

Title

16. Div and Span

<div>

<span>

17. File Paths

Subfolder

Parent Folder

18. Forms

19. Input Types

Text

`<!DOCTYPE html>`

`<html>`

`<head>`

`<title>`

`<body>`

`<div>`

`<span>`

27. The `<head>` Section

Use `alt`