Activity: Web Language Core

The theoretical rules and structure of HTML5 and CSS3

Grade XI • Computer Science ⏱️ ~25 min

Brief Intro — Web Language Core

Every web page you have ever visited is built on HTML — the language that gives a page its structure — and shaped by CSS — the language that gives it style. Together they answer two simple questions: what should the page contain, and how should it look?

This activity covers the rules that make HTML and CSS work together: how tags and attributes are written, how a full HTML5 document is structured, and how CSS decides which style wins when rules conflict. By the end you will be able to read and write clean, valid web pages with confidence.

Prerequisites

Basic understanding of computer programming concepts.
Familiarity with using web browsers and viewing web pages.
Knowledge of basic file structure and text editing.

Objectives Learning Goals & Outcomes

By the end of this activity, you will be able to:

Understand HTML elements, attributes, and document structure.
Distinguish between different HTML5 formatting and structural tags.
Apply CSS styling using inline, internal, and external methods.
Understand CSS specificity and the cascading priority order.
Work with the CSS Box Model for layout design.
Create HTML tables, lists, and forms with proper structure.

Part 1 Elements vs. Attributes

Every HTML element is a tag that may carry attributes to configure it — try editing the simulator below, then read the anatomy to see exactly where each part lives.

Interactive Simulator: HTML Live Preview

Type HTML code in the textarea and see it rendered instantly below.

Live Preview:

Understanding the Anatomy

In HTML, we use tags to create elements. Elements can have attributes that provide additional information.

            <img src="https://cdn.britannica.com/17/83817-050-67C814CD/Mount-Everest.jpg" width="500">
        

Element: The entire block from start tag to end tag.
Attributes: src and width (Always specified in the start tag).
Empty Elements: Tags like <br> and <hr> that have no content or end tag.

HTML Formatting Tags

HTML provides various tags for text formatting:

Tag	Purpose	Example
`<b>, <strong>`	Bold text	Bold text
`<i>, <em>`	Italic text	Italic text
`<mark>`	Highlighted text	Highlighted
`<small>`	Smaller text	Small text
`<del>`	Deleted text	~~Deleted~~
`<ins>`	Inserted text	Inserted
`<sub>`	Subscript	H₂O
`<sup>`	Superscript	X²

HTML Comments

Comments are used to add notes in your code that are not displayed in the browser:

            <!-- This is a comment -->

            <!-- Comments can span multiple lines -->

Common Attributes

Attribute	Purpose	Example
`align`	Horizontal alignment (deprecated)	`<p align="center">`
`title`	Tooltip text	`<abbr title="HyperText Markup Language">HTML</abbr>`
`style`	Inline CSS	`<p style="color: red;">`
`id`	Unique identifier — may be used on only one element per page	`<p id="main-text">`
`class`	Reusable identifier — the same value can be used on many elements	`<p class="note">`

Part 2 The HTML5 Skeleton

Every HTML5 document follows the same skeleton: a <head> that holds settings for the browser and a visible <body> that holds the page you see.

Head vs. Body

A standard HTML5 document is strictly organized into metadata and visible content.

<head>
Contains meta-information, titles, links to CSS, and scripts. Not visible to the user.

<body>
The container for all visible content (headings, paragraphs, images, tables).

True or False: The <title> tag defines the text shown on the browser tab, not the page content.

Reveal Answer

True. Use <h1> for the main heading on the actual page content.

The Full HTML5 Skeleton

Every HTML5 document follows the same skeleton: the <!DOCTYPE html> declaration, an <html> tag with a lang attribute, a <head> section first, then a <body> section.

            <!DOCTYPE html>

            <html lang="en">

              <head>

                <title>My Page</title>

              </head>

              <body>

                <h1>Hello</h1>

              </body>

            </html>

<!DOCTYPE html> — tells the browser this is an HTML5 document.
lang="en" — declares the page language on the <html> tag.
<head> must come before <body> — putting head elements inside body breaks the structure.

Part 3 HTML Tables & Lists

Tables, lists, forms, and container tags are the building blocks you will reach for in almost every real web page.

HTML Tables

Tables are used to display data in rows and columns:

            <table>

              <tr>

                <th>Name</th><th>Age</th>

              </tr>

              <tr>

                <td>John</td><td>25</td>

              </tr>

            </table>

