In this module, students will learn the fundamental concepts of HTML and understand how websites are created and displayed in a web browser. No previous programming or web-development experience is required.

By the end of this module, students will understand what HTML is, how the web works, how to set up a basic development environment, how to create their first HTML page, and how HTML tags and elements work.

Module Learning Objectives

After completing this module, you will be able to:

Explain what HTML is and why it is used.
Understand the basic structure of the World Wide Web.
Explain the difference between HTML, CSS, and JavaScript.
Set up a basic HTML development environment.
Create an HTML document.
Understand HTML tags and elements.
Understand opening and closing tags.
Nest HTML elements correctly.
Create your first simple webpage.

Lesson 1.1 What is HTML?

Introduction

HTML is the foundation of almost every webpage you visit on the internet.

The word HTML stands for:

HyperText Markup Language

HTML is a markup language used to structure content on a webpage.

HTML tells the browser what different pieces of content are. For example:

This is a heading.
This is a paragraph.
This is an image.
This is a link.
This is a list.
This is a form.
This is a table.

HTML does not primarily control how a webpage looks. Instead, it defines the structure and meaning of the content.

What Does "HyperText" Mean?

HyperText means text that can contain links to other documents or webpages.

For example:

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

The user can click the link and navigate to another webpage.

This ability to connect documents through links is one of the fundamental ideas behind the web.

What Does "Markup Language" Mean?

A markup language uses special symbols or tags to describe the structure of content.

For example:

<h1>My Website</h1>

Here:

<h1> tells the browser that the content is a main heading.
My Website is the content.
</h1> marks the end of the heading.

HTML therefore marks up content so browsers can understand its structure.

Is HTML a Programming Language?

No.

HTML is generally classified as a markup language, not a programming language.

HTML doesn't provide programming concepts such as:

Loops
Functions
Conditional logic
Variables in the programming-language sense

Instead, HTML describes the structure of a document.

For example:

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

CSS is then used to style that content, while JavaScript can add behavior and interaction.

HTML vs CSS vs JavaScript

Modern websites commonly use three core technologies:

Technology	Main Purpose
HTML	Structure and content
CSS	Appearance and layout
JavaScript	Behavior and interaction

Think of a website like a house:

HTML = Structure

HTML creates things such as:

Walls
Rooms
Doors
Windows

CSS = Design

CSS controls:

Colors
Sizes
Spacing
Layout
Fonts

JavaScript = Behavior

JavaScript can make things:

Interactive
Dynamic
Responsive to user actions

For example:

<button>Click Me</button>

HTML creates the button.

CSS can make it look attractive.

JavaScript can make something happen when the user clicks it.

Why Learn HTML?

HTML is one of the best technologies to learn if you want to enter web development.

Learning HTML helps you understand:

How websites are structured
How browsers interpret webpages
How links work
How images are displayed
How forms work
How semantic webpages are created
How CSS and JavaScript connect to webpages

HTML is also relatively easy for beginners to start learning.

Where is HTML Used?

HTML is used for many types of websites and web applications, including:

Personal websites
Portfolio websites
Blogs
News websites
Business websites
Educational websites
E-commerce websites
Web applications
Documentation websites
Landing pages

Even large web applications ultimately deliver HTML to the browser.

Example

Here is a very simple webpage:

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

<body>

    <h1>Welcome to My Website</h1>

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

</body> </html>

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

We will break this code down throughout the course.

Key Takeaways

HTML stands for HyperText Markup Language.
HTML is a markup language.
HTML structures webpage content.
HTML is not a programming language.
CSS is used for presentation and styling.
JavaScript is used for behavior and interaction.
HTML is fundamental to web development.

Lesson 1.2 — How the Web Works

Before learning HTML deeply, it is useful to understand what happens when you visit a website.

Suppose you type:

https://example.com

into your browser.

Several things happen behind the scenes.

What is a Website?

A website is a collection of related webpages and resources available through the internet.

A website can contain:

HTML files
CSS files
JavaScript files
Images
Videos
Fonts
Databases
Other resources

What is a Webpage?

