What is HTML, how do tags work, and how do I use basic tags to structure a simple web page?
Explain what HTML is and use basic tags for headings, paragraphs, lists, links and images to structure a simple web page
A practical answer to the N-Level Computer Applications outcome on HTML: what HTML is, how opening and closing tags work, and using basic tags for headings, paragraphs, lists, links and images.
Reviewed by: AI editorial process; not yet individually human-reviewed
Have a quick question? Jump to the Q&A page
Jump to a section
What this dot point is asking
This outcome introduces HTML, the language that structures a web page. You should be able to explain what HTML is, understand how tags work (opening and closing tags around content), and use basic tags for headings, paragraphs, lists, links and images to build a simple page. This is markup for laying out content, not programming with logic. In the written paper you explain tags and write small pieces of HTML.
The answer
What HTML is
HTML stands for HyperText Markup Language. It is the language used to structure a web page. HTML does not do calculations or logic; it labels each part of the content (this is a heading, this is a paragraph, this is a list) so the browser knows how to display it.
How tags work
HTML uses tags, which are labels written in angle brackets. Most content sits between an opening tag and a closing tag:
- The opening tag starts an element, for example
<p>. - The closing tag ends it and has a slash, for example
</p>.
So <p>Hello</p> marks "Hello" as a paragraph. The pair of tags and the content between them is called an element. A few tags, such as the image tag, stand alone and do not need a closing tag.
Headings and paragraphs
- Headings range from
<h1>(most important) down to<h6>(least). Use<h1>for the main title and lower levels for subheadings. For example<h1>Welcome</h1>. - Paragraphs use
<p>, for example<p>This is a paragraph.</p>. Each paragraph is a block of text.
Lists
- An unordered list (bullets) uses
<ul>around the list and<li>for each item. - An ordered list (numbers) uses
<ol>around the list and<li>for each item.
For example, a bullet list:
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
Links and images
- A link uses the
<a>tag with anhrefthat gives the address, and the words between the tags are the clickable text, for example<a href="https://www.example.edu.sg">Visit our site</a>. - An image uses
<img>withsrcfor the file andaltfor text that describes the image, for example<img src="photo.jpg" alt="A school photo">. The alt text helps screen readers and shows if the image fails to load.
Examples in context
Example 1. A club home page. A student builds a simple page with <h1> for the club name, <p> paragraphs for the description, a <ul> list of activities, and an <a> link to the school site. The tags give the page a clear structure that the browser displays neatly.
Example 2. Accessible images. When adding photos, a student always includes alt text such as <img src="event.jpg" alt="Students at the science fair">, so a visitor using a screen reader knows what the image shows and the description appears if the file fails to load.
Try this
Cue. Write the HTML to make the word "Welcome" a top-level heading. (
<h1>Welcome</h1>, using the opening and closing heading tags around the text.)Cue. Explain the difference between an opening tag and a closing tag. (The opening tag starts an element, such as
<p>; the closing tag ends it and has a slash, such as</p>.)Cue. Write the HTML for a link to https://www.example.edu.sg with the clickable text "Home". (
<a href="https://www.example.edu.sg">Home</a>, where href gives the address and the words are the clickable text.)
Exam-style practice questions
Practice questions written in the style of SEAB exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.
Original4 marksExplain what HTML is and what a tag is, and describe the difference between an opening tag and a closing tag, using a heading as an example.Show worked answer →
HTML (HyperText Markup Language) is the language used to structure a web page. It uses tags to label each part of the content so the browser knows how to display it.
A tag is a label in angle brackets. Most content sits between an opening tag and a closing tag. The opening tag starts the element, and the closing tag, which has a slash, ends it.
For a heading: the opening tag is <h1>, then the heading text, then the closing tag </h1>. So <h1>Welcome</h1> makes "Welcome" a top-level heading.
What markers reward: HTML as a markup language that structures a page with tags, a tag as a label in angle brackets, and the opening-versus-closing point shown correctly with a slash in the closing tag.
Original5 marksWrite the HTML to make a paragraph of text, a link to the page https://www.example.edu.sg, and an image from the file photo.jpg with suitable alt text. Briefly say what each tag does.Show worked answer →
The HTML:
<p>This is a paragraph of text.</p> creates a paragraph.
<a href="https://www.example.edu.sg">Visit our site</a> creates a link; the href gives the address and the words between the tags are the clickable text.
<img src="photo.jpg" alt="A school photo"> shows the image; src gives the file and alt gives text that describes the image for screen readers or if it fails to load.
What markers reward: a correct paragraph tag, a link with an href and clickable text, and an image with src and alt, plus a short correct description of each.
Related dot points
- Plan a simple web page or small site, identifying purpose and audience, sketching a layout and structure, and planning clear navigation
A practical answer to the N-Level Computer Applications outcome on planning a web page: deciding purpose and audience, sketching layout and structure, and planning clear, consistent navigation before building.
- Edit images by cropping and resizing, choose suitable file formats, and compress images so they load quickly while still looking clear
A practical answer to the N-Level Computer Applications outcome on editing images for the web: cropping and resizing, choosing JPEG, PNG or GIF, and compressing files so pages load quickly while staying clear.
- Work with audio and video files, perform simple edits such as trimming, choose suitable formats, and keep file sizes sensible for sharing online
A practical answer to the N-Level Computer Applications outcome on audio and video: common formats, simple edits such as trimming, and keeping file sizes sensible for sharing or embedding online.
- Describe what the internet and the World Wide Web are, the role of browsers, web addresses and servers, and the difference between the internet and the web
A clear answer to the N-Level Computer Applications outcome on how the internet works: the internet versus the web, browsers, web addresses and servers, and how a page is requested and loaded.
- Create a document and apply character and paragraph formatting, including fonts, bold and italic, alignment, line spacing and styles, to make text clear and consistent
A step-by-step answer to the N-Level Computer Applications outcome on creating and formatting text: fonts, bold and italic, alignment, line spacing, and using styles for a clear, consistent document.