🌐 Web Development Roadmap — Part 12

🏗️ HTML — What Is HTML and Why Do We Need It?

HTML is the first major technology we'll learn for building websites.

1️⃣ What Is HTML?

HTML stands for:

HyperText Markup Language

HTML is the standard markup language used to structure content on webpages.

In simple words:

HTML tells the browser what content exists on a webpage and what each piece of content represents.

For example, a webpage might contain:

• A heading

• Paragraphs

• Images

• Links

• Buttons

• Lists

• Forms

• Tables

HTML provides the structure for these elements.

2️⃣ HTML Is Not a Programming Language

This is an important distinction.

HTML is a markup language, not a programming language.

HTML describes the structure and meaning of content.

For example:

<h1>My Portfolio</h1>
<p>Welcome to my website.</p>

There is no programming logic here.

We're simply telling the browser:

"This is a main heading."

and:

"This is a paragraph."

JavaScript, on the other hand, can perform programming logic:

let age = 25;

if (age >= 18) {
    console.log("Adult");
}

So remember:

• HTML → Structure

• CSS → Appearance

• JavaScript → Behaviour and logic

3️⃣ How HTML Works

HTML uses elements to describe content.

For example:

<h1>Hello World</h1>

The browser interprets this as a heading.

Another example:

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

The browser interprets this as a paragraph.

The browser then turns the HTML structure into the webpage you see.

4️⃣ HTML Elements

An HTML element commonly consists of:

<tag>Content</tag>

For example:

<p>Hello</p>

Here:

• <p> → Opening tag

• Hello → Content

• </p> → Closing tag

Together, they form an HTML element.

Another example:

<h1>Web Development</h1>

The entire thing is an HTML element.

5️⃣ HTML Tags

A tag is the markup used to define an element.

Examples:

• <h1>

• <p>

• <a>

• <img>

• <button>

Different tags represent different types of content.

For example:

<h1>My Website</h1>

h1 represents a heading.

<p>Hello everyone.</p>

p represents a paragraph.

<button>Login</button>

button represents a button.

6️⃣ A Simple HTML Page

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Don't worry if you don't understand everything yet.

We'll learn each part separately.

For now, understand the overall structure.

7️⃣ <html>

The <html> element represents the root of the HTML document.

Most of your HTML page exists inside it.

<html>
    ...
</html>

Think of it as the outer container of the document.

8️⃣ <head>

The <head> contains information about the webpage that generally isn't displayed as the main page content.

For example:

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

It can contain things such as:

• Page title

• Metadata

• Links to CSS

• Other information used by the browser

We'll explore the <head> in detail later.

9️⃣ <body>

The <body> contains the main content displayed on the webpage.

For example:

<body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
</body>

The user can see this content in the browser.

A simple way to remember:

<html>
   │
   ├── <head>
   │      → Information about the page
   │
   └── <body>
          → Visible page content

🔟 <!DOCTYPE html>

You'll usually see this at the beginning of an HTML document:

<!DOCTYPE html>

It tells the browser that the document uses modern HTML standards.

It's a doctype declaration, not an ordinary HTML element.

🌐 Real-World Example

Imagine you're building a portfolio.

You might start with:

<h1>Deepak's Portfolio</h1>

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

<h2>My Projects</h2>

<p>
    Here are some of the projects I have built.
</p>

HTML provides the structure:

Portfolio
   ↓
Introduction
   ↓
Projects
   ↓
Project information

Later, CSS will make this structure visually appealing.

JavaScript can then add interactive behaviour.

🧩 HTML + CSS + JavaScript

Think about a car:

HTML → The structure

Provides the basic parts:

• Body

• Seats

• Wheels

• Dashboard

CSS → The appearance

Controls:

• Colors

• Size

• Design

• Layout

JavaScript → Behaviour

Controls things such as:

• Interactive controls

• Dynamic behaviour

• Responses to user actions

Together, they form the foundation of frontend web development.

🧠 Key Points to Remember

• HTML = HyperText Markup Language

• HTML structures webpage content.

• HTML is a markup language, not a programming language.

• HTML uses elements and tags.

• <head> contains information about the document.

• <body> contains the main visible webpage content.

• <!DOCTYPE html> declares the document type.

• HTML provides structure, CSS provides styling, and JavaScript provides behaviour.

Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 13

HTML Syntax, Tags & Elements

Now that you understand what HTML is, let's learn how HTML actually works.

1. What is an HTML Tag?

A tag tells the browser what type of content something is.

Example:

<h1>Hello World</h1>

Here:

<h1> → opening tag

Hello World → content

</h1> → closing tag

The complete structure is called an HTML element.

2. HTML Element

An HTML element usually looks like this:

<tag>Content</tag>