A webpage is a single document displayed in a web browser.

For example:

example.com/
example.com/about
example.com/contact

These may represent different webpages belonging to the same website.

What is a Web Browser?

A web browser is software that retrieves and displays webpages.

Examples include:

Google Chrome
Microsoft Edge
Mozilla Firefox
Safari
Opera

The browser reads HTML and converts it into the visual webpage you see.

For example:

<h1>Hello World</h1>

The browser interprets this HTML and displays:

Hello World

What is a Web Server?

A web server is a computer system or software that stores and delivers website resources.

A simplified process looks like this:

User
  ↓
Web Browser
  ↓
Internet
  ↓
Web Server
  ↓
Website Files
  ↓
Browser
  ↓
Webpage

Client and Server

A browser is commonly referred to as the client.

The machine or system providing the website resources is the server.

For example:

CLIENT                         SERVER

Chrome      ───────────────→   Website Server
            Request

Chrome      ←───────────────   Website Server
            Response

The browser requests resources, and the server responds.

What is HTTP?

HTTP stands for:

HyperText Transfer Protocol

HTTP is a protocol used for communication between clients and servers on the web.

A browser can send an HTTP request to a server.

The server then sends a response.

What is HTTPS?

HTTPS stands for:

HyperText Transfer Protocol Secure

HTTPS provides encrypted communication between the browser and server.

You will commonly see:

https://

instead of:

http://

Modern websites generally use HTTPS.

What Happens When You Visit a Website?

A simplified process is:

Step 1 — Enter a URL

You enter something like:

https://example.com

Step 2 — Browser Finds the Server

The browser determines where the requested website is hosted.

Step 3 — Browser Sends a Request

The browser requests the webpage.

Step 4 — Server Responds

The server sends the requested resources.

Step 5 — Browser Processes the HTML

The browser reads the HTML.

Step 6 — Browser Loads Other Resources

It may also request:

CSS
JavaScript
Images
Fonts
Other resources

Step 7 — Browser Renders the Page

The browser displays the webpage to the user.

Key Takeaways

A browser displays webpages.
A server provides website resources.
The browser and server communicate over the network.
HTTP and HTTPS are web communication protocols.
HTML is processed by the browser to create the webpage structure.

Lesson 1.3 — Setting Up Your Development Environment

To learn HTML, you need only a few basic tools.

What You Need

You need:

A computer
A web browser
A code editor

You do not need an expensive development environment.

Recommended Browser

You can use any modern browser.

Examples:

Google Chrome
Microsoft Edge
Mozilla Firefox
Safari

For this course, Chrome or Edge is perfectly suitable.

Code Editor

A code editor is software used to write code.

Popular editors include:

Visual Studio Code
Sublime Text
Notepad++
WebStorm

For this course, we recommend Visual Studio Code.

Creating Your First Project Folder

Create a folder somewhere on your computer.

For example:

html-course

Inside that folder, create:

html-course/
└── index.html

The index.html file will be our first webpage.

Creating index.html

Open your code editor.

Create a new file called:

index.html

The .html extension tells the computer and editor that this is an HTML file.

Opening the HTML File

You can open the HTML file in a browser.

The browser will display the webpage created by your HTML code.

At first, the page will be empty because we haven't added any content.

Using Developer Tools

Modern browsers provide developer tools.

In Chrome or Edge, you can usually open Developer Tools with:

F12

or:

Ctrl + Shift + I

Developer Tools allow developers to inspect:

HTML
CSS
JavaScript
Network requests
Console messages
Page performance

We will use browser developer tools later in the course.

Lesson 1.4 — Your First HTML Page

Now let's create our first HTML document.

Type the following:

<!DOCTYPE html> <html> <head>
    <title>My First Webpage</title> </head> <body>

    <h1>Hello, World!</h1>

    <p>Welcome to my first HTML webpage.</p>

</body> </html>

Save the file.

Then open it in your browser.

You should see:

Hello, World!

and:

Welcome to my first HTML webpage.

Understanding the Code

Let's examine the code line by line.

`<!DOCTYPE html>`

<!DOCTYPE html>

