Before writing lots of tags, you should understand what HTML actually does, how a browser processes it, and where HTML fits into web development.

0.1 What is HTML?#

HTML = HyperText Markup Language

HTML is the standard language used to define the structure and meaning of web pages.

For example:

<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
<button>Click Me</button>

HTML tells the browser:

• This is a heading.
• This is a paragraph.
• This is a button.

HTML is not a programming language.

It doesn't normally perform logic like:

if (age >= 18) {
    // ...
}

Instead, HTML describes the structure of content.

0.2 HTML vs CSS vs JavaScript#

A useful way to think about web development is:

HTML
  ↓
Structure
 
CSS
  ↓
Appearance
 
JavaScript
  ↓
Behavior

Imagine you're building a house.

For example:

<button>Buy Now</button>

HTML creates the button.

CSS can make it look like:

┌─────────────────┐
│     Buy Now     │
└─────────────────┘

JavaScript can make something happen when the user clicks it.

0.3 What Does a Browser Do?#

When you visit:

https://example.com

a lot happens behind the scenes.

At a simplified level:

User enters URL
       ↓
Browser sends request
       ↓
Web server
       ↓
HTML response
       ↓
Browser parses HTML
       ↓
DOM is created
       ↓
CSS is processed
       ↓
JavaScript executes
       ↓
Page is rendered
       ↓
User sees webpage

For example, the server might return:

<!DOCTYPE html>
 
<html>
  <head>
    <title>My Website</title>
  </head>
 
  <body>
    <h1>Hello World</h1>
  </body>
</html>

The browser reads this document and constructs the webpage.

0.4 What is a Web Page?#

A webpage is essentially a document that contains structured content.

For example:

Website
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── Heading
│   ├── Paragraph
│   ├── Image
│   └── Article
│
└── Footer

HTML lets us express this structure.

0.5 What is a Tag?#

HTML uses tags.

Example:

<p>Hello World</p>

Here:

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

Together they form an HTML element.

┌─────────────────────────────┐
│        HTML Element         │
│                             │
│ <p> Hello World </p>        │
│ ↑       ↑          ↑        │
│ Opening Content    Closing  │
│ tag                tag      │
└─────────────────────────────┘

0.6 What is an Element?#

An HTML element generally consists of:

<tag>Content</tag>

Example:

<h1>My Website</h1>

<p>Hello everyone</p>

<button>Submit</button>

Each represents a different type of content.

0.7 What is an Attribute?#

Attributes provide additional information about an element.

Example:

<a href="https://example.com">Visit Website</a>

Here:

<a>       → Element
href      → Attribute
URL       → Attribute value

Another example:

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

There are two attributes:

src → photo.jpg
alt → My photo

General syntax:

<tag attribute="value">

Example:

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

0.8 HTML Document Structure#

Almost every modern HTML document starts with a basic structure like this:

<!DOCTYPE html>
 
<html>
  <head>
    <title>My Website</title>
  </head>
 
  <body>
 
    <h1>Hello World</h1>
 
    <p>Welcome to my website.</p>
 
  </body>
</html>

Let's understand each part.

<!DOCTYPE html>#

Tells the browser that this document uses modern HTML.

<!DOCTYPE html>

It's called the DOCTYPE declaration.

<html>#

The root element.

<html>
    ...
</html>

Everything in the HTML document normally exists inside it.

<head>#

Contains information about the document, rather than the primary visible page content.

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

It can contain:

• title
• metadata
• CSS references
• favicon
• SEO metadata
• scripts
• other document configuration

<body>#

Contains the main content displayed on the webpage.

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

0.9 Your First HTML Page#

Create a file:

index.html

Put this inside:

<!DOCTYPE html>
 
<html>
  <head>
    <title>My First Website</title>
  </head>
 
  <body>
 
    <h1>Hello World!</h1>
 
    <p>This is my first HTML webpage.</p>
 
  </body>
</html>

Save it.

Then open index.html in your browser.

You should see:

Hello World!
 
This is my first HTML webpage.

