IK
Chapter 5 of 9
~16 min read
Last reviewed July 17, 2026

Building the Web with HTML, CSS and JavaScript

Create web pages using HTML tags, style them using CSS selectors and the box model, and bring them to life with JavaScript interactivity.

Written and reviewed by the IK Learning team

  • HTML Structure & Tags
  • CSS Selectors & the Box Model
  • Hyperlinks & Tables
  • JavaScript Fundamentals
  • Making Pages Responsive

This chapter teaches the three building blocks of every website: HTML for structure, CSS for styling (including the box model and selectors), and JavaScript for basic interactivity. Students learn to create hyperlinks, tables, and simple responsive layouts.

Chapter Introduction

What this chapter is about, and why it matters

This chapter is the first time you build something a stranger could open and use. Three technologies do three separate jobs, and understanding that separation is most of the chapter: HTML supplies the content and structure, CSS controls how it looks, and JavaScript decides how it behaves when someone interacts with it.

A useful comparison is a house. HTML is the brickwork and rooms. CSS is the paint, tiling and furniture. JavaScript is the wiring — the switches that make something happen. You can live in a house with no paint and no wiring, which is exactly why a page with only HTML still works, just plainly.

The best way to revise this chapter is not to read it. Type the examples into a file, open it in a browser, then deliberately break something and watch what changes. Ten minutes of that is worth an hour of memorising tag names.

What You Will Learn

The skills this chapter is assessed on

  • Write a valid HTML document with the correct basic structure.
  • Use HTML tags for headings, paragraphs, lists, images, hyperlinks and tables.
  • Apply CSS using inline, internal and external methods, and explain when each is appropriate.
  • Use element, class and ID selectors, and explain the four parts of the CSS box model.
  • Add simple interactivity with JavaScript and explain how a page becomes responsive.

Key Concepts Explained

9 core ideas — each with its definition and a separate worked example

HTML (HyperText Markup Language)

Definition

HTML is the standard markup language used to define the structure and content of a web page by wrapping content in tags that describe what each piece of content is.

Example

A minimal but complete HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Detailed Explanation

HTML is a markup language, not a programming language — it has no variables, no decisions and no loops. It describes what content *is*, and that description is what lets a screen reader announce a heading as a heading and a search engine understand the page.

The head and body sections

Definition

The <head> section holds information about the page — its title, character encoding, stylesheet links and metadata — none of which appears in the page area itself. The <body> section holds everything that is actually displayed to the visitor.

Example

The page title in the browser tab comes from <title> inside <head>. The text you read on the page comes from tags inside <body>. Put a paragraph in <head> by mistake and it simply will not appear.

Hyperlink

Definition

A hyperlink is a reference from one web resource to another, created with the anchor tag <a>, whose href attribute specifies the destination.

Example

A link that opens in a new tab:

<a href="https://example.com" target="_blank">Visit Example</a>

Detailed Explanation

The text between the opening and closing tags is what the user clicks. Writing "click here" as that text is poor practice — the visible text should describe the destination, both for readability and because screen readers can list links out of context.

CSS (Cascading Style Sheets)

Definition

CSS is the language used to control the presentation of an HTML document — colours, fonts, sizes, spacing and layout — separately from its content.

Example

A rule that makes every paragraph dark grey and comfortably spaced:

p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
}

Detailed Explanation

"Cascading" refers to how conflicting rules are resolved: rules that are more specific, or that come later, win. This is why an ID selector overrides a class selector, and why a style written directly on an element overrides both.

The three ways to apply CSS

Definition

CSS can be applied inline using an element's style attribute, internally inside a <style> block in the document head, or externally in a separate .css file linked from the head.

Example

Inline: `<p style="color:red">Hello</p>` — affects that one element. Internal: a `<style>` block in <head> — affects that one page. External: `<link rel="stylesheet" href="style.css">` — affects every page that links it.

Detailed Explanation

External is almost always the right choice for a real site. Change one line in style.css and every page updates together; with inline styles you would have to find and edit every element by hand. Inline styling is a maintenance problem disguised as a shortcut.

CSS selectors

Definition

A selector is the part of a CSS rule that specifies which HTML elements the rule applies to. An element selector targets all elements of a tag type, a class selector (written with a dot) targets all elements carrying that class, and an ID selector (written with a hash) targets the single element with that unique id.

Example

Three selectors doing three different jobs:

p        { color: blue; }     /* every paragraph */
.warning { color: red; }      /* every element with class="warning" */
#header  { background: yellow; } /* the one element with id="header" */