This tells the browser that the document uses modern HTML.

It is called the DOCTYPE declaration.

It should normally appear at the beginning of an HTML document.

`<html>`

<html>

This is the root element of the HTML document.

Almost everything else belongs inside the <html> element.

`<head>`

<head>

The <head> contains information about the document that is generally not displayed as the main page content.

For example:

Page title
Metadata
Stylesheets
Other document information

`<title>`

<title>My First Webpage</title>

The title identifies the webpage.

It is commonly displayed in the browser tab.

`<body>`

<body>

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

For example:

Headings
Paragraphs
Images
Links
Forms
Tables

`<h1>`

<h1>Hello, World!</h1>

<h1> represents a top-level heading.

`<p>`

<p>Welcome to my first HTML webpage.</p>

<p> represents a paragraph.

Lesson 1.5 — HTML Elements and Tags

Understanding tags and elements is one of the most important concepts in HTML.

What is an HTML Tag?

A tag is markup written inside angle brackets.

Example:

<p>

Another example:

<h1>

Opening and Closing Tags

Many HTML elements have an opening tag and closing tag.

Example:

<p>Hello</p>

Here:

<p>

is the opening tag.

And:

</p>

is the closing tag.

What is an HTML Element?

An HTML element generally consists of:

Opening Tag + Content + Closing Tag

For example:

<p>Hello World</p>

The complete structure is an HTML element.

Another Example

<h1>My Website</h1>

Here:

<h1> = opening tag
My Website = content
</h1> = closing tag
Complete structure = HTML element

Void Elements

Not every HTML element has a closing tag.

Some elements are called void elements.

For example:

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

The <img> element does not use a closing </img> tag.

Other examples include:

<br> <hr> <input> <meta> <link>

You will learn these elements in later modules.

Nested Elements

HTML elements can be placed inside other elements.

For example:

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

Here, the <strong> element is inside the <p> element.

This is called nesting.

Correct Nesting

Always close nested elements in the correct order.

Correct:

<p>
    This is <strong>important</strong>.
</p>

Incorrect:

<p>
    This is <strong>important.
</p> </strong>

A good rule is:

The element you open last should generally be the element you close first.

HTML is Case-Insensitive, But Use Lowercase

HTML tag names are generally case-insensitive.

These may be interpreted similarly:

<H1>Hello</H1>

and:

<h1>Hello</h1>

However, modern HTML development convention is to use lowercase tags:

<h1>Hello</h1>

This makes code cleaner and more consistent.

HTML Attributes — Introduction

HTML elements can have additional information called attributes.

Example:

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

Here:

href="https://example.com"

is an attribute.

The attribute provides additional information about the element.

You will learn attributes in detail in Module 2.

Module 1 Practical Exercises

Exercise 1 — Hello World

Create a webpage containing:

Hello, World!

Use an <h1> element.

Exercise 2 — Introduction

Create a webpage containing:

Your name
Your profession or interest
A short introduction

Example structure:

<h1>My Name</h1>

<p>I am learning web development.</p>

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

Exercise 3 — About Me

Create an HTML page with:

A main heading
Two paragraphs
A second-level heading
Another paragraph

For example:

<h1>About Me</h1>

<p>My name is Alex.</p>

<p>I am interested in web development.</p>

<h2>My Goal</h2>

<p>My goal is to become a professional web developer.</p>

Module 1 Mini Project

Project: My First Personal Webpage

Create a webpage called:

index.html

Your webpage should contain:

1. Page Title

Set the browser title to:

My Personal Website

2. Main Heading

Add:

Welcome to My Website

3. Introduction

Write a short paragraph introducing yourself.

4. About Section

Create an <h2> heading:

About Me

Then write two paragraphs.

5. Learning Goal

Create another section:

My Learning Goal

Explain what you want to learn from the course.

Expected Structure

<!DOCTYPE html> <html>

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

<body>

    <h1>Welcome to My Website</h1>

    <p>Hello! My name is Alex.</p>

    <h2>About Me</h2>

    <p>I am interested in technology and web development.</p>

    <p>I am currently learning HTML.</p>

    <h2>My Learning Goal</h2>

    <p>
        My goal is to learn how to build professional websites.
    </p>

