Book 3 · Chapter One — The Skeleton of a Web Page

Part One

What Is HTML?

Whenever you open a web page — a news article, a social media post, a research paper — your browser is reading a text file written in HTML: HyperText Markup Language. HTML is not a programming language; it does not calculate or make decisions. It is a markup language: a way of annotating content to give it meaning and structure.

Think of a printed newspaper. A designer decides which text is the headline, which is a pull quote, which is a caption. HTML does the same thing, but for the web. You wrap words in special codes called tags, and the browser uses those tags to know how to display them.

Understanding HTML means you can publish your own stories, control how they look, and embed maps, videos, and data directly into your articles — without relying on a proprietary CMS.

What you will build by the end of Book 3: a complete, styled article page with a headline, byline, body text, a photo with caption, a pull quote, an embedded map, and hyperlinks to your sources.

Part Two

Tags — The Building Blocks

A tag is a label surrounded by angle brackets: <tagname>. Most tags come in pairs: an opening tag and a closing tag. The closing tag has a forward slash before the name: </tagname>. Everything between them is the content that tag applies to.

For example, to mark a paragraph of text, you write:

HTML · Try it

HTML

CSS

Live Preview

Click Run to render the HTML in the preview on the right. Then try changing the text inside the <p> tags and running again. The preview updates immediately.

Key rule: Every tag you open, you must close. <p>...</p>. Forgetting the closing tag is one of the most common mistakes beginners make — the browser will try to recover, but the results are unpredictable.

Part Three

Headings — Hierarchy on the Page

HTML has six levels of headings: <h1> through <h6>. <h1> is the most important — the main headline of the page. <h2> is a section heading. <h3> is a sub-section. In practice, most articles use <h1>, <h2>, and occasionally <h3>.

In journalism, heading hierarchy matters: search engines use it to understand what your article is about, and screen readers use it to help visually impaired readers navigate the page.

HTML · Try it

HTML

CSS

Live Preview

Rule of thumb: Each page should have exactly one <h1> — your main headline. Use <h2> for sections within the article, and <h3> for subsections within those. Do not skip levels (e.g. jumping from <h1> to <h3>).

Part Four

The Full Document — Head and Body

Every real HTML file has a fixed structure. You will recognise it from any page you view-source on the web. It has two main parts:

<head> — invisible metadata: the page title (shown in the browser tab), character encoding, links to stylesheets. Content here is not displayed on the page.
<body> — everything the visitor actually sees: headings, paragraphs, images, links.

The whole file is wrapped in an <html> tag, and begins with a doctype declaration that tells the browser which version of HTML to expect.

HTML · Try it — a complete minimal page

HTML

CSS

Live Preview

The lang="en" attribute on <html> tells the browser (and screen readers, and search engines) that this page is in English. The charset="utf-8" meta tag ensures that any character — Greek letters, accented characters, emoji — will display correctly.

Part Five

Your Turn — Write a News Story

Apply what you have learned. In the HTML editor below, write the opening of a real or imaginary news story. Use:

One <h1> for the headline
At least one <h2> for a section heading
Two or three <p> tags for the body text

Adjust the CSS to change the font, size, or colour to your liking.

HTML · Your turn

HTML

CSS

Live Preview

What you have learned in this chapter: what HTML is, how tags work, the six heading levels, and the structure of a full HTML document. In the next chapter you will add emphasis, pull quotes, and formatting to your text.

Chapter Navigation

Move between chapters.

Previous: Course Home Next: Chapter 2 — Text, Emphasis & Quotes