Stretch tasks HTML: structure

Round 1: Quiz Blitz

1. <p><strong>Hi</strong></p> Tags close in the reverse order they opened: the last one opened is the first one closed.
2. <a> <a href="..."> makes a clickable link. <link> is used in the head to attach a stylesheet.
3. False Screen readers read alt text aloud, and it appears if the image fails to load. It is not optional.
4. The structure of a page: what each thing is HTML says what something is. CSS says what it looks like.
5. <img>; <br> An image and a line break have no content between tags, so they have no closing tag.
6. <!DOCTYPE html> → <html> → <head> → <title> → <body> The doctype comes first, then html. The head, with the title inside it, comes before the body.
7. <ol> <ol> is an ordered, numbered list. <ul> is an unordered list with bullets.
8. On the browser tab The title lives in the head and is shown on the tab and in search results, not on the page itself.
9. A ginger cat asleep on a computer keyboard Good alt text describes what the image shows, so someone who cannot see it gets the same information.
10. A bulleted list with two items ul is an unordered list, shown with bullets, and each li is one item.
11. True h1 is the page's main heading. h2 to h6 are for sections underneath it.
12. src src is the source of the image file. href is for links, alt is the description.

Round 2: Quick Fire

1. • HTML is the structure and content, CSS is the appearance
   • One CSS file can restyle every page, so the look is easy to change
   Model answer

   HTML describes the structure and content of a page, while CSS controls its appearance. Keeping them separate means one CSS file can restyle every page of a site, so the whole look can be changed in one place.

2. • Screen readers read it to people who cannot see the image
   • It is shown if the image fails to load
   • It helps search engines understand the image
   Model answer

   Screen readers read alt text aloud to people who cannot see the image, and it is shown in place of the image if it fails to load.

3. • The tags are nested wrongly: closed in the wrong order
   • strong must close before p
   Model answer

   The tags are nested wrongly: they are closed in the wrong order. The strong tag opened last, so it must close first: <p>Hello <strong>world</strong></p>.

4. • A div is a block: a whole section that starts on a new line
   • A span is inline: a small part inside a line of text
   Model answer

   A div is a block element: a section of the page that starts on its own new line. A span is an inline element: a small part inside a line of text, such as one word.

Round 3: Big Think

1. • Screen reader users move around by heading, so add h1 and h2 in order
   • Images need alt text so people who cannot see them get the information
   • Links should describe where they go
   • The page should be accessible to everyone, including disabled people
   Model answer

   The page is not accessible to everyone. Screen reader users move around a page by jumping from heading to heading, so the content needs a clear structure with an h1 and then h2 headings in order. Without alt text, a blind user gets no description of the images, so every image that carries meaning needs alt text. Links that say click here make no sense when a screen reader reads out a list of links, so each link should be descriptive and say where it goes, such as Read the trip letter.

2. • h1 for the page's main title
   • p for paragraphs of text
   • img, with alt text, for photos
   • a href for links to other pages or sites
   • ul or ol with li for lists
   • h2 for sub headings, in order
   • table, tr and td for data such as results
   • A title in the head for the browser tab
   Model answer

   For a page about skateboarding I would put the page title in the head, so it shows on the browser tab, and use h1 for the main heading on the page. Each section would have an h2 sub heading, kept in order so screen readers can navigate. The text would go in p paragraphs, and photos of tricks would use img with alt text describing each one. A ul list with li items would list the kit you need, a table with tr and td would show my best scores, and a href links would point to a skate park's website.

This or That

1. <body> The body holds the visible content. The head holds facts about the page, such as its title and the stylesheet link.
2. </p> A closing tag repeats the tag's name after a forward slash. A backslash is not part of HTML.
3. <div> A div is a block section that can hold other elements. A span is a small inline section inside a line of text.
4. <td> tr is a whole table row. td is one cell of data inside that row.
5. Hello world, with world in bold The browser treats tags as instructions and never shows them. strong makes its text bold.
6. HyperText HTML is HyperText Markup Language: text that links to other text, marked up with tags.
7. <link rel="stylesheet" href="style.css"> The link tag in the head attaches a .css file. A style tag holds CSS written inside the page and has no src.
8. <h6> Headings run from h1, the most important, down to h6, the least important.

Memory Match

• A 2 <p>: A paragraph of text
• B 1 <a>: A link to another page
• C 6 <img>: A picture, which needs src and alt
• D 5 <ol>: A numbered list
• E 4 <td>: One cell in a table
• F 3 <h1>: The most important heading