</body>

</html>

Module 1 Knowledge Check

Question 1

What does HTML stand for?

Answer: HyperText Markup Language

Question 2

Is HTML a programming language?

Answer: No. HTML is a markup language.

Question 3

What is HTML primarily used for?

Answer: Structuring content on webpages.

Question 4

What does CSS primarily control?

Answer: The appearance, styling, and layout of webpages.

Question 5

What does JavaScript primarily provide?

Answer: Behavior and interactivity.

Question 6

Which element contains the main visible content of a webpage?

Answer: <body>

Question 7

Which element defines the webpage title?

Answer: <title>

Question 8

Which element is used for the main heading?

Answer: <h1>

Question 9

Which element is used for a paragraph?

Answer: <p>

Question 10

What is the purpose of <!DOCTYPE html>?

Answer: It declares that the document is an HTML document and enables standards-based rendering in modern browsers.

Module 1 Summary

In this module, you learned the fundamental concepts needed to begin working with HTML.

You learned:

HTML

→ HyperText Markup Language

HTML's job

→ Structure webpage content

CSS's job

→ Style webpage content

JavaScript's job

→ Add behavior and interaction

You also learned:

How the web works
Browser and server concepts
HTTP and HTTPS
How to set up an HTML project
How to create an HTML document
HTML tags
HTML elements
Opening and closing tags
Nested elements
Void elements
Your first HTML webpage

Module 1 Completion Challenge

Before moving to Module 2, build a webpage without copying the project code directly.

Create:

index.html

Your page should contain:

Your Name
Short Introduction

About Me
Two paragraphs

My Skills
A short description

My Goal
A short description

At this stage, don't worry about making the page beautiful. The goal is to practice HTML structure.

Once you can create this page yourself, you're ready for Module 2: HTML Document Structure, Attributes & Metadata.

HTML Mastery: From Beginner to Web Developer

Module 1: Introduction to HTML

Module Learning Objectives

Lesson 1.1 What is HTML?

Introduction

What Does "HyperText" Mean?

What Does "Markup Language" Mean?

Is HTML a Programming Language?

HTML vs CSS vs JavaScript

Why Learn HTML?

Where is HTML Used?

Example

Key Takeaways

Lesson 1.2 — How the Web Works

What is a Website?

What is a Webpage?

What is a Web Browser?

Hello World

What is a Web Server?

Client and Server

What is HTTP?

What is HTTPS?

What Happens When You Visit a Website?

Step 1 — Enter a URL

Step 2 — Browser Finds the Server

Step 3 — Browser Sends a Request

Step 4 — Server Responds

Step 5 — Browser Processes the HTML

Step 6 — Browser Loads Other Resources

Step 7 — Browser Renders the Page

Key Takeaways

Lesson 1.3 — Setting Up Your Development Environment

What You Need

Recommended Browser

Code Editor

Creating Your First Project Folder

Creating index.html

Opening the HTML File

Using Developer Tools

Lesson 1.4 — Your First HTML Page

Understanding the Code

<!DOCTYPE html>

<html>

<head>

<title>

<body>

<h1>

<p>

Lesson 1.5 — HTML Elements and Tags

What is an HTML Tag?

Opening and Closing Tags

What is an HTML Element?

Another Example

Void Elements

Nested Elements

Correct Nesting

HTML is Case-Insensitive, But Use Lowercase

HTML Attributes — Introduction

Module 1 Practical Exercises

Exercise 1 — Hello World

Exercise 2 — Introduction

Exercise 3 — About Me

Module 1 Mini Project

Project: My First Personal Webpage

1. Page Title

2. Main Heading

3. Introduction

4. About Section

5. Learning Goal

Expected Structure

Module 1 Knowledge Check

Question 1

Question 2

Question 3

Question 4

Question 5

Question 6

Question 7

Question 8

Question 9

`<!DOCTYPE html>`

`<html>`

`<head>`

`<title>`

`<body>`

`<h1>`

`<p>`