1.1 HTML in Simple Words#

HTML tells the browser:

"What is this content, and how is it structured?"

For example:

<h1>My Portfolio</h1>
 
<p>I am a software developer.</p>
 
<a href="/contact">Contact Me</a>

The browser understands:

<h1> → Main heading
<p>  → Paragraph
<a>  → Link

HTML isn't primarily concerned with how these things look.

That's CSS's job.

1.2 HTML = Structure#

Suppose you're creating a portfolio.

You might have:

Portfolio
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── Introduction
│   ├── Skills
│   ├── Projects
│   └── Contact
│
└── Footer

HTML represents this structure.

For example:

<header>
    <h1>Anubhav</h1>
 
    <nav>
        <a href="/">Home</a>
        <a href="/projects">Projects</a>
        <a href="/contact">Contact</a>
    </nav>
</header>
 
<main>
 
    <section>
        <h2>About Me</h2>
        <p>I am a software developer.</p>
    </section>
 
</main>
 
<footer>
    <p>Copyright 2026</p>
</footer>

We'll study these semantic elements in much greater depth later.

1.3 HTML Tag#

A tag is the syntax enclosed by < and >.

Example:

<h1>

This is an opening tag.

And:

</h1>

is a closing tag.

Together:

<h1>Hello World</h1>

1.4 HTML Element#

An element generally consists of:

Opening tag
     ↓
┌───────────┐
<h1>Hello</h1>
            ↑
       Closing tag

The entire thing is the element:

<h1>Hello</h1>

Another example:

<p>Hello World</p>

The <p> element represents a paragraph.

1.5 Tag vs Element#

This distinction is commonly asked in interviews.

Tag#

<p>

or

</p>

Element#

<p>Hello World</p>

So:

Tag     → <p>
Element → <p>Hello World</p>

1.6 Attributes#

Attributes provide additional information about an element.

Example:

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

Here:

a       → Element
href    → Attribute
URL     → Attribute value

General syntax:

<tag attribute="value">

Example:

<img
    src="profile.jpg"
    alt="Profile photograph"
>

Two attributes:

src → profile.jpg
alt → Profile photograph

1.7 Multiple Attributes#

An element can have multiple attributes.

<input
    type="text"
    id="username"
    class="input-field"
    placeholder="Enter username"
>

Here we have:

type
id
class
placeholder

Attributes are separated by spaces.

1.8 Attribute Values#

Usually attributes have values.

<a href="/about">

Here:

Attribute → href
Value     → /about

Another example:

<img src="photo.jpg">

Attribute → src
Value     → photo.jpg

Use quotes around attribute values.

Preferred:

<img src="photo.jpg">

1.9 Boolean Attributes#

Some attributes don't need a value.

Example:

<input type="text" disabled>

disabled is a boolean attribute.

Its presence means the element is disabled.

Other examples:

<input required>
 
<input checked>
 
<button disabled>Submit</button>
 
<video autoplay muted></video>

We'll study boolean attributes in more detail when we reach forms and multimedia.

1.10 Nesting#

HTML elements can contain other HTML elements.

Example:

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

The structure is:

div
│
├── h1
│
└── p

This creates a hierarchy.

1.11 Parent, Child and Sibling#

Consider:

<div>
 
    <h1>Hello</h1>
 
    <p>Welcome</p>
 
</div>

Here:

div
│
├── h1
└── p

Parent#

div is the parent of both elements.

Children#

h1 and p are children of div.

Siblings#

h1 and p are siblings.

This terminology becomes extremely important when we study the DOM.

1.12 Deep Nesting#

HTML can have multiple levels.

<div>
 
    <section>
 
        <article>
 
            <h2>My Article</h2>
 
            <p>
                Article content.
            </p>
 
        </article>
 
    </section>
 
</div>

Structure:

div
└── section
    └── article
        ├── h2
        └── p

This is essentially a tree.

And that leads us to one of the most important concepts in web development:

🌳 The DOM#

The browser converts HTML into a Document Object Model (DOM).

For this HTML:

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

The browser creates something conceptually like:

Document
│
└── html
    │
    └── body
        │
        ├── h1
        │   └── "Hello"
        │
        └── p
            └── "Welcome"

JavaScript can then interact with this tree.

For example:

document.querySelector("h1");

We'll study the DOM deeply later.

