Content, structure and presentation of a document

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. In <p>Welcome to our school</p>, which layer is the words 'Welcome to our school'?

A Content

B Presentation

2. Which layer does the <h1> tag belong to?

A Presentation: it makes the text big and bold

B Structure: it labels the text as a main heading

3. Which line is presentation?

A <h1>Our Team</h1>

B h1 { color: blue; }

4. A page keeps the same text but changes <p> to <h2> for one line. What changed?

A The structure

B The content

5. Two pages use the same HTML but different stylesheets. What is the same on both?

A Content and structure

B Content and presentation

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<h1>Our School Fete</h1>		AThe style attribute is presentation, not structure. The p tag is the structure and the colour is the styling.
2h1 { color: navy; }		BPresentation: a CSS rule that controls how every main heading looks
3Content is the text and media of a page, with no tags or styling added		CStructure: the h1 tag labels the text as the main heading of the page
4Same content and same structure can look different when you change only the presentation		DA heading tag is for structure, not for size. Use a p tag for the text and CSS font-size to make it big.
5<p style="color: red;">Sale on now</p> (said to be 'structure')		Ep { font-family: Arial; color: green; }
6<h1>Contact us</h1> used only to make text big		FOur School Fete is on Saturday at 10am.

Definitions

content, structure, presentation

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<__>Our School Garden</h1>

<p _____="color: blue">Welcome!</p>

<ul> <__>Apples</li> </ul>

h1 { _____: navy; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <h1>Skate Park Rules</h1>

B <p>Wear a helmet.<p>

C <p>Be kind to others.</p>

Question 2

A <h1>My Pets</h1>

B <p>I have a dog.</p>

C <p>Her name is Milo.</p>

D <p style="color red">Hi</p>

Question 3

A <ul

B <li>Mon: Maths</li>

C <li>Tue: Art</li>

D </ul>

Question 4

A p {

B color: green;

C font-size= 18px;

D }

Question 5

A <style>

B h1 ( color: teal; )

C p { color: grey; }

D </style>

Answer Key

Content, structure and presentation of a document

Section A: Quick Questions

A — Content

B — Structure: it labels the text as a main heading

B — h1 { color: blue; }

A — The structure

A — Content and structure

Section B: Match the Pairs

<h1>Our School Fete</h1> → Structure: the h1 tag labels the text as the main heading of the page

h1 { color: navy; } → Presentation: a CSS rule that controls how every main heading looks

Content is the text and media of a page, with no tags or styling added → Our School Fete is on Saturday at 10am.

Same content and same structure can look different when you change only the presentation → p { font-family: Arial; color: green; }

<p style="color: red;">Sale on now</p> (said to be 'structure') → The style attribute is presentation, not structure. The p tag is the structure and the colour is the styling.

<h1>Contact us</h1> used only to make text big → A heading tag is for structure, not for size. Use a p tag for the text and CSS font-size to make it big.

Section C: Definitions

content, 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.

Section D: Fill in the Blanks

<h1>Our School Garden</h1>

<p style="color: blue">Welcome!</p>

<ul>
  <li>Apples</li>
</ul>

h1 {
  color: navy;
}

Section E: Spot the Error

B — The closing tag is missing its slash. Structure markup labels each part of the content, so the paragraph must end with </p>.

D — A CSS declaration needs a colon between the property and the value. Presentation is set with color:red, not color red.

A — The opening tag is missing its closing > bracket. The list structure should start with <ul>, so the browser can read the list items.

C — CSS uses a colon, not an equals sign, between a property and its value. It should be font-size: 18px; to style how the text looks.

B — A CSS rule wraps its declarations in curly braces { }, not round brackets. The presentation rule should be h1 { color: teal; }.