<table> - Container for the table
<tr> - Table row
<th> - Table header cell (bold, centered)
<td> - Table data cell
colspan - Spans multiple columns
rowspan - Spans multiple rows

HTML Lists

HTML provides three types of lists:

List Type	Tags	Example
Unordered List	`<ul>, <li>`	• Item 1 • Item 2
Ordered List	`<ol>, <li>`	1. Item 1 2. Item 2
Definition List	`<dl>, <dt>, <dd>`	Term - Definition

HTML Forms

Forms collect user input:

            <form>

              <label>Name:</label>

              <input type="text" name="username" placeholder="Enter your name"><br>

              <input type="submit" value="Submit">

            </form>

<form> - Form container
<input> - Input field (types: text, password, email, number, radio, checkbox, submit, reset, button)
<label> - Label for form element
<select> - Dropdown list
<textarea> - Multi-line text input
name - Attribute to identify form data
placeholder - Grey hint text shown inside an input until the user types

Div and Span Containers

HTML provides container elements for grouping and styling:

<div> - Block-level container (creates line breaks before and after)
<span> - Inline container (no line breaks, used within text)
Both are used with CSS for styling and JavaScript for manipulation

Part 4 The Cascading Priority

So far, you've built page structure with pure HTML — tags that give content meaning and organization. Now we shift gears to bring those same elements to life with CSS, which layers on visual styling. Notice that the style attribute you saw in the Common Attributes table is, in fact, inline CSS in action.

When several CSS rules touch the same element, the browser does not guess — it follows a strict cascading order and specificity rules.

Which style wins?

CSS stands for **Cascading** Style Sheets because rules "cascade" down with a specific priority order.

Inline Style: <h1 style="color: blue"> (Highest Priority)
Internal Style: <style> block in the head.
External Style: A <link rel="stylesheet" href="style.css"> tag placed in the <head> links to a separate .css file.
Browser Default: Standard styling from Chrome/Firefox. (Lowest Priority)

Exercise: If a paragraph is set to green in an external file, but red in an internal block, and blue inline, what color will the user see?

Check the Winner

Winner: Blue. (Inline always overrides internal and external).

Selector Syntax

A CSS rule has a selector (which elements to style) and a declaration block (the properties to apply):

h1 { color: navy; font-size: 2rem; }

h1 — the selector (every <h1> element).
color: navy; and font-size: 2rem; — property-value pairs inside the braces, separated by semicolons.

Specificity: Who wins when selectors conflict?

When two rules target the same element, the browser follows specificity — not just the cascade order above:

            .box { color: red; }

            #main { color: blue; }

            <div id="main" class="box">Text</div>

ID selector (#main) has higher specificity than a class selector (.box).
So the <div id="main" class="box"> above renders blue.
This is exactly why the id vs class distinction matters.

CSS Style Attribute

The style attribute allows inline CSS styling:

Property	Description	Example
`font-family`	Text font	`font-family: Arial, sans-serif;`
`font-size`	Text size	`font-size: 16px;`
`text-align`	Text alignment	`text-align: center;`
`background-color`	Background color	`background-color: var(--card-bg);`
`color`	Text color	`color: var(--text-color);`
`border`	Element border	`border: 1px solid black;`

Color Formats:

RGB: rgb(255, 0, 0) - Red
HEX: #ff0000 - Red
HSL: hsl(0, 100%, 50%) - Red

Part 5 The CSS Box Model

The CSS properties you just mastered in Part 4 — color, font-size, background-color — set the look of your content. But to control layout and spacing, you need to understand the box model: every element is a rectangular box with layers of content, padding, border, and margin.

Visualizing the Layers

Every HTML element is considered a rectangular box. Understanding the layers is key to layout design.

Content

Padding

Border | Margin

Content: The text or image itself.
Padding: Space *inside* the border (clears area around content).
Border: A line that goes around the padding and content.
Margin: Space *outside* the border (clears area around the element).

Language Master Checklist:

I know that attributes are always found in the start tag.
I can identify empty elements (br, hr, img, source).
I understand the difference between head (meta) and body (visible).
I have memorized the CSS priority: Inline > Internal > External.
I can name the Box Model layers from innermost to outermost.

Ready to test your knowledge?

Take the Assessment →