Topic01 / 41

Introduction to HTML

What & Why

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the skeleton of every website, giving structure to content like text, images, and links.

Syntax

html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Page Title</title>
6  </head>
7  <body>
8    <h1>Hello, World!</h1>
9  </body>
10</html>

Real-World Example

A basic landing page shell for a portfolio website:

example.ts

html

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    <meta name="description" content="Priya Sharma — Frontend Developer" />
7    <title>Priya Sharma | Portfolio</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <header>
12      <h1>Priya Sharma</h1>
13      <p>Frontend Developer · Mumbai, India</p>
14    </header>
15  </body>
16</html>

Pitfalls & Interview Tips

⚠️Always include <!DOCTYPE html> — without it, browsers enter 'quirks mode' and render pages inconsistently.
⚠️lang attribute on <html> is mandatory for accessibility and SEO.
💡Interview tip: HTML is NOT a programming language — it is a markup language. Don't say 'I programmed in HTML'.

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 <meta name="description" content="Priya Sharma — Frontend Developer" /> 7 <title>Priya Sharma | Portfolio</title> 8 <link rel="stylesheet" href="style.css" /> 9 </head> 10 <body> 11 <header> 12 <h1>Priya Sharma</h1> 13 <p>Frontend Developer · Mumbai, India</p> 14 </header> 15 </body> 16</html>