1.13 Block-Level vs Inline Elements#

This is an important foundational concept.

Historically, HTML elements were commonly categorized as:

• Block-level
• Inline

However, CSS controls the actual display behavior, so these aren't intrinsic HTML categories in the modern specification sense.

Still, the distinction is useful for understanding common browser behavior.

Common block-like elements#

<div>
<p>
<h1>
<h2>
<section>
<article>
<header>
<footer>
<ul>
<ol>

They commonly begin on a new line under the browser's default CSS.

Example:

<h1>Heading</h1>
<p>Paragraph</p>

Conceptually:

Heading
 
Paragraph

Common inline elements#

<a>
<span>
<strong>
<em>
<code>

They commonly flow within the surrounding text.

Example:

<p>
    I love
    <strong>HTML</strong>
    and
    <strong>JavaScript</strong>.
</p>

Conceptually:

I love HTML and JavaScript.

CSS can change display behavior, so don't think:

"Every <div> is permanently block-level."

Think:

HTML gives meaning and structure; CSS controls presentation.

1.14 <div>#

div is a generic flow container.

Example:

<div>
    <h2>About Me</h2>
    <p>I am a developer.</p>
</div>

It doesn't communicate a specific semantic meaning by itself.

Compare:

<div>
    Navigation
</div>

with:

<nav>
    Navigation
</nav>

<nav> communicates what the content represents.

We'll cover semantic HTML extensively later.

1.15 <span>#

span is a generic phrasing-content container.

Example:

<p>
    My favorite language is
    <span>JavaScript</span>.
</p>

It's often useful when you need to target a small piece of text.

For example:

<p>
    Price:
    <span class="price">₹999</span>
</p>

CSS could then style .price.

1.16 Empty / Void Elements#

Some elements don't wrap content.

Example:

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

There isn't:

</img>

Common void elements include:

area
base
br
col
embed
hr
img
input
link
meta
param
source
track
wbr

For example:

<br>

creates a line break.

<hr>

represents a thematic break.

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

embeds an image.

1.17 Self-Closing Syntax#

You may see:

<img />

or:

<br />

This is common in XHTML and XML-style syntax.

In modern HTML, the slash isn't necessary:

<img>
<br>

Prefer the standard HTML syntax when writing ordinary HTML.

1.18 HTML Comments#

Comments:

<!-- This is a comment -->

Multiple lines:

<!--
    This is a
    multi-line comment.
-->

The browser doesn't display the comment as page content.

But remember:

Comments are still delivered to the browser and can be visible to someone inspecting the page source.

Never put secrets inside HTML comments.

Bad:

<!--
API_KEY=123456SECRET
-->

1.19 Whitespace#

HTML generally collapses ordinary whitespace in rendered text.

For example:

<p>Hello        World</p>

usually renders approximately as:

Hello World

Similarly:

<p>
    Hello
    World
</p>

renders approximately as:

Hello World

CSS controls how whitespace is displayed.

There are special mechanisms for preserving whitespace, such as <pre> and CSS white-space.

1.20 Special Characters#

Some characters have special meaning in HTML.

For example:

<
>
&

If you need to display them as text, HTML provides character references.

Examples:

<
>
&

So:

<p>5 &lt; 10</p>

displays:

5 < 10

And:

<p>Tom &amp; Jerry</p>

displays:

Tom & Jerry

1.21 HTML Entity vs Character Reference#

You'll often hear the term HTML entity.

For example:

 

Historically this terminology was common, but technically the modern HTML specification discusses character references.

You may encounter both terms in tutorials and interviews.

Common examples:

 
<
>
&
"
'

Don't memorize hundreds of these. Learn the common ones and know where to look them up.

1.22 Document Language#

You should normally tell browsers and assistive technologies what language your document uses.

For example:

<html lang="en">

For Hindi:

<html lang="hi">

For English in India:

<html lang="en-IN">

This helps with:

• accessibility
• screen readers
• pronunciation
• search engines
• language processing

A professional HTML document should generally have an appropriate lang attribute.

1.23 Character Encoding#

Modern HTML documents should specify UTF-8.

Inside <head>:

<meta charset="UTF-8">

This allows the document to correctly represent a huge range of characters.

For example:

<p>नमस्ते</p>
 
<p>你好</p>
 
<p>こんにちは</p>
 
<p>🚀</p>