Detailed Explanation

A class may be reused on as many elements as you like; an ID must be unique within a page. That single rule decides which one to use: styling many things is a class, referring to one specific thing is an ID.

The CSS box model

Definition

The box model describes every HTML element as a rectangular box made of four layers: the content itself, the padding inside the border, the border around it, and the margin separating it from other elements.

Example

A button with `padding: 10px` gains breathing space inside its coloured background, so the label is not pressed against the edge. Give it `margin: 10px` instead and the background does not grow at all — the gap appears outside the button, pushing neighbouring elements away.

Detailed Explanation

Padding versus margin is the single most common source of layout confusion. Say it as "padding is inside the border, margin is outside the border" and check which side of the coloured area the space appears on.

JavaScript

Definition

JavaScript is a programming language that runs in the browser and allows a web page to respond to user actions, change its own content, and perform calculations after the page has loaded.

Example

A button that changes text when clicked:

<button onclick="greet()">Click Me</button>
<p id="msg"></p>

<script>
function greet() {
  document.getElementById("msg").innerHTML = "Hello, student!";
}
</script>

Detailed Explanation

Unlike HTML and CSS, JavaScript is a true programming language with variables, conditions and loops. It runs on the visitor's own device, which is why a page can react instantly without contacting the server again.

Responsive design

Definition

Responsive design is an approach to building web pages so that the layout adjusts automatically to suit the screen size of the device viewing it.

Example

A three-column layout on a laptop stacks into a single column on a phone. The HTML content is identical — only the CSS rules that apply have changed, based on the width of the screen.

Detailed Explanation

Most responsiveness is achieved with CSS media queries rather than JavaScript, because CSS applies before the page is painted and therefore does not cause visible jumping. JavaScript is used for behaviour that genuinely depends on measuring the page.

Step-by-Step Worked Examples

How to lay the answer out so method marks are earned

Building an HTML table with three rows and two columns

Question: Create an HTML table showing student names and ages, with a header row and two data rows.

  1. Open the table with <table>.
  2. Create the header row with <tr>, and use <th> for each heading cell so it renders bold and is announced as a header.
  3. Create each data row with <tr>, using <td> for the individual cells.
  4. Keep the number of cells identical in every row, or the table will render misaligned.
  5. Close every tag in the reverse order it was opened.

Answer

<table> <tr><th>Name</th><th>Age</th></tr> <tr><td>Ayesha</td><td>15</td></tr> <tr><td>Bilal</td><td>14</td></tr> </table> Remember: <tr> is the row, <th> is a header cell, <td> is a data cell. A question asking for "3 rows and 2 columns" means three <tr> elements each containing two cells.

Where This Is Used in Real Life

The same ideas, outside the syllabus

Viewing the source of any website

Right-click any page and choose "View Page Source" or "Inspect". Everything in this chapter is visible there on real sites. Reading other people's HTML and CSS is how most web developers actually learn layout techniques.

Why separating content from style matters

When a school rebrands and changes its colours, a site built with external CSS needs one file edited. A site built with inline styles needs every element on every page changed by hand. The separation is not a stylistic preference — it is what makes a site maintainable.

Accessibility comes from correct HTML

Using <h1> for the main heading and alt text on images is what allows a visually impaired student using a screen reader to navigate your page. Styling a paragraph to look like a heading gives the same appearance but none of the meaning.

Common Mistakes to Avoid

Errors that cost marks in this chapter, and the correction for each

Mistake

Forgetting the closing tag on container elements.

Correct Approach

Every <p>, <div>, <table> and <a> needs its matching closing tag. An unclosed tag usually breaks the layout of everything after it, not just itself.

Mistake

Confusing padding with margin.

Correct Approach

Padding is space inside the border, so the element's background stretches with it. Margin is space outside the border, so the background does not grow.

Mistake

Reusing the same ID on more than one element.

Correct Approach

An ID must be unique on a page. If several elements need the same styling, that is what a class is for.

Mistake

Writing "class" in CSS with a hash, or "id" with a dot.

Correct Approach

