ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation Hangman

The 34 key terms

1content, structure, presentation

The three layers of a web page: content is the text and media, structure is the HTML that labels each part, and presentation is the CSS that controls how it looks.

2paragraph style

A named set of formatting, like Heading 1 or Normal, that labels what a paragraph is. Edit the style once and every paragraph using that style changes at once.

3separation of concerns

Keeping content, structure (HTML) and style (CSS) apart so one document can be restyled fast, suit any screen, and be understood by search engines and screen readers.

4JavaScript

The programming language that adds behaviour to a web page, such as reacting to a click, on top of its HTML content and structure and its CSS presentation.

5web page layers

Every part of a page is content (words, images), structure (tags), presentation (CSS colour, layout) or behaviour (JavaScript). Each layer can be changed on its own.

6Inspect

Browser tool opened by right-clicking an element. It shows that element's HTML and CSS so you can explore a real site's layers. View page source shows the whole HTML.

7HTML

The language that defines the structure and content of a webpage using tags and elements, not appearance.

8Markdown

A way to mark structure in plain text using symbols, like # for a heading, - for a list item and ** for bold. The text is later converted into HTML.

9<!DOCTYPE html>

The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.

11<title>

An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.

13h1, h2, h3

Heading tags that nest in order with no skipped levels: one h1 for the page title, h2 for sections, h3 for subsections. This forms an outline that people and screen readers can navigate.

15<strong>

An inline HTML element that marks text as important. Browsers display it bold. Use it when the content has semantic importance, not just for visual styling.

18href

An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.

19attribute

Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".

20alt

An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.

21<div>

A generic block-level container element with no built-in styling. Used to group content so CSS can target and style sections of a page.

22<span>

A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.

23<main>

The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.

25<link>

A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.

26p { color: blue; }

A CSS rule: a selector (p) picks elements, then { } hold declarations. Each declaration is property, colon, value, semicolon, so all paragraphs get blue text.

28class

An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.

29.classname

A CSS selector that targets every element whose class attribute matches classname, written with a leading dot

32#rrggbb

A CSS hex colour code. Six hexadecimal digits (0–9 and A–F) define red, green and blue channels. Shorthand: #rgb uses one digit per channel.

33color: navy;

The color property sets an element's text colour using a name or hex value. background-color sets the colour behind the text. Choose pairs with enough contrast to read.

34font-family

A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif

35text-align

A CSS property that sets how lines of text line up inside an element: left, center or right. Example: text-align: center; centres a heading's text. It styles the text, not the box.

36box model

Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.

37padding

A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.

38border

A CSS shorthand property that sets a visible line around an element by specifying width, style, and color in one declaration, e.g. border: 2px solid black

39margin

A CSS property that adds space outside an element's border, between it and surrounding elements. Unlike padding, margin is outside the element's background.

40<link rel="stylesheet" href="style.css">

Adds an external CSS file. Inline uses style=, internal uses <style>, but only this external link lets many pages share one stylesheet and fully separates presentation from structure.

41<link rel="stylesheet" href="dark.css">

Change which stylesheet this tag points to and the same HTML looks totally different, because presentation lives in the CSS file, not in the content.

43debugging

Finding and fixing small slips in code, such as a missing closing tag, quote, semicolon or brace, or a class name that does not match. Check your code against the rules to spot each one.

44separation of content and presentation

Keeping HTML content apart from CSS style means one CSS rule can restyle every page without touching the content, because the look is stored in one place.