Introduction to HTML

📚 Lesson 1 of 25 • 🕑 8 min read • Beginner

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure web pages. Every website you visit — Google, YouTube, Instagram — is built with HTML at its core.

HTML is NOT a programming language. It is a markup language — it uses tags to describe the structure and meaning of content.

How Does a Web Page Work?

When you type a URL in your browser, here is what happens:

Your browser sends a request to a web server
The server sends back an HTML file
Your browser reads the HTML and displays it as a web page

HTML tells the browser what to show. CSS tells it how it looks. JavaScript makes it interactive.

Your First HTML File

Every HTML page follows this basic structure. This is the skeleton every page is built on:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>

  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>

</body>
</html>

Breaking It Down

Let's understand each line:

<!DOCTYPE html> — Tells the browser this is an HTML5 document
<html lang="en"> — The root element; lang="en" helps screen readers and SEO
<head> — Contains meta information (not visible on the page)
<meta charset="UTF-8"> — Supports all characters including Tamil, Hindi etc.
<meta name="viewport"> — Makes the page responsive on mobile
<title> — The text shown in the browser tab
<body> — Everything visible on the page goes here
<h1> — A main heading
<p> — A paragraph

What is a Tag?

HTML tags are keywords surrounded by angle brackets. Most tags come in pairs — an opening tag and a closing tag:

HTML

<p>This is a paragraph.</p>
<!--  ^^^opening          ^^^closing (has a forward slash) -->

Some tags are self-closing — they don't need a closing tag:

HTML

<img src="photo.jpg" alt="A photo">
<br>         <!-- line break -->
<hr>         <!-- horizontal line -->
<meta charset="UTF-8">

Try It Yourself

Right now, open Notepad (Windows) or TextEdit (Mac), paste the code above, save it as index.html, and open it in your browser. You'll see your first web page!

HTML Comments

Comments are notes in your code — the browser ignores them. Use them to explain your code:

HTML

<!-- This is a comment. It will NOT appear on the page. -->
<p>This text IS visible.</p>

<!-- Multi-line comments work too:
     This line is also hidden.
     Very useful for debugging! -->

Key Points to Remember

HTML = Structure of a web page
Tags are surrounded by < > angle brackets
Most tags have an opening <tag> and closing </tag>
The <head> is for settings; <body> is what users see
HTML is not case-sensitive, but lowercase is best practice

Next: Text Editors & Setup →