For example:

<p>This is a paragraph.</p>
<h2>About Me</h2>
<button>Click Me</button>

Think of an element as a complete building block of a webpage.

3. Opening and Closing Tags

Most HTML elements have both.

<p>Hello</p>

Opening:

<p>

Closing:

</p>

Notice the / in the closing tag.

4. Some Tags Don't Need a Closing Tag

Some HTML elements are void elements.

Example:

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

They don't have a separate closing tag.

5. HTML Attributes

Attributes provide additional information about an element.

Example:

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

Here:

href="https://example.com" is an attribute.

Another example:

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

The image has two attributes:

src → location of the image

alt → description of the image

6. Attributes Usually Go Inside the Opening Tag

Correct:

<p class="description">Hello</p>

Incorrect:

<p>Hello</p class="description">

7. Nesting Elements

HTML elements can be placed inside other elements.

Example:

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

Here:

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

The <h1> and <p> elements are inside the <div>.

8. Proper Nesting Matters

Correct:

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

Incorrect:

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

HTML elements should be properly nested.

9. HTML Comments

Comments allow developers to leave notes in their code.

<!-- This is a comment -->

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

Example:

<!-- Website heading -->
<h1>My Portfolio</h1>

10. A Simple HTML Example

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

    <h1>Welcome to My Portfolio</h1>
    <p>I am learning web development.</p>
    <a href="about.html">About Me</a>

</body>
</html>

The browser reads the HTML structure and builds the webpage from these elements.

Key Takeaway

HTML is essentially the structure of your webpage.

<h1> → Heading

<p> → Paragraph

<a> → Link

<img> → Image

<button> → Button

Once you understand tags, elements, attributes, and nesting, you'll be able to start building real webpage structures.

Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 14

HTML Document Structure

Before learning individual HTML tags in depth, you need to understand how a complete HTML document is organized.

1. Basic HTML Structure

Every normal HTML page follows a structure similar to this:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
</body>
</html>

Think of it like a building:

HTML Document

├──

│ ├── → Page information

│ └── → Visible webpage content

2. <!DOCTYPE html>

This tells the browser that the document uses modern HTML.

It is a declaration, not a normal HTML element.

3.

This is the root element of the document.

Almost everything else belongs inside <html>.

4.

The <head> contains information about the webpage.

Common things placed inside it include:

<meta> <link> <style> <script></strong>

Much of this information isn't directly displayed as page content.

5. <title></strong><br>
The title usually appears in the browser tab.

It is also important for search engines and accessibility.

6. <body>

The <body> contains the main content users interact with and see.

Examples: Headings, Paragraphs, Images, Links, Buttons, Forms, Lists, Videos

7. <meta>

<meta> provides information about the document.

A very common example is: <meta charset="UTF-8">

You will also commonly see: <meta name="viewport" content="width=device-width, initial-scale=1.0">

This helps webpages display properly on mobile devices.


8. <link>

<link> is commonly used to connect external resources to the HTML document.

For example: <link rel="stylesheet" href="style.css">

9. Complete Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
    <p>I am learning web development.</p>
    <a href="about.html">About Me</a>
</body>
</html>

10. What Happens When the Browser Opens It?

HTML file → Read DOCTYPE → Read html → Process head → Load metadata, title, CSS → Process body → Build webpage → Display to user

11. vs

: Information ABOUT the webpage

: Content OF the webpage

🧠 Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 15

HTML Headings, Paragraphs & Text Formatting

Now let's learn the most common HTML elements used to display and organize text on a webpage.

1. HTML Headings

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

The hierarchy is:

<h1> Most important

↓

<h2>

↓

<h3>

↓

<h4>

↓

<h5>

↓

<h6> Least important

2. <h1> — Main Heading

Usually, <h1> represents the main heading of a page.

<h1>My Portfolio</h1>

For example:

My Portfolio

─────────────

About Me

Projects

Contact

3. <h2> — Major Sections

Use <h2> for major sections under the main heading.

<h1>My Portfolio</h1>

<h2>About Me</h2>
<h2>My Projects</h2>
<h2>Contact</h2>

4. <h3> — Subsections

If a section contains smaller sections, use <h3>.

<h2>My Projects</h2>

<h3>Web Development Projects</h3>
<h3>JavaScript Projects</h3>

This creates a logical content hierarchy.

5. Paragraphs

Use <p> for normal paragraphs.

<p>
    I am learning web development and building websites.
</p>

Multiple paragraphs can be written separately:

<p>HTML provides the structure of a webpage.</p>

<p>CSS controls its appearance.</p>

<p>JavaScript adds interactivity.</p>

6. Bold Text

Use <strong> when the text has strong importance.

<p>
    <strong>Important:</strong> Save your work regularly.
