Open any browser on your phone or computer, type irctc.co.in or ncert.nic.in, and press Enter. Within a second, a fully formatted page appears — headings in bold, train timings lined up in neat rows, blue clickable links, a logo in the corner. It feels like magic. It is not magic. Every one of those pages is, underneath, a plain text file sitting on a computer somewhere (a web server), and your browser is doing nothing more exotic than reading that text file and following the instructions written inside it. In this chapter you will learn to write that text file yourself, understand exactly how the browser turns it into a page, and style it so it looks the way you want. By the end, you will have built and understood a real webpage from the first character to the last.
What a browser actually receives
Here is the key idea to hold onto for the rest of this chapter: a webpage is a text document with labels attached to its parts. Suppose you handwrite a note for your class WhatsApp group: "Maths test Friday. Bring calculator." If you want the word "Friday" to stand out, you might underline it. A browser cannot see underlines in plain text — it only sees characters. So instead of underlining, we surround the important word with a label, like this: <u>Friday</u>. When a browser reads that text, it recognises <u> and </u> as an instruction — "underline whatever is between these two markers" — and removes the markers themselves from what you see, leaving only an underlined word. This system of wrapping content in labels is called markup, and the language that defines which labels exist and what they mean is HTML — HyperText Markup Language.
This is a good place to correct a very common misunderstanding. Students often say "I am learning HTML coding" or "HTML programming." HTML is not a programming language. A programming language (like Python or JavaScript) can make decisions ("if the score is above 90, print A grade"), repeat actions ("do this 10 times"), and calculate values. HTML cannot do any of that. It only describes the structure and meaning of content — "this piece of text is a heading," "this piece of text is a list," "this is a picture." It never decides anything or calculates anything. Later, when you meet JavaScript, you will see what an actual programming language embedded in a webpage looks like. For now, think of HTML as labelling, not programming.
The anatomy of an HTML document
Every HTML file follows the same skeleton. Let's look at the smallest complete webpage possible and trace exactly what the browser does with each line.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, India!</h1>
<p>This is my first webpage.</p>
</body>
</html>Tracing this line by line, the way the browser does:
<!DOCTYPE html>is not really an HTML tag — it is the very first line of the file and it tells the browser "interpret everything below using the modern HTML5 rules." Without it, older browsers may guess wrong and render things inconsistently.<html>…</html>wraps the entire document. It is the root container — everything else lives inside it.<head>…</head>holds information about the page that is not displayed as visible content on the page itself — things like the page title, links to style files, and search-engine information.<title>My First Page</title>sets the text shown on the browser tab or window title bar. Note carefully: this text does not appear inside the page body. A very common beginner mistake is expecting the title to show up as a heading on the page — it does not.<body>…</body>holds everything the visitor actually sees rendered on the page.<h1>Hello, India!</h1>is the largest, most important heading on the page. The browser renders it in large, bold text by default.<p>This is my first webpage.</p>is an ordinary paragraph of text, rendered in normal-sized font below the heading.
If you saved these exact lines in a file called index.html and double-clicked it, your browser would open it immediately — no internet connection and no web server required. This corrects another common misconception: students often assume you need to be "online" or need a server to see an HTML page. You do not. A browser can open and render any HTML file sitting on your own computer. A server only becomes necessary when you want other people, elsewhere, to be able to reach your page over the internet.
Tags, elements, and attributes
The building block of HTML is called an element. Most elements have three parts: an opening tag, some content, and a closing tag — for example <p>content</p>. The closing tag is identical to the opening tag except for the forward slash. Tags must be closed in the reverse order they were opened — if you open <p> and then <b> inside it, you must close </b> before </p>. Getting this wrong is one of the most frequent beginner errors:
<!-- Wrong: tags close in the wrong order -->
<p><b>Important notice</p></b>
<!-- Correct: the last tag opened is the first tag closed -->
<p><b>Important notice</b></p>Some elements never contain content and therefore have no closing tag at all — these are called void elements. The most common ones are <img> (an image), <br> (a single line break), and <hr> (a horizontal rule/divider line). Writing <img></img> is incorrect; there is nothing to put between the tags, so it is simply <img>.
Elements can carry extra information called attributes, written inside the opening tag as name="value". Two attributes you will use constantly:
<a href="https://www.irctc.co.in">Book a train ticket</a>
<img src="taj-mahal.jpg" alt="The Taj Mahal at sunrise">In the first line, <a> creates a hyperlink; its href attribute stores the destination URL, while the text between the tags ("Book a train ticket") is what the visitor actually sees and clicks. In the second line, <img> is the void element that displays a picture; src tells the browser which image file to fetch and show, and alt provides fallback text — shown if the image fails to load, and read aloud by screen readers for visually impaired users. Leaving out alt is a habit worth breaking early, since accessibility is graded in real-world web development and increasingly in school projects too.
Structuring content: headings, lists, and tables
HTML gives you six levels of heading, <h1> down to <h6>, in decreasing importance and size — <h1> for the page's main title, <h2> for major sections, and so on. Never pick a heading level just because you like its font size; the numbers describe a document's outline, similar to how a textbook chapter has a title, then section headings, then sub-section headings.
Lists come in two flavours. An unordered list (bullets, no particular sequence) uses <ul>, while an ordered list (numbered, sequence matters) uses <ol>. Both hold their items in <li> (list item) tags:
<h3>Subjects this term</h3>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
</ul>
<h3>Morning routine</h3>
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Leave for school</li>
</ol>The first list renders as three bullet points in no required order. The second renders as "1. Wake up, 2. Brush teeth, 3. Leave for school" — the browser adds the numbers automatically; you never type them yourself, and if you insert a new <li> in the middle, every number below it shifts automatically.
When information naturally forms a grid — rows and columns — use a <table>, built from <tr> (table row), <th> (header cell), and <td> (data cell). A train timetable is a perfect example:
<table>
<tr>
<th>Train No.</th>
<th>Train Name</th>
<th>Departure</th>
</tr>
<tr>
<td>12951</td>
<td>Mumbai Rajdhani</td>
<td>16:00</td>
</tr>
<tr>
<td>12301</td>
<td>Howrah Rajdhani</td>
<td>16:55</td>
</tr>
</table>Tracing this: the outer <table> tag tells the browser "everything inside is a grid." Each <tr> is one row. The first row uses <th> cells, which browsers render bold and centred by default because they are column headers, not data. The next two rows use <td> for the actual values. The browser automatically lines up column widths so "Train No.", "12951" and "12301" sit in one aligned column, even though you never specified any width — it counts three <th>/<td> cells per row and builds a 3-column, 3-row grid.
Semantic structure: giving regions of the page a name
A newspaper page is not one undivided block of ink — it has a masthead at the top, a navigation strip of section names, the main story, and small print at the bottom. Modern HTML gives you tags that describe exactly these regions, so both the browser and other programs (like search engines and screen readers) understand the page's layout, not just its visual look: <header>, <nav>, <main>, and <footer>.
Each of these tags behaves like a labelled <div> (a plain, meaning-free box) — the difference is that <header>, <nav>, <main> and <footer> announce what a section of the page is for. Using plain <div> everywhere still works visually, but semantic tags make your page's structure understandable by machines too — which is exactly why they are preferred in real websites and are examined in the CBSE Computer Applications syllabus alongside basic HTML tags.
CSS: separating structure from appearance
So far, every page you have built looks like plain black text on a white background — because HTML's job is only to say what each piece of content is, never how it should look. Colour, spacing, fonts, and layout are the job of a second language: CSS, Cascading Style Sheets. Keeping these two jobs separate is deliberate: it means the same HTML content can be restyled completely (say, from a school-project look to a professional look) without touching a single word of the actual content.
A CSS rule has one consistent shape: a selector (which elements it targets), followed by curly braces containing one or more property: value; pairs.
h1 {
color: navy;
}
p {
font-size: 16px;
line-height: 1.5;
}This rule tells the browser: "find every <h1> on the page and colour its text navy blue; find every <p> and set its font size to 16 pixels with 1.5 times spacing between lines." Notice each property:value pair ends with a semicolon — forgetting it is a frequent error that can make an entire rule silently fail.
You can attach CSS to a page in three ways. Inline, using the style attribute directly on one element (fastest to write, but styles only that single element and is hard to maintain):
<p style="color: red;">Warning: exam tomorrow!</p>Internal, using a <style> block inside <head> (styles the whole page, all in one file):
<head>
<style>
h1 { color: navy; }
p { font-size: 16px; }
</style>
</head>External, linking a separate .css file (the professional approach, since one style file can control many HTML pages at once):
<head>
<link rel="stylesheet" href="style.css">
</head>Beyond targeting a tag name like h1 or p, you can target specific elements using a class (for a group of elements, marked with a dot in CSS) or an id (for one unique element, marked with a hash in CSS):
<p class="highlight">Important note</p>
/* in the CSS file or style block */
.highlight {
background-color: yellow;
}Here, class="highlight" in the HTML is just a label you invented; the CSS rule .highlight { … } (with a leading dot, matching the class name) says "apply a yellow background to anything carrying this label." You could add class="highlight" to ten different paragraphs across the page and all ten would turn yellow from this one rule.
The box model: how much space an element really takes
Here is a question that trips up almost every beginner: if you set a paragraph's width to 200 pixels, does it actually occupy exactly 200 pixels on the page? The answer is no — and understanding why is one of the most important ideas in CSS. Every HTML element the browser renders is treated as a rectangular box made of four layers, from the inside out: content, padding (space between the content and its border), border (a visible or invisible line around the padding), and margin (space between this box and its neighbours, outside the border).
Let's compute this with real numbers. Suppose you write:
p {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}The width: 200px only fixes the content box. Padding, border, and margin are added on top of that, and each applies on both sides (left and right, or top and bottom), so we double each value before adding:
- Content width: 200px
- Padding adds 20px on the left and 20px on the right: +40px
- Border adds 5px on the left and 5px on the right: +10px
- Margin adds 30px on the left and 30px on the right: +60px
Total horizontal space this single paragraph occupies on the page: 200 + 40 + 10 + 60 = 310 pixels — not 200. This is exactly why a box that "should" fit three-in-a-row sometimes wraps awkwardly to a second line: the true footprint is always bigger than the width you typed.
The diagram shows the four layers nested exactly as the browser builds them: the blue content box in the centre, wrapped by green padding, wrapped by an orange border, wrapped by the amber margin. Total width of the whole outer box: 310px, matching our arithmetic. Total height, by the same method (100 content + 40 padding + 10 border + 60 margin): 210px.
Putting it all together: building Riya's profile page
Now let's combine everything — structure, semantics, and styling — into one complete page.
<!DOCTYPE html>
<html>
<head>
<title>Riya's Profile</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f0f8ff; }
h1 { color: #1e3a8a; }
.highlight {
background-color: #fef08a;
padding: 10px;
border: 2px solid #ca8a04;
}
</style>
</head>
<body>
<h1>Riya Sharma</h1>
<p>Grade 8, Delhi Public School</p>
<p class="highlight">Favourite subject: Computer Science</p>
<ul>
<li>Reading</li>
<li>Badminton</li>
<li>Coding</li>
</ul>
</body>
</html>Trace it exactly as the browser would: the <title> sets the tab text to "Riya's Profile" — nothing about that appears in the visible page. The internal <style> block runs three rules: every <body> uses the Arial font family with a very light blue page background; every <h1> is coloured dark navy blue instead of the default black; and anything carrying class="highlight" gets a pale-yellow background, 10 pixels of padding on all sides, and a 2-pixel solid mustard-coloured border. Moving into <body>: the browser renders "Riya Sharma" as a large navy-blue heading (because <h1> matches our colour rule), then a plain paragraph stating her grade and school, then a second paragraph — this one carries the highlight class, so instead of blending into the page it appears as boxed text on a yellow background with a visible mustard border, exactly like a sticky note pulled out from ordinary text. Finally, the unordered list renders three bulleted hobbies. Every visual decision (colours, spacing, the highlighted box) came from the <style> block; every structural decision (what is a heading, what is a paragraph, what is a list) came from the HTML tags. That separation is precisely the point of learning CSS as a distinct language from HTML.
One more misconception worth naming directly
Students sometimes assume that once CSS is added, a page can respond to a user — for example, that a styled button will "do something" when clicked. It will not. CSS only controls appearance: colour, size, spacing, position. It has no way to react to a click, check a condition, or change what is displayed based on user input. Making a page interactive — validating a login form, updating a score without reloading, reacting to a button press — is the job of a third language, JavaScript, which you will meet in a later chapter. HTML gives a page its skeleton, CSS gives it its appearance, and JavaScript gives it behaviour. Keeping these three roles distinct in your mind will save you enormous confusion as your pages grow more complex.
Check your understanding
- Q: A page has
<title>Physics Notes</title>inside its<head>. Where will "Physics Notes" be visible — on the page body, or somewhere else?
A: Only on the browser tab/window title. Nothing inside<head>is displayed as page content. - Q: Find the bug:
<p><b>Warning</p></b>. Rewrite it correctly.
A: Tags must close in reverse order of opening. Correct version:<p><b>Warning</b></p>. - Q: A
<div>haswidth: 150px; padding: 15px; border: 3px solid black; margin: 25px;. What total width does it occupy on the page?
A: 150 + (2×15) + (2×3) + (2×25) = 150 + 30 + 6 + 50 = 236 pixels. - Q: You want to list the steps to reset a Wi-Fi router, where order matters. Which list tag do you use —
<ul>or<ol>— and why?
A:<ol>, because the steps must be followed in a specific numbered sequence;<ul>is for items where order does not matter. - Q: True or false: "Writing HTML is the same as writing a program, because I am typing code into a file."
A: False. HTML only marks up structure and meaning; it cannot make decisions, repeat actions, or calculate anything, which is what defines a programming language.
Summary
A webpage is a plain text file that a browser reads and renders according to labels called tags. HTML (HyperText Markup Language) supplies structure and meaning — headings with <h1> through <h6>, paragraphs with <p>, links with <a>, images with <img>, lists with <ul>/<ol> and <li>, tables with <table>, <tr>, <th>, and <td>, and page regions with semantic tags like <header>, <nav>, <main>, and <footer>. Every document follows the same skeleton: <!DOCTYPE html>, then <html> containing a <head> (metadata, invisible on the page) and a <body> (visible content). CSS (Cascading Style Sheets) supplies appearance through selector-and-property rules, attached inline, internally, or externally, and can target elements by tag, class, or id. Every rendered element is really a box with four layers — content, padding, border, and margin — and its true footprint on the page is always the sum of all four, not just the content width you specified. HTML defines structure, CSS defines appearance, and neither one makes a page interactive — that arrives later with JavaScript. With these tools, you are no longer just a visitor to websites; you can build one, line by line, and know exactly why it looks and behaves the way it does.
Think About It
Think about this: How would you explain web development basics: build your first website to a friend who has never seen a computer? What real-world analogy would you use? Imagine you had to build a system using these concepts — what would be your first step? Try this: before moving on, write down three things you learned and one question you still have.
Practice Exercises
Now it is time to practice! Complete these challenges to solidify your understanding:
- Exercise 1: Write a short program that demonstrates the core concept from this chapter. Test it with at least 3 different inputs.
- Exercise 2: Find a real-world example where web development basics: build your first website is used in an Indian company (like TCS, Infosys, Flipkart, or ISRO). Write a paragraph explaining the connection.
- Exercise 3: Create a mind-map connecting web development basics: build your first website to at least 3 other topics you have studied.