Skip to main content
ScotlandComputer ScienceSyllabus dot point

How do you mark up the structure and content of a web page with HTML?

Building a web page with HTML: the page-layout structural elements (header, nav, section, footer), links, images, lists and tables, and forms for user input.

An SQA Higher Computing Science answer on HTML, covering the page-layout structural elements (header, nav, section, footer), links, images, lists and tables, and forms for capturing user input.

Generated by Claude Opus 4.811 min answer

Reviewed by: AI editorial process; not yet individually human-reviewed

Have a quick question? Jump to the Q&A page

Jump to a section
  1. What this key area is asking
  2. How HTML works
  3. Page-layout structural elements
  4. Links, images, lists and tables
  5. Forms: capturing user input
  6. Examples in context
  7. Try this

What this key area is asking

The SQA wants you to build a web page with HTML: the page-layout structural elements (header, nav, section, footer), links, images, lists and tables, and forms that capture user input. You should be able to read and write the markup for these.

How HTML works

A page has a <head> (metadata such as the title) and a <body> (the visible content). Inside the body you place the structural elements and content below.

Page-layout structural elements

Using these instead of generic boxes makes the code clearer, helps search engines and assistive technologies (screen readers) understand the page, and makes consistent styling easy. They map directly onto the regions you planned in the wireframe.

<body>
  <header><h1>Green Cafe</h1></header>
  <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a></nav>
  <section><p>Welcome to our cafe.</p></section>
  <footer><p>Contact: hello@greencafe.example</p></footer>
</body>
  • Links use the anchor element with an href: <a href="menu.html">Full menu</a> navigates to another page; an external link uses a full URL.
  • Images use <img> with a src (the file) and alt (alternative text describing the image for accessibility and if it fails to load): <img src="logo.png" alt="Green Cafe logo">.
  • Lists are unordered (<ul>, bulleted) or ordered (<ol>, numbered), each containing list items (<li>).
  • Tables lay out rows and columns: <table> contains rows (<tr>), which contain header cells (<th>) or data cells (<td>).
<ul>
  <li>Soup</li>
  <li>Salad</li>
</ul>

Forms: capturing user input

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <input type="submit" value="Send">
</form>

Forms are how a website takes data from the user (a search box, a sign-up, a donation), and at Higher you should be able to build a simple one with labelled inputs and a submit button.

Examples in context

This semantic markup is the modern web standard. Browsers, search engines and screen readers all rely on <header>, <nav>, <section> and <footer> to understand a page, which is why accessible, search-friendly sites use them rather than featureless boxes everywhere. The alt text on images is a legal accessibility requirement on many public-sector sites. Forms power almost every interaction online, from logging in to checking out. HTML pairs with CSS (for appearance) and JavaScript (for behaviour) to make the full page, which is why those are the next two key areas.

Try this

Q1. State the HTML element used for the navigation links of a page. [1 mark]

  • Cue. The <nav> element.

Q2. State the two attributes an <img> element needs. [2 marks]

  • Cue. src (the image file) and alt (alternative text).

Q3. Name the three things a simple form needs to capture and send user input. [1 mark]

  • Cue. Input field(s), label(s), and a submit button.

Exam-style practice questions

Practice questions written in the style of SQA exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.

SQA Higher (style)4 marksWrite the HTML for a page region containing a level-1 heading 'Our Menu', an unordered list of two items (Soup, Salad), and a link to 'menu.html' with the text 'Full menu'.
Show worked answer →

The heading uses h1, the list uses ul with li items, and the link uses an anchor with an href.

<section>
  <h1>Our Menu</h1>
  <ul>
    <li>Soup</li>
    <li>Salad</li>
  </ul>
  <a href="menu.html">Full menu</a>
</section>

Markers reward the correct h1, a ul containing two li elements, and an anchor with href="menu.html" wrapping the text 'Full menu'. Wrapping it in a structural element such as section is good practice.

SQA Higher (style)4 marksExplain the purpose of the structural elements header, nav and footer in an HTML page, and state why using them is better than laying everything out with generic boxes.
Show worked answer →

The header element holds the introductory content at the top of a page, such as the site title or logo. The nav element holds the navigation links (the menu). The footer element holds the closing content at the bottom, such as copyright or contact details.

Using these semantic structural elements is better than generic boxes because they describe the meaning of each region, not just its position. This makes the code clearer to read and maintain, helps search engines and assistive technologies (such as screen readers) understand the page, and makes styling consistent regions straightforward.

Markers reward correct purposes for header (top/intro), nav (navigation links) and footer (bottom/closing content), and a valid reason such as clearer meaningful code, accessibility, or better search-engine understanding.

Related dot points

Sources & how we know this