</p>

The browser normally displays it in bold.

7. Italic or Emphasized Text

Use <em> to emphasize text.

<p>
    This is <em>very important</em>.
</p>

The browser normally displays emphasized text in italic.

8. <br> — Line Break

<br> moves content to the next line.

<p>
    Hello!<br>
    Welcome to my website.
</p>

Result:

Hello!

Welcome to my website.

However, <br> should not normally be used to create large spaces between sections. CSS should handle layout and spacing.

9. <hr> — Thematic Break

<hr> represents a thematic break between sections.

<h2>About Me</h2>
<p>Information about me.</p>

<hr>

<h2>Projects</h2>
<p>My recent projects.</p>

The browser normally displays a horizontal line.

10. <mark> — Highlighted Text

<p>
    Learn <mark>
HTML</mark> before moving to CSS.
</p>

The browser normally highlights the marked text.

11. <small> — Smaller Text

<p>
    Website Terms <small>Last updated in 2026</small>
</p>

It represents side comments or small print.

12. Putting Everything Together

<h1>Web Development</h1>

<p>
    Web development is the process of creating websites
    and web applications.
</p>

<h2>Frontend Development</h2>

<p>
    <strong>HTML</strong> provides structure,
    <strong>CSS</strong> provides styling,
    and <strong>JavaScript</strong> adds behaviour.
</p>

<h3>Important Technologies</h3>

<p>
    Learn <em>HTML</em> first, then move to CSS and JavaScript.
</p>

<hr>

<h2>My Learning Journey</h2>

<p>
    I am learning <mark>web development</mark> step by step.
</p>

🧠 Remember

• <h1> → Main page heading

• <h2> → Major section

• <h3> → Subsection

• <p> → Paragraph

• <strong> → Strong importance

• <em> → Emphasis

• <br> → Line break

• <hr> → Thematic break

• <mark> → Highlighted text

• <small> → Smaller/side text

Key Takeaway

HTML text elements are not just about making text look different. They help create a meaningful structure and hierarchy that browsers, search engines, accessibility tools, and users can understand.

Double Tap ❤️ For Part-16

🌐 Web Development Roadmap — Part 16

HTML Links — Tag

Links are one of the most important parts of the web. They allow users to move from one page or website to another.

1. Creating a Link

HTML uses the <a> (anchor) element to create links.

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

The browser displays:

Visit Google

When the user clicks it, the browser navigates to the specified URL.

2. The href Attribute

href stands for Hypertext Reference.

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

Here:

<a> → Creates the link

href → Specifies where the link goes

URL → Destination

Text → What the user clicks

3. Linking to Another Page

Suppose your project contains:

my-website/
├── index.html
├── about.html
└── contact.html

From index.html:

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

<a href="contact.html">Contact</a>

These are called relative links because they point to files within your website.

4. Linking to Another Website

You can also link to an external website:

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

The complete URL is used for an external destination.

5. Opening a Link in a New Tab

You can use target="_blank":

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

This tells the browser to open the destination in a new browsing context, commonly a new tab.

For external links, it's also good practice to use:

<a
    href="https://www.example.com"
    target="_blank"
    rel="noopener noreferrer">
    Visit Website
</a>

6. Email Links

You can create a link that opens the user's email application:

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

7. Telephone Links

You can create a clickable phone link:

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

This is especially useful on mobile websites.

8. Linking to a Section on the Same Page

You can jump to a specific section using an id.

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

<h2 id="contact">Contact Me</h2>

The flow is:

Click "Go to Contact"

↓

Find id="contact"

↓

Jump to that section

9. Navigation Menu Example

A simple website navigation could look like:

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

This creates the foundation of a website's navigation.

10. Link vs Button

This is important.

Use a link when the user is going somewhere:

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

Use a button when the user is performing an action:

<button>Submit</button>

For example:

Go to Profile → <a>

Submit Form → <button>

Open Article → <a>

Delete Account → <button>

🧠 Remember

<a>

↓

Creates a link

href

↓

Specifies destination

target="_blank"

↓

Opens in a new browsing context

id

↓

Can create a destination within the same page

Key Takeaway

The <a> element connects the web together.

Page A

↓

<a href="page-b.html">

↓

Page B

Without links, navigating between webpages would be much harder.

Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 17

HTML Images — <img> Tag

Images make webpages more visual and engaging. HTML provides the <img> element to display images.

1. Adding an Image

<img src="photo.jpg" alt="A beautiful landscape">

Unlike elements such as <p>, <img> does not need a closing tag.

2. The src Attribute

src stands for source.

It tells the browser where the image is located.

<img src="images/profile.jpg" alt="Profile photo">

The browser follows the path:

HTML
 ↓
