Introduction to HTML - Complete Notes, Theory & Quiz | Atif Academy

🗺️ Chapter Roadmap

1. What is HTML?
2. The Basic HTML Structure
3. Tags vs. Elements
4. HTML Attributes (Extra Powers)

1 What is HTML?

HTML stands for HyperText Markup Language. Think of HTML as the skeleton or the building blocks of a webpage. It is used to structure the content on the web.

💡 Important Note: HTML is not a programming language (like Python or C++). It cannot do math or make logical decisions. It is a Markup Language used only to format and display text, images, and links.

🔗

HyperText

Text that contains links (URLs) connecting one webpage to another webpage.

🏗️

Markup

Special tags used to format text and tell the browser how to display the content.

🗣️

Language

The standard language that web browsers (like Chrome, Safari) understand.

2 The Basic HTML Structure

Every HTML page needs a standard format to work correctly. Think of it like a human body: it has a Head (for hidden brain information) and a Body (for everything visible).

index.html

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

3 Tags & Elements

HTML uses Tags to format content. Tags are words enclosed in angle brackets like < >. Most tags come in pairs: an Opening tag and a Closing tag.

Anatomy of an HTML Element

<p> Opening Tag

This is a paragraph.

Content

</p> Closing Tag

The whole line together is called an "HTML Element"

Void Elements (Self-Closing)

Some tags don't have a closing tag because they don't hold text inside them. They are called Empty or Void Elements.

<br> - Line Break (Creates a new line)
<hr> - Horizontal Rule (Creates a horizontal line)
<img> - Image (Shows a picture)

4 Attributes (Extra Powers)

Attributes provide extra information or special powers to HTML elements.
Rule of thumb: Attributes are ALWAYS written inside the Opening Tag.

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

Name (href)

Tells the browser WHAT kind of information you are giving. (href = Hypertext Reference).

Value ("https://...")

The actual data/link. It should always be wrapped in quotation marks " ".

1 What is HTML?

HTML stands for HyperText Markup Language. Think of HTML as the skeleton or the building blocks of a webpage. It is used to structure the content on the web.

🔗

HyperText

Text that contains links (URLs) connecting one webpage to another webpage.

🏗️

Markup

Special tags used to format text and tell the browser how to display the content.

🗣️

Language

The standard language that web browsers (like Chrome, Safari) understand.

2 The Basic HTML Structure

Every HTML page needs a standard format to work correctly. Think of it like a human body: it has a Head (for hidden brain information) and a Body (for everything visible).

index.html

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

3 Tags & Elements

HTML uses Tags to format content. Tags are words enclosed in angle brackets like < >. Most tags come in pairs: an Opening tag and a Closing tag.

Anatomy of an HTML Element

<p> Opening Tag

This is a paragraph.

Content

</p> Closing Tag

The whole line together is called an "HTML Element"

Void Elements (Self-Closing)

Some tags don't have a closing tag because they don't hold text inside them. They are called Empty or Void Elements.

<br> - Line Break (Creates a new line)
<hr> - Horizontal Rule (Creates a horizontal line)
<img> - Image (Shows a picture)

4 Attributes (Extra Powers)

Attributes provide extra information or special powers to HTML elements.
Rule of thumb: Attributes are ALWAYS written inside the Opening Tag.

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

Name (href)

Tells the browser WHAT kind of information you are giving. (href = Hypertext Reference).

Value ("https://...")

The actual data/link. It should always be wrapped in quotation marks " ".

1. Introduction to HTML

🗺️ Chapter Roadmap

1 What is HTML?

HyperText

Markup

Language

2 The Basic HTML Structure

3 Tags & Elements

Anatomy of an HTML Element

Void Elements (Self-Closing)

4 Attributes (Extra Powers)

Knowledge Check

Loading content...

1. Introduction to HTML

🗺️ Chapter Roadmap

1 What is HTML?

HyperText

Markup

Language

2 The Basic HTML Structure

3 Tags & Elements

Anatomy of an HTML Element

Void Elements (Self-Closing)

4 Attributes (Extra Powers)

Knowledge Check