Introduction to HTML
Overview
Welcome to the world of web development! HTML (HyperText Markup Language) is the absolute foundation of every website you visit, from Google to Instagram.
Think of a website as a human body. HTML is the skeleton (the bones). It gives the page its structure and shape. CSS is the skin and clothes (colors, styling). JavaScript is the brain and muscles (logic and movement).
HTML is NOT a programming language like Python or C++. It is a 'Markup Language'. This means it doesn't do complex math or logic; it simply tells the web browser (like Chrome) how to display text, images, and links on the screen.
1. What does 'HyperText' mean?
'HyperText' simply means 'text with links'. It's the ability to click on a word or a button and jump to a completely different page. That's how the internet is connected!
2. What does 'Markup Language' mean?
A 'Markup Language' uses special tags (like `<p>` or `<h1>`) to format or 'mark up' normal text. You wrap your content in these tags so the browser knows what it is reading (e.g., 'Make this a heading', 'Make this a button').
Syntax
Every HTML page starts with `<!DOCTYPE html>`. This tells the browser we are using modern HTML5. Inside, we have an `<html>` tag wrapping a `<head>` (hidden settings) and a `<body>` (what you actually see on screen).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my coding journey.</p>
</body>
</html>Common Pitfalls
- Never call HTML a 'programming language' in an interview. It's a markup language!
- Always include <!DOCTYPE html> at the very top. If you forget it, older browsers might break your design.
Real-World Example
When you right-click on any website and select 'Inspect Element', what you are seeing is the HTML structure written by a developer!
<!-- Real world landing page skeleton -->
<body>
<header>
<h1>Kartik's Portfolio</h1>
</header>
<main>
<p>Hi, I am a frontend developer.</p>
</main>
</body>