src="images/profile.jpg"
 ↓
images folder
 ↓
http://profile.jpg
 ↓
Display image

3. The alt Attribute

alt provides alternative text describing the image.

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

It is important for accessibility and can also be displayed if the image cannot be loaded.

A good alt describes the actual image:

<img src="dog.jpg" alt="Golden retriever sitting in a park">

Avoid unnecessary descriptions such as:

alt="image"

4. Images Inside Folders

Suppose your project looks like:

my-website/
├── http://index.html
├── http://style.css
└── images/
    ├── http://logo.png
    └── http://profile.jpg

You can write:

<img src="images/logo.png" alt="Company logo">

5. Image Dimensions

You can specify dimensions using width and height attributes:

<img
    src="profile.jpg"
    alt="Profile photo"
    width="300"
    height="300">

However, modern websites commonly use CSS to control presentation and responsive sizing.

6. Absolute vs Relative Image Paths

Relative path:

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

This refers to a file within your project.

An external image can use a full URL:

<img
    src="https://example.com/photo.jpg"
    alt="Example photo">

For real projects, images are often hosted as part of your application or through an image/CDN service.

7. Images as Links

You can place an image inside an anchor element:

<a href="https://example.com">
    <img src="logo.png" alt="Example website">
</a>

Now clicking the image follows the link.

8. Decorative Images

Not every image provides meaningful information.

For a purely decorative image, an empty alt is appropriate:

<img src="decorative-line.png" alt="">

This tells assistive technologies that the image can be ignored.

9. Common Image Formats

You will commonly encounter:

JPEG / JPG → Photos
PNG → Transparency and graphics
SVG → Logos and scalable graphics
WebP → Modern web images
AVIF → Modern, highly compressed images
GIF → Simple animations

The appropriate format depends on the type of image and performance requirements.

10. Complete Example

<!DOCTYPE html>

<html>
<head>
    <title>My Portfolio</title>
</head>

<body>

    <h1>My Portfolio</h1>

    <img
        src="images/profile.jpg"
        alt="Profile photo"
        width="300"
        height="300">

    <h2>My Projects</h2>

    <img
        src="images/project.png"
        alt="Screenshot of my web development project">

</body>
</html>

🧠 Remember

<img>
  ↓
Displays an image

src
  ↓
Where the image comes from

alt
  ↓
Alternative description

width / height
  ↓
Image dimensions

Key Takeaway

The basic image structure is:

<img src="image.jpg" alt="Description of image">

The two most important attributes to remember are:

src → image location
alt → meaningful alternative text

Double Tap ❤️ For Part-18

🌐 Web Development Roadmap — Part 18

HTML Lists

Lists are used whenever information needs to be presented as a group of related items.

1. Unordered List

An unordered list displays items with bullets.

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

It produces:

• HTML

• CSS

• JavaScript

<ul> means unordered list.

2. List Item

Each item inside a list uses <li>.

<li>HTML</li>

Think of it as:

<ul> → List container

↓

<li> → Individual item

3. Ordered List

An ordered list displays items in a sequence, usually using numbers.

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

It produces:

1. Learn HTML

2. Learn CSS

3. Learn JavaScript

<ol> means ordered list.

4. When to Use Which?

Use <ul> when order doesn't matter:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Use <ol> when order or sequence matters:

<ol>
    <li>Create an account</li>
    <li>Verify your email</li>
    <li>Log in</li>
</ol>

5. Nested Lists

A list can contain another list.

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

    <li>
        Backend
        <ul>
            <li>Node.js</li>
            <li>Express</li>
        </ul>
    </li>
</ul>

The structure becomes:

• Frontend

• HTML

• CSS

•

JavaScript

•

Backend

• Node.js

• Express

6. Lists in Navigation

Lists are commonly used to structure navigation menus.

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

CSS can later transform this into a horizontal navigation bar.

7. Lists in Real Websites

Lists are useful for many things:

• Shopping items

• Features

• Navigation menus

• Steps

• Skills

• Categories

• Search results

• Product specifications

For example:

<h2>My Skills</h2>

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

8. Important Rule

<li> should normally be used as a child of a list such as <ul> or <ol>.

Good:

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

Not appropriate:

<li>HTML</li>
<li>CSS</li>

🧠 Remember

<ul> → Unordered list → Bullets

<ol> → Ordered list → Numbers/sequence

<li> → List item → Individual item

Key Takeaway

<ul>
   ↓
Unordered group
   ↓
<li> Item
<li> Item
<li> Item

and

<ol>
   ↓
Ordered group
   ↓
<li> Step 1
<li> Step 2
<li> Step 3

Lists are simple, but they are fundamental to creating well-structured HTML content.

Double Tap ❤️ For More