Dot for class (.warning), hash for ID (#header). Swapping them means the rule silently matches nothing — no error message, just no effect.

Mistake

Placing visible content inside <head>.

Correct Approach

Only metadata, the title, links and scripts belong in <head>. Anything the visitor should see goes in <body>.

Mistake

Omitting the alt attribute on images.

Correct Approach

Every <img> needs alt text describing the image. It is required for accessibility, it is examined, and it is what displays if the image fails to load.

Exam Preparation Tips

Technique specific to this chapter

  • When asked to write HTML, include the full skeleton — <!DOCTYPE html>, <html>, <head> with <title>, and <body>. Marks are frequently allocated to the structure itself.
  • Indent nested tags. Examiners follow nesting visually, and correctly indented code makes missing closing tags obvious to you as well.
  • For "three ways to apply CSS" questions, name all three AND give a one-line example of each. Naming alone rarely earns full marks.
  • Learn the box model as an ordered list from the inside out: content, padding, border, margin. Questions often ask for them in order.
  • When a question asks you to "create" something, write actual code rather than describing it. A description of a table does not score the marks a table does.

Quick Revision Summary

The whole chapter in one screen — read this the night before

  • HTML = structure and content. CSS = presentation. JavaScript = behaviour.
  • <head> holds metadata and is not displayed; <body> holds visible content.
  • Ordered list <ol> = numbered. Unordered list <ul> = bullets. Items use <li>.
  • Comments: <!-- HTML comment --> and /* CSS comment */.
  • Hyperlink: <a href="url">text</a>. Image: <img src="file" alt="description">.
  • Table: <table>, rows <tr>, header cells <th>, data cells <td>.
  • CSS can be inline, internal or external — external is best for multi-page sites.
  • Selectors: tag name, .class (reusable), #id (unique).
  • Box model inside → out: content, padding, border, margin.
  • Responsive layouts mainly come from CSS media queries.

Glossary of Terms

Words used in this chapter, defined plainly

Tag
An HTML keyword in angle brackets that marks the start or end of an element.
Attribute
Extra information written inside an opening tag, such as href or alt.
Element
An opening tag, its content and its closing tag taken together.
Selector
The part of a CSS rule that decides which elements the rule applies to.
Declaration
A property and value pair inside a CSS rule, such as color: red.
Media query
A CSS rule that applies only when the screen meets a condition, such as a maximum width.
DOM
The Document Object Model — the browser's live representation of the page that JavaScript can change.

Practice Questions

Now test yourself on the concepts above. Collapse the answers to make it a real practice run.

Multiple Choice Questions with Explanations

8 MCQs — pick an option to check yourself, then read why the answer is right

1Which of the following is not a valid HTML tag?

Correct answer: D — <foot>

<foot> is not a valid HTML tag (the correct tag is <footer>).

2What does CSS stand for?

Correct answer: A — Cascading Style Sheets

CSS stands for Cascading Style Sheets.

3Which tag is used to create a hyperlink in HTML?

Correct answer: B — <a>

The <a> tag (with an href attribute) creates a hyperlink.

4Which HTML attribute defines inline styles?

Correct answer: B — style

The style attribute applies inline CSS directly to an element.

5Which of the following shows the correct syntax for a CSS rule?

Correct answer: A — selector {property: value;}

A CSS rule is written as: selector { property: value; }

6In HTML, which markup is correct for writing comments?

Correct answer: D — <!--

HTML comments are written using the <!-- comment --> syntax.

7Which HTML tag creates an unordered list?

Correct answer: A — <ol>

The <ul> tag creates an unordered (bulleted) list; <li> defines each list item.

8Which tag displays a horizontal line in HTML?

Correct answer: B — <hr>

The <hr> tag inserts a horizontal rule/line.

Short Questions with Answers

9 short-answer questions

The <head> tag holds metadata about the webpage such as the title, CSS links, scripts, and other information that isn't displayed on the page.
An ordered list <ol> displays items with numbers, while an unordered list <ul> displays items with bullet points.
HTML comments are written using <!-- comment -->. These comments aren't shown in the browser and are used to explain code or leave notes for developers. Example: <!-- This is a comment --> <p>This text will appear on the webpage.</p>
CSS can be applied in three ways: - Inline CSS (inside an element using the style attribute) - Internal CSS (inside a <style> tag in the head) - External CSS (a linked .css file)
JavaScript can be added using the <script> tag inside the HTML file or by linking an external .js file.
A hyperlink is created using the <a> tag. Example: <a href="https://example.com">Visit Website</a>
The <div> tag is used to group or divide sections of content for styling and layout purposes.
The <table> tag displays data in rows and columns. It is used together with other tags such as <tr> (table row), <th> (table header), and <td> (table data).
The CSS box model describes how elements on a webpage are structured. It has four parts: content, padding, border, and margin, which together control the spacing and layout of elements on a web page.

Long Questions with Detailed Answers

5 in-depth answers

To set up a web development environment, the following tools are needed: - Code Editor: Install a code editor such as VS Code or Notepad++ to write HTML, CSS, and JavaScript code. - Web Browser: Use browsers like Google Chrome or Firefox to test and view webpages. - File Structure: Create folders to organize project files like HTML, CSS, images, and JavaScript. - Local Server (optional): Tools like XAMPP or Live Server help run and test web projects locally. - Version Control (optional): Tools like Git help manage code changes and collaboration. These tools help developers write, test, and manage web applications efficiently in an organized way.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic HTML Page</title> </head> <body> <!-- Header Section --> <h1>My Sample Website</h1> <!-- Paragraph Section --> <p>This is a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.</p> <!-- Image Section --> <img src="images/photo.jpg" alt="Sample Image"> <!-- Hyperlink Section --> <a href="https://www.example.com" target="_blank"> Visit Example Website </a> </body> </html>
<table border="1"> <tr> <th> Name </th> <th> Age </th> </tr> <tr> <td> Arshad Mehmood </td> <td> 45 </td> </tr> <tr> <td> Faisal Zia </td> <td> 30 </td> </tr> </table>
- Element Selector: Selects HTML elements by their tag name. Example: p { color: blue; } Explanation: All paragraph text (<p> elements) on the webpage will appear in blue. - Class Selector: Selects elements with a specific class. Example: .highlight { color: red; } Explanation: All elements with the class "highlight" will appear in red. - ID Selector: Selects a specific element with a unique ID. Example: #header { background-color: yellow; } Explanation: The element with the id "header" will get a yellow background.
A responsive webpage adjusts its layout depending on screen size. JavaScript can be used to change styles or layout whenever the screen size changes. Steps: 1. Create the HTML structure. 2. Use CSS for layout and styling. 3. Use JavaScript to detect screen size and modify elements. Example: <html> <head> <title>Responsive Page</title> </head> <body> <h1 id="title">Responsive Web Page</h1> <button onclick="changeText()">Click Me</button> <script> function changeText() { if (window.innerWidth < 600) { document.getElementById("title").innerHTML = "Mobile View"; } else { document.getElementById("title").innerHTML = "Desktop View"; } } </script> </body> </html> In this example, JavaScript changes the heading based on the screen width, making the page responsive.

Important Questions for Revision

5 high-priority questions

The <head> tag holds metadata about the page — such as its title, CSS links, and scripts — that isn't displayed directly on the page.
Inline CSS (using the style attribute), Internal CSS (inside a <style> tag in the head), and External CSS (a linked .css file).
A hyperlink is created with the <a href="URL">text</a> tag; a comment is written as <!-- comment -->, which isn't displayed in the browser.
An Element Selector (e.g., p {...}) targets all elements of that tag; a Class Selector (e.g., .highlight {...}) targets all elements sharing that class.
The CSS box model describes how elements are structured using four parts: content, padding, border, and margin.

Frequently Asked Questions

6 quick answers to common questions about this chapter

HTML provides the structure and content of a webpage (headings, paragraphs, images). CSS controls how that content looks (colors, spacing, layout). JavaScript adds behavior and interactivity (things that happen when you click a button). Together they form the three core building blocks of every website.
A webpage can technically exist with just HTML, but it will look plain and be static. CSS is what makes it visually appealing, and JavaScript is what makes it interactive. For a genuinely functional, modern-looking website, you generally need at least a working knowledge of all three.
Think of a framed picture on a wall. The picture itself is the content, the mat around it is the padding, the frame is the border, and the space between the frame and other pictures on the wall is the margin. Every HTML element on a page is boxed up the same way.
Each method suits a different situation. Inline CSS is quick for styling one specific element. Internal CSS keeps styles within a single page. External CSS is used for real websites because one stylesheet file can style many pages consistently, making updates much easier to manage.
Yes. HTML tags and structure, CSS selectors and the box model, hyperlinks, tables, and basic JavaScript are examinable topics that show up as MCQs and short/long answer questions.
A hyperlink is created with the <a> tag and an href attribute pointing to a destination URL. Unlike ordinary text, clicking it navigates the browser to another page, another part of the same page, or triggers a download — it's the mechanism that connects separate web pages into the "web."

Chapter Test

8 questions with the answers hidden — check what you actually remember

You have just read the explanations above. This checks whether they stuck. The answers stay hidden until you finish, so it is closer to exam conditions than scrolling through the notes again.

  • 8 questions, one at a time — no time limit.
  • You can move back and change an answer before submitting.
  • Afterwards you get your score, every explanation, and what to re-read.

Your score is saved in this browser only. No account, nothing sent anywhere.