Without correct character encoding, some characters may display incorrectly.

1.24 A Proper Basic HTML Document#

Now combine what we've learned:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <title>My Portfolio</title>
 
</head>
 
<body>
 
    <header>
 
        <h1>Anubhav's Portfolio</h1>
 
        <nav>
            <a href="/">Home</a>
            <a href="/projects">Projects</a>
            <a href="/contact">Contact</a>
        </nav>
 
    </header>
 
    <main>
 
        <section>
 
            <h2>About Me</h2>
 
            <p>
                I am a software developer.
            </p>
 
        </section>
 
    </main>
 
    <footer>
 
        <p>
            © 2026 My Portfolio
        </p>
 
    </footer>
 
</body>
 
</html>

This is already much closer to the structure of a real website.

1.25 How the Browser Sees It#

The browser conceptually turns:

<h1>My Portfolio</h1>
 
<p>I am a developer.</p>

into a tree:

Document
│
└── html
    │
    ├── head
    │   ├── meta
    │   └── title
    │
    └── body
        │
        ├── h1
        │   └── "My Portfolio"
        │
        └── p
            └── "I am a developer."

This tree is the foundation for:

• CSS
• JavaScript
• accessibility
• browser rendering
• React
• testing tools

1.26 Common Beginner Mistakes#

❌ Mistake 1 — Incorrect nesting#

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

✅ Correct#

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

❌ Mistake 2 — Missing alt#

<img src="profile.jpg">

✅ Better#

<img src="profile.jpg" alt="Profile photograph">

For a purely decorative image, the correct accessible alternative may instead be:

<img src="decoration.svg" alt="">

❌ Mistake 3 — Using <br> for layout#

Bad:

<h1>My Website</h1>
<br>
<br>
<br>
<p>Hello</p>

Use CSS for spacing.

❌ Mistake 4 — Using <div> for everything#

Instead of:

<div>Header</div>
<div>Navigation</div>
<div>Article</div>
<div>Footer</div>

prefer meaningful semantic elements when appropriate:

<header>...</header>
<nav>...</nav>
<article>...</article>
<footer>...</footer>

❌ Mistake 5 — Using headings because they look big#

Don't do:

<h1>Product</h1>
<h4>Important description</h4>

just because you want smaller text.

Heading levels represent document hierarchy. Use CSS to control visual appearance.

🧪 Chapter 1 Practice#

Create a file called:

chapter-1.html

Build this structure:

My Portfolio
│
├── Header
│   ├── Website name
│   └── Navigation
│
├── Main
│   ├── About Me
│   ├── Skills
│   └── Projects
│
└── Footer

Requirements:

Header#

Create:

• website title
• Home link
• About link
• Projects link
• Contact link

Main#

Create:

About Me

Hello, I am a software developer.

Skills

Create a list containing:

HTML
CSS
JavaScript
React
Next.js

Projects

Create three project names.

Footer#

Add:

© 2026 My Portfolio

Try to build it yourself before looking for a solution.

🎯 Chapter 1 Interview Questions#

You should now be able to explain:

1. What is the difference between a tag and an element?
2. What is an attribute?
3. What is nesting?
4. What are parent and child elements?
5. What are sibling elements?
6. What is the DOM?
7. What is a void element?
8. What is the purpose of lang?
9. Why do we use <meta charset="UTF-8">?
10. What is the difference between <div> and <span>?
11. Why shouldn't <br> be used for layout?
12. What is semantic HTML?
13. What is the difference between HTML structure and CSS presentation?
14. What are block-like and inline elements?
15. Why is accessibility important when writing HTML?

🔑 Chapter 1 Mental Model#

Keep this hierarchy in your mind:

HTML Document
│
├── DOCTYPE
│
└── html
    │
    ├── head
    │   ├── metadata
    │   ├── title
    │   └── resources
    │
    └── body
        │
        ├── elements
        │   ├── headings
        │   ├── paragraphs
        │   ├── links
        │   ├── images
        │   └── forms
        │
        └── semantic structure
            ├── header
            ├── nav
            ├── main
            ├── section
            ├── article
            ├── aside
            └── footer

Next chapter: Chapter 2 — Text & Content#

We'll learn headings, paragraphs, formatting elements, quotations, abbreviations, code-related elements, superscript/subscript, dates, text semantics, and how to structure readable content correctly.