HTML Study Guide
OCR A Level Computer Science • Complete Reference with Examples
1. Web Technologies
HTML is one of the three core web technologies:
Technology Role
HTML Defines the structure and content of a web page
CSS Defines the formatting and presentation
JavaScript Controls behaviour and interactivity
2. What is HTML?
HTML (HyperText Markup Language) is used to create and structure web pages. It uses tags enclosed
in angle brackets < > to define elements.
Most tags come in pairs: an opening tag and a closing tag with content between them. A few tags (like
<img>) are self-closing and need no closing tag.
Example:
<h1>This is a large heading</h1>
<p>This is a paragraph</p>
<img src='[Link]' alt='A photo'> <!-- self-closing -->
3. Structural Tags: <html>, <head>, <body>
Tag Description
The root element — contains everything on the page. Must be first and
<html>
last tag.
<head> Contains metadata (not visible). Holds <title> and links to CSS.
<body> Contains all visible content of the page.
<title> Sets the text shown in the browser tab. Goes inside <head>.
Full page skeleton:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
4. Headings & Paragraphs
<h1> is the largest heading. <h2> is smaller, <h3> smaller still. Headings go up to <h6> but only h1–h3
are in the OCR spec. <p> is for standard body text.
<h1>Frog Detective</h1>
<h2>Who is Frog Detective?</h2>
<h3>Cases Solved</h3>
<p>Frog Detective is the world's second-best investigator!</p>
5. Images: <img>
The <img> tag is self-closing and uses attributes to configure the image.
Tag Description
src Path/filename of the image (required). e.g. src='[Link]'
Alternative text if image fails to load. Also read by screen readers — an
alt
important accessibility feature.
width Width in pixels or percent. e.g. width='300' or width='100%'
height Height in pixels. e.g. height='200'
<img src='[Link]' alt='A green frog' width='300' height='200'>
<img src='[Link]' alt='Banner image' width='100%'>
6. Hyperlinks: <a>
The <a> (anchor) tag creates clickable hyperlinks. The href attribute defines the destination. Content
between the tags becomes the link.
<!-- Link to a website -->
<a href='[Link] BBC</a>
<!-- Link to another page in the same site -->
<a href='[Link]'>About Us</a>
<!-- Image as a clickable link -->
<a href='[Link]
<img src='[Link]' alt='Homepage'>
</a>
7. Lists: <ul>, <ol>, <li>
Tag Description
<ul> Unordered list — displays bullet points by default.
<ol> Ordered list — displays numbered items (1, 2, 3…) by default.
<li> List item — used inside both <ul> and <ol>.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
8. Additional Useful Tags
These tags are good to know, especially when practising by building your own HTML pages.
Tag Description
<b> Makes text bold.
<i> Makes text italic.
<u> Underlines text.
<br> Inserts a line break (self-closing).
<hr> Draws a horizontal rule (line) across the page (self-closing).
<center> Centres content on the page. Note: American spelling — ends in er.
<p><b>Bold text</b> and <i>italic text</i></p>
<p>Line one<br>Line two (after a break)</p>
<hr>
<center><p>This text is centred.</p></center>
9. Tags Covered in Other Topics
The following tags are in the OCR specification but are taught in separate videos:
Tag Description
<link>, <div> Covered in the CSS video
<form>, <input> Covered in the JavaScript video
<script> Covered in the JavaScript video
Note: The specification states that any other tags used in exam questions will be introduced within the question
itself.
10. Quick Reference — All Tags at a Glance
<html> Root element <ol> Ordered (numbered) list
<head> Metadata container <li> List item
<body> Visible content <b> Bold
<title> Browser tab title <i> Italic
<h1> – <h3> Headings (large to small) <u> Underline
<p> Paragraph <br> Line break (self-closing)
<img> Image (self-closing) <hr> Horizontal rule (self-closing)
<a href=''> Hyperlink <center> Centre content
<ul> Unordered (bullet) list
Based on CSNewbs HTML video • OCR A Level Computer Science • Practise by building your own HTML pages!