How the Web Works and HTML Structure

The Three Languages of the Web

Every website you visit is built from three core technologies working together:

• HTML gives a page its structure and content.
• CSS controls the appearance — colours, spacing, layout.
• JavaScript adds behaviour — making the page respond to the user.

A helpful comparison: HTML is the skeleton, CSS is the clothing, and JavaScript is the muscles.

What HTML Looks Like

HTML stands for HyperText Markup Language. It uses tags wrapped in angle brackets to label pieces of content. Most tags come in pairs: an opening tag and a closing tag with a slash.

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

The Parts of a Document

1. <!DOCTYPE html> tells the browser this is a modern HTML document.
2. <head> holds information about the page, such as its title and character set. This content is not shown in the page body.
3. <body> holds everything the visitor actually sees.

Common Content Tags

• <h1> to <h6> — headings, largest to smallest.
• <p> — a paragraph of text.
• <a href="..."> — a link to another page.
• <img src="..." alt="..."> — an image.
• <ul> and <li> — an unordered list and its items.

An attribute gives extra information to a tag. In <a href="page.html">, href is the attribute that says where the link goes. Attributes are always written inside the opening tag, as a name followed by an equals sign and a quoted value.

Nesting Elements

HTML elements can be placed inside other elements. This is called nesting, and it builds a tree structure for the page. When you nest tags you must close them in the reverse order you opened them, like closing a set of brackets.

<p>Programming is <strong>fun</strong> to learn.</p>

Here the <strong> element sits inside the <p> element, so the word “fun” appears bold within the paragraph. A few tags, such as <img> and <br>, have no content and therefore no closing tag.

Save HTML files with a .html extension and open them directly in any browser to see the result — no special software needed.