Community resourceWorksheet

OCR H446 1.3.4 HTML structure, content and forms

Part 1 of 8 · H446 1.3.4 · Web technologies

H446 1.3.4 expects students to read and write HTML using the language named in the specification's appendix, so this worksheet works from nested source to rendered page and back again. Students repair broken elements and attributes first, then write a complete page of their own.

Students will:

  • read a nested HTML document and connect its elements to the regions a browser displays
  • repair misused attributes and missing container elements, explaining each repair
  • use named form controls for text, password and submit inputs
  • write a complete page with a heading, image, link, list and form, indented to show the nesting

Inside: 5 explanation cells, 1 multiple-choice question, 2 fill-in-the-blanks cells and 2 written answers. 29 marks, about 40 to 50 minutes.

Series: H446 1.3.4 · Web technologies, part 1 of 8.

Shared by Coding PathwayVerified teacher

  • 10 cells
  • About 45 minutes
  • CC BY-SA 4.0
  • Shared 31 Aug 2026
  • Updated 3 Sept 2026

Preview

The whole resource, exactly as a class sees it. Answers and marking are held back.

HTML structure, content and forms

HTML describes the structure and content of a page. It does not decide every visual style or every behaviour. Read the nesting first, then connect elements and attributes to what a browser can display or submit.

From nested source to rendered regions

HTML structure connects nested elements to a rendered page html: whole document headtitle · CSS link bodyvisible page content example body childrenh1 → main headingp → paragrapha href → link textform → inputs + submit rendered resulttitle: browser tabbody: page viewport Read nesting first; then connect each element and attributeto the content or destination it controls.

The head contains information about the document, including title and a link to an external stylesheet. The body contains the visible page. Opening and closing tags show containment. Some elements, such as img and input, carry their information through attributes.

Worked page: a repair desk

<html>
  <head>
    <title>Repair desk</title>
    <link rel="stylesheet" href="desk.css">
  </head>
  <body>
    <h1>Repair desk</h1>
    <div>
      <h2>Bookings</h2>
      <p>Book a device check.</p>
    </div>
    <a href="prices.html">View prices</a>
    <form>
      <input type="text" name="device">
      <input type="submit" value="Request slot">
    </form>
    <script src="desk.js"></script>
  </body>
</html>

The div groups related content. h1, h2 and h3 provide heading levels rather than a visual-size instruction. The link has a destination in href and separate visible text. The form groups controls; the text input supplies a named value and the submit input starts submission. The script element connects or contains JavaScript; here its supplied src names an external file.

Multiple choice1 mark

Which structure correctly represents an ordered two-item list?

  • A`<ol><li>First</li><li>Second</li></ol>`
  • B`<li><ol>First</ol><ol>Second</ol></li>`
  • C`<p><li>First</li><li>Second</li></p>`
  • D`<ul>First, Second</ul>`
Fill in the blanks4 marks
A link destination is stored in gap 1. An image file location is stored in gap 2, while gap 3 supplies alternative text. A text input's submitted field name is stored in gap 4.
  • href
  • src
  • alt
  • name
  • style
Written answer8 marks

A page has <a src="map.html">Map</a>, <img href="hall.png">, and three <li> elements with no list container. Rewrite the fragments and explain each repair.

Use href for a link, src/alt for an image, and ol or ul around list items.

Students type their answer here.

Apply the model independently

The remaining tasks change the context or reduce the support. Complete them without copying the worked model, then check that each explanation connects a mechanism to its consequence.

Written answer12 marks

Write the complete HTML for a community-room page containing a title, h1, paragraph, image with src/alt/height/width, link, unordered list of two facilities, and a form with named text, password and submit inputs. Indent it to show nesting.

Several valid orders and attribute values are possible. Include html, head and body.

Students type their answer here.

Fill in the blanks4 marks
The visible page is inside checkpoint gap 1. A link uses checkpoint gap 2; an image uses src and checkpoint gap 3. List items sit inside ol or checkpoint gap 4.

Review your understanding

Before submitting, check that you can explain the main distinction in your own words, apply it in an unfamiliar context and justify each consequence rather than only naming a feature.