Chapter 1.2☕ 12 min read

First HTML Page

Kitchen set karo — phir biryani banao.

01Setting Up Your Kitchen

Before making biryani at Paradise, the chef sets up the kitchen — vessels, spices, gas stove. Everything in place before cooking starts.

Same with HTML. Before writing visible content, you set up the skeleton of the page. This skeleton is called the HTML boilerplate. Every single webpage on the internet starts with this.

🍚

Kitchen Analogy: The boilerplate is like arranging your kitchen before cooking. You don't skip it — you just do it fast. Same here. Type it once, then copy-paste forever.

02The HTML Boilerplate — Line by Line

Here's the complete HTML boilerplate — the skeleton of every webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyderabadi Dum Biryani Recipe</title>
  </head>
  <body>
    <h1>Hyderabadi Dum Biryani</h1>
    <h2>Ingredients</h2>
    <p>Basmati rice, mutton, yogurt, onions, saffron, ghee, spices</p>
    <h2>Steps to Cook</h2>
    <p>Marinate mutton overnight. Layer rice and meat. Seal pot with dough. Cook on low flame for 40 minutes.</p>
  </body>
</html>

Let's understand each line:

<!DOCTYPE html>MUST be first line — HTML5 declaration

<html lang="en">Root element — everything goes inside

<head>Meta info section — title, CSS, settings

<title>...</title>Browser tab text — your page's identity

<body>Visible content starts here

</html>Close the root — last line of your page

<!DOCTYPE html> — The recipe card. Tells the browser "this is HTML5, not some old HTML4." Like telling the waiter "new menu, not the old one."
<html lang="en"> — The kitchen itself. Everything lives inside this. The lang attribute tells the browser the language — important for screen readers.
<head> — The spice rack. Invisible to the user but essential. Title, meta tags, CSS links — all go here.
<body> — The cooking area. This is where the action happens. Everything the user sees goes inside body.

03The Title Tag — Your Restaurant Signboard

The <title> tag sits inside <head>. It shows up in the browser tab. Think of it as the restaurant name on the signboard — people see it before entering.

💡 Why the title matters:

The title is what appears in Google search results. A good title like "Hyderabadi Dum Biryani Recipe" helps people find your page. Always make your title descriptive and accurate.

04How to Create and Run Your First Page

Follow these three simple steps to get your page running:

Create FileOpen VS Code → New File → save as recipe.html

→

Write BoilerplateType the HTML boilerplate with your content

→

Save & OpenDouble-click the file → opens in browser

No server, no npm install, no terminal commands. Save .html file → double-click → done. That's the beauty of HTML.

05Exercise — Your Biryani Recipe Page

Now build an actual page. Create a Hyderabadi Dum Biryani recipe page using the complete boilerplate.

Open VS Code. Create a new file — name it dum-biryani-recipe.html

Copy the complete boilerplate below and fill in your recipe:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>_____ Recipe</title>
  </head>
  <body>
    <h1></h1>
    <h2>Ingredients</h2>
    <p></p>
    <h2>Steps to Cook</h2>
    <p></p>
  </body>
</html>

Complete these:

Set the title to "Hyderabadi Dum Biryani Recipe" Add an <h1> with the recipe name Add an <h2> called "Ingredients" Add a <p> listing at least 5 biryani ingredients Add an <h2> called "Steps to Cook" Add a <p> with 2-3 cooking steps

💡

Pro tip: Right-click the .html file in VS Code → "Open with Live Server" if you have the extension. Auto-refreshes on every save. Or just double-click the file.

Done — Key Points:

✅ Every HTML page needs the boilerplate — no shortcuts
✅ <!DOCTYPE html> must be the FIRST line — always
✅ <head> = invisible info, <body> = visible content
✅ <title> shows in the browser tab — don't skip it
✅ HTML files open directly in browser — no server needed
✅ Boilerplate = copy-paste template, don't memorize it

Previous1.1 — What is HTML?📋 All Chapters Next Chapter1.3 — Headings & Paragraphs →