Warming up the neural circuits...
You open a website. You see text, buttons, images, forms. Underneath all of it — the colours, the animations, the interactivity — is a document. A plain, structured text file. That file is .
HTML (HyperText Markup Language) is the skeleton of every web page. It tells the browser: "Here's a heading. Here's a paragraph. Here's an image. Here's a ." Everything else — for styling, for interactivity — is bolted onto that skeleton.
Think of a house. HTML is the concrete foundation, the wooden frame, the drywall — the structure. CSS is the paint, the furniture, the curtains — the decoration. JavaScript is the light switches, the thermostat, the doorbell — the things that do something when you interact with them.
You can't paint a house that doesn't have walls yet. That's why we start with HTML.
Open any text editor (VS Code, Notepad, anything). Create a new file called index.html and type this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page. I built this.</p>
</body>
</html>Save it. Double-click the file. It opens in your browser. Congratulations — you just built a web page.
The page looks boring. That's expected. Right now we're building the skeleton. In later chapters, Tailwind CSS will make it beautiful, and JavaScript will make it interactive. For now, focus on structure.
Every HTML document follows the same blueprint. Let's dissect it line by line:
| Line | What It Does |
|---|---|
<!DOCTYPE html> | Tells the browser: "This is modern HTML5. Render it in standards mode." Always goes on line 1. |
<html lang="en"> | The root . Everything lives inside it. lang="en" helps screen readers and search engines. |
<head> | Metadata zone — stuff the browser needs but the user doesn't see (title, encoding, stylesheet links). |
<meta charset="UTF-8"> | Tells the browser which character set to use — so emojis, accents, and symbols work. |
<title> | The text that appears in the browser tab. Search engines use it for the clickable link. |
<body> | The visible content. Everything the user sees goes here. |
<h1> | A top-level heading. There should be exactly one <h1> per page. |
<p> | A paragraph of text. |
Every HTML element has the same structure:
<a href="https://example.com" target="_blank">Click me</a><a href="https://example.com" target="_blank">href="https://example.com" and target="_blank" — extra instructionsClick me — what the user sees</a> — marks the endForgetting the closing tag. If you write <p>Hello without </p>, the browser will try to guess where the paragraph ends — and it often guesses wrong. Always close your tags.
Some elements are self-closing — they don't wrap content:
<img src="photo.jpg" alt="A sunset over the ocean" />
<br />
<input type="text" placeholder="Your name" /><h1> – <h6>)Headings create a document outline. <h1> is the page title. <h2> marks major sections. <h3> is for subsections.
<h1>My Blog</h1>
<h2>Latest Posts</h2>
<h3>Why I Love HTML</h3>
<p>Because it's the foundation of everything...</p>Never skip heading levels. Don't go from <h1> straight to <h3>. Screen reader users navigate by headings — a broken outline is like a book with missing chapter numbers.
<a>)The "H" in HTML stands for HyperText — linked documents. Links are what make the web a web.
<a href="/about">About Us</a>
<a href="https://github.com" target="_blank" rel="noopener">GitHub (new tab)</a>
<a href="mailto:hello@example.com"<img>)<img
src="dog.jpg"
alt="A golden retriever puppy sitting on grass"
width="400"
height="300"
/>Always include alt text. It's for screen readers, search engines, and the moment the image fails to load. Describe what's in the image, not what it's for.
<ul>, <ol>, <li>)<!-- Unordered (bullet) list -->
<ul>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<!-- Ordered (numbered) list -->
<ol>
<
<div>, <span>)These are "meaningless" containers — they group other elements together.
<div class="card">
<h2>Product Name</h2>
<p>Product description goes here.</p>
<span class="price">₹999</span>
</div><div> is block-level (starts a new line, takes full width)<span> is inline (flows within text)When a browser loads your HTML, it doesn't just display it. First, it parses the text into a tree structure called the (Document Object Model).
Every box in this tree is a node. CSS targets nodes to style them. JavaScript reaches into nodes to change them. The DOM is the bridge between your HTML and everything else.
Open your index.html in Chrome. Right-click anywhere → Inspect. You're looking at the DOM. Click the arrow icons to expand and collapse the tree. This tool — DevTools — will be your best friend throughout this course.
| You want to... | Write this |
|---|---|
| Create a paragraph | <p>Text here</p> |
| Add a heading | <h1> through <h6> |
| Add a link | <a href="URL">Text</a> |
| Add an image | <img src="path" alt="description" /> |
| Make a bullet list | <ul><li>Item</li></ul> |
| Make a numbered list | <ol><li>Item</li></ol> |
| Group elements | <div> or <span> |
| Add a line break | <br /> |
| Make text bold | <strong>text</strong> |
| Make text italic | <em>text</em> |
| Add a button | <button>Click</button> |
| Create a text | |
You wrote your first HTML document. You understand that:
In the next chapter, we'll learn about HTML forms — how to collect input from users. That's where websites start to feel like applications, not just pages.