HTML Kya Hai? + Your First Page

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

Every page you open on the internet — Google, YouTube, your college website, an online shop — starts its life as an HTML file. HTML is the first language of the web: before a page can be styled with CSS or made alive with JavaScript, its structure is written in HTML. In this lesson you learn what HTML is, how a page is built from a fixed skeleton, and you create your very first real web page with your own hands. (Roman Urdu: Har website ki pehli zuban HTML hai — is lesson mein aap apna pehla page khud banayenge.)

Key points

HTML means HyperText Markup Language. It is the skeleton of every web page — it tells the browser what each part of the page is: this is a heading, this is a paragraph, this is an image.(Roman Urdu: HTML har website ka dhancha hai — browser ko batata hai ke page ka har hissa kya hai.)
HTML is not a programming language. There is no logic in it — no calculations, no decisions. It only marks up (labels) content with tags. CSS and JavaScript come later; HTML's one job is structure.
A web page is a file. The main page of a site is usually named index.html. The browser reads this file and shows it as a page.
Every HTML page has the same basic skeleton, and the order never changes:
- <!DOCTYPE html> — the first line. It tells the browser: "this is a modern HTML page."
- <html> — the whole page lives inside this tag.
- <head> — information about the page. It is not shown on the page itself. Example: <title> — the text you see on the browser tab.
- <body> — everything the visitor sees goes here.
A tag usually comes in a pair: an opening tag <p> and a closing tag </p> (note the / in the closing tag — that small slash is the only difference between the two). The tag pair + the content inside = an element.
Your first content tags: <h1> makes a big heading, <p> makes a paragraph.
Work like this: type code → save the file → open (or refresh) it in the browser → see the result. Edit, save, refresh — this is the daily loop of every web developer.

Code examples

Example 1 — The full skeleton with your first content

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Assalam o Alaikum!</h1>
    <p>This is my first web page. I made it myself.</p>
  </body>
</html>

What it does: The browser shows "My First Page" on the tab, a big heading "Assalam o Alaikum!" on the page, and one paragraph under it. This small file is a complete, real web page.

What you will see: a plain white page with one big bold heading at the top and one line of normal text under it — and the browser tab at the very top reads "My First Page". No colours, no design yet — but it is a real web page, made by you.

Example 2 — Head text is hidden, body text is shown

<!DOCTYPE html>
<html>
  <head>
    <title>Head Test</title>
    This line is written in the head.
  </head>
  <body>
    <p>This line is written in the body.</p>
  </body>
</html>

What it does: This example proves how head and body are different. The head is information about the page — the browser reads it but never prints it on the page. Only body content is shown to the visitor.

What you will see: the tab shows "Head Test", and the page shows only one line — "This line is written in the body." The head line is nowhere on the page. If you ever write your text in the wrong part, this is why the page looks "empty".

Example 3 — A tiny "About me" page

<!DOCTYPE html>
<html>
  <head>
    <title>About Ali</title>
  </head>
  <body>
    <h1>Ali Raza</h1>
    <p>I am a student of BS Computer Science.</p>
    <p>I am learning HTML to build my own websites.</p>
  </body>
</html>

What it does: The same skeleton, filled with two paragraphs instead of one. Each <p> is its own paragraph — the browser keeps them separate on its own.

What you will see: the name as a big heading, then two separate paragraphs under it with a clear gap between them. You did not add any empty lines — the browser leaves the space itself after every paragraph.

Quick recap

HTML = the skeleton of every web page; it labels content with tags, it is not a programming language.
A page is a file — the main page is index.html, and its name must end in .html.
The skeleton is always in this order: <!DOCTYPE html>, <html>, <head>, <body>.
<head> is never shown on the page; <title> inside it becomes the browser tab text.
Tags come in pairs — opening <p>, closing </p> — and pair + content = an element.
Your working loop for life: type → save (Ctrl + S) → refresh the browser → see the result.

Common mistakes

Saving with the wrong name — the file becomes index.html.txt and the browser shows plain text. The name must end in .html.
Forgetting the closing tag — if you write <p> and never write </p>, the browser gets confused and the rest of the page can look broken.
Editing but not saving — you refresh the browser and see the old page. Always press Ctrl + S before you refresh.

Practice

Create a folder, make index.html inside it, and write the skeleton above with your own name in the <h1> and 2 lines about yourself in the <p>. Open it in the browser.
Change the <title> and the heading, save, and refresh. Check that both the tab text and the page heading changed.