Introduction
Overview
HTML (HyperText Markup Language) is the absolute foundation of everything you see on the internet. It is NOT a programming language like Python or JavaScript, but rather a markup language. This means it doesn't perform logic (like math or decision making); instead, it provides the skeleton and structure of a web page.
Imagine building a house. Before you can paint the walls (which is CSS) or add electricity and plumbing (which is JavaScript), you need to build the bricks and pillars. HTML is those bricks and pillars. Without HTML, there is no web page, no layout, and no content.
Syntax
Below is the code of a basic HTML page. Every HTML file must start with a document type declaration (`<!DOCTYPE html>`) so the browser knows it's reading modern HTML.
Inside it, we have the `<html>` tag which wraps the entire content. Inside the html tag, there are two main sections: the `<head>` and the `<body>`.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>My First Website</title>
6 </head>
7 <body>
8 <h1>Hello, World!</h1>
9 </body>
10</html>The `<head>` section contains hidden information (metadata) for the browser and search engines. Users DO NOT see this on the web page (except for the `<title>` which shows on the browser tab).
The `<body>` section contains everything the user actually sees on the screen, like text, images, buttons, and links.
1<!-- 🧠 HEAD: The brain. Hidden setup and info. -->
2<head>
3 <title>Visible only on browser tab</title>
4</head>
5
6<!-- 👁️ BODY: The physical body. Everything visible to the user. -->
7<body>
8 <p>This paragraph is visible on the web page.</p>
9</body>Common Pitfalls
- Always include <!DOCTYPE html> — without it, browsers enter 'quirks mode' and your page might look broken on different devices.
- Interview tip: HTML is NOT a programming language. If an interviewer asks what programming languages you know, DO NOT say HTML.
Real-World Example
A basic landing page shell for a portfolio website:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Priya Sharma | Portfolio</title>
7 </head>
8 <body>
9 <header>
10 <h1>Priya Sharma</h1>
11 <p>Frontend Developer</p>
12 </header>
13 </body>
14</html>