🎉 You have created your first webpage.

0.10 HTML Comments#

Comments are ignored by the browser.

<!-- This is a comment -->

You can write:

<h1>My Website</h1>
 
<!-- This section contains the introduction -->
 
<p>Welcome to my website.</p>

Comments are useful for explaining your code.

0.11 HTML is Case-Insensitive — But Use Lowercase#

HTML generally isn't case-sensitive for standard HTML element names.

These may be interpreted similarly:

<P>Hello</P>

and:

<p>Hello</p>

But the professional convention is:

<p>Hello</p>

Use:

• lowercase tags
• lowercase attributes
• consistent formatting
• meaningful indentation

0.12 Nesting#

HTML elements can exist inside other elements.

Example:

<div>
    <h1>My Website</h1>
 
    <p>
        Welcome to my website.
    </p>
</div>

Here:

<div>
   │
   ├── <h1>
   │
   └── <p>

This is called nesting.

Correct:

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

Incorrect:

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

Tags should be properly nested.

0.13 Void Elements#

Not every HTML element has a closing tag.

For example:

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

There is no:

</img>

Some commonly used void elements include:

<img>
<br>
<hr>
<input>
<meta>
<link>
<source>

You'll learn these properly in later chapters.

0.14 HTML File Extension#

HTML files normally use:

.html

Examples:

index.html
about.html
contact.html
login.html
products.html

The most common starting page is:

index.html

0.15 Recommended Development Setup#

For this course, use:

Editor#

VS Code

Browser#

Any modern browser:

• Chrome
• Edge
• Firefox

Recommended project structure#

Start with:

html-course/
│
└── index.html

Later we'll build larger projects:

website/
│
├── index.html
├── about.html
├── contact.html
├── images/
├── css/
└── js/

0.16 The HTML Learning Journey#

Your progression will look like:

HTML Basics
     ↓
Text & Links
     ↓
Images & Lists
     ↓
Tables
     ↓
Forms
     ↓
Semantic HTML
     ↓
HTML5
     ↓
Accessibility
     ↓
SEO
     ↓
Responsive HTML
     ↓
Performance
     ↓
Security
     ↓
DOM
     ↓
Browser Rendering
     ↓
HTML + CSS + JS
     ↓
React
     ↓
Next.js
     ↓
Production HTML

By the end, you shouldn't just know HTML tags.

You should understand how to design correct, semantic, accessible, SEO-friendly, performant HTML structures for real applications.

🧪 Chapter 0 Practice#

Create index.html and build this:

My Portfolio
 
Hello, I'm Anubhav.
 
I am a software developer.
 
My Skills
- HTML
- CSS
- JavaScript
- React
- Next.js
 
Contact Me

Try to create it without copying the exact solution.

Use what you've learned:

• <!DOCTYPE html>
• <html>
• <head>
• <title>
• <body>
• headings
• paragraphs
• lists

🎯 Chapter 0 Interview Questions#

Before moving forward, you should be able to answer:

1. What is HTML?
2. Is HTML a programming language?
3. What is the difference between HTML, CSS and JavaScript?
4. What is an HTML tag?
5. What is an HTML element?
6. What is an HTML attribute?
7. What is <!DOCTYPE html>?
8. What is the purpose of <html>?
9. What is the difference between <head> and <body>?
10. What is nesting?
11. What are void elements?
12. Why do we use index.html?

🧠 Key Takeaway#

Remember this mental model:

HTML
 │
 ├── Document
 │     ├── Head
 │     └── Body
 │
 ├── Elements
 │     ├── Tags
 │     ├── Content
 │     └── Attributes
 │
 └── Structure
       ├── Headings
       ├── Paragraphs
       ├── Links
       ├── Images
       ├── Lists
       ├── Forms
       └── Semantic sections

Next chapter: Chapter 1 — Introduction to HTML#

We'll go deeper into HTML document structure, tags, elements, attributes, nesting, block vs inline elements, HTML parsing, browser behavior, and how a real HTML document is constructed.