HTML Implementation (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
HTML Implementation
Practical applications
In exam and assignment tasks students may be asked to:
Create the structure of a web page using HTML tags such as
<html>,<head>, and<body>Add headings and paragraphs using
<h1>,<h2>and<p>Insert images using
<img>with a relative file pathCreate navigation using hyperlinks with
<a href="...">Group content into sections using
<header>,<main>,<section>and<footer>Assign classes and IDs so that CSS can target specific elements
Add an external stylesheet using:
<link rel="stylesheet" href="styles.css">To see how CSS works with this HTML example, read the CSS Implementation Notes, which show exactly how these elements are styled across pages
Example
This example matches the CSS file used in the CSS revision notes
Every class and ID in this HTML has a corresponding CSS selector in
styles.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudyHub - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="mainHeader">
<h1>StudyHub</h1>
<p class="tagline">Your place for Computing Science revision</p>
<nav>
<a href="index.html" class="nav-link active">Home</a>
<a href="notes.html" class="nav-link">Notes</a>
<a href="contact.html" class="nav-link">Contact</a>
</nav>
</header>
<main>
<section class="feature">
<h2>Exam practice</h2>
<p>Try past paper style questions and check your answers.</p>
</section>
<section class="feature highlight">
<h2>Flashcards</h2>
<p>Quickly test yourself on key definitions.</p>
</section>
<section class="feature">
<h2>Video tutorials</h2>
<p>Short explanations for the trickiest topics.</p>
<img src="images/revision.png" alt="Student revising at a desk" class="feature-image">
</section>
</main>
<footer id="pageFooter">
<p>© 2025 StudyHub</p>
</footer>
</body>
</html>
Breakdown of what is going on
Page structure
<!DOCTYPE html>
Tells the browser the document uses HTML5
<html lang="en">
Root of the entire page
The language attribute improves accessibility
<head>
Contains information about the page, not displayed on it
<meta charset="UTF-8">for correct character encoding<title>shows in the browser tab<link rel="stylesheet" href="styles.css">links to the external CSS fileThis is a relative file path, which keeps links working when files are moved together
<body>
Everything displayed in the browser window
Header
<header id="mainHeader"><header>groups the site title, tagline and navigationid="mainHeader"matches#mainHeader { ... }in CSS<h1>provides the main page heading<p class="tagline">uses a class the CSS specifically stylesNavigation links:
<a href="notes.html" class="nav-link">Notes</a>
href="notes.html"is a relative internal linkclass="nav-link"matches.nav-link { ... }in CSS.nav-link:hoverapplies styles when the mouse is over the link.activehighlights the current page
Main content
<main>contains multiple content blocks structured with<section>Shared class:
.feature
<section class="feature">
Used for:
background colour
padding
spacing
heading styling
Additional class:
.highlightAdds a different background colour:
<section class="feature highlight">
Shows how multiple classes can be combined
Heading and paragraphs
Each section includes:
<h2>...</h2>
<p>...</p>
<h1>for the page title<h2>for section headings<p>for textAbility to style them via CSS
Images
<img src="images/revision.png" alt="Student revising at a desk" class="feature-image">
Important points:
<img>uses a relative file pathalttext helps accessibilityclass="feature-image"matches its CSS rules controlling size and layout
Footer
<footer id="pageFooter">
Matches
#pageFooter { ... }
Used for consistent page-ending structure and styling
Unlock more, it's free!
Did this page help you?
