HTML tags and elements

Understand how webpages are built with tags
Understand how to modify a basic webpage

Be able to modify an HTML webpage and add content
Be able to save and preview a webpage
Be able to look up HTML tags

Starter

Go to the link below and complete the Starter section.

balf.io/s2-web-1.2

Viewing source vs Inspecting a page

Both viewing the source code and inspecting a page are very useful for trying things out on a webpage.
But they are very different.
- View source lets you see the webpage as it was when your computer downloaded it
- Inspect allows you to see what happens when your computer has loaded it and when you've made changes.

What did we look at last time?

Last time we looked at viewing the source code of a page as well as using the Inspector tool found in many web browsers.
We also looked at the structure of HTML page.

Reminder HTML

Webpages are created with HTML or Hyper Text Markup Language
Throughout the next few lessons we are going to be using HTML to build several webpages.

HTML tags

HTML is made up of tags. The following image is the structure of a tag.

HTML tags

Think of HTML tags like giving instructions:
- <h1> tells the browser "this is a big heading"
- tells it "this is a paragraph"
- <img> tells it "show an image"
- <a> tells it "this is a link"
Most tags come in pairs:
- <tag> content </tag>

The basic structure of a page

In the last lesson we looked at what a webpage is made with, HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My about page</title>
  </head>
  <body>
    My name is
    My favourite subject is
    My favourite food is
    My favourite colour is
  </body>
</html>

The basic structure of a page

In the last lesson we looked at what a webpage is made with, HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My about page</title>
  </head>
  <body>
    My name is
    My favourite subject is
    My favourite food is
    My favourite colour is
  </body>
</html>

There's a common error in the preview. What's wrong with it?

The basic structure of a page

In the last lesson we looked at what a webpage is made with, HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My about page</title>
  </head>
  <body>
    My name is
    My favourite subject is
    My favourite food is
    My favourite colour is
  </body>
</html>

There's a common error in the preview. What's wrong with it?

The basic structure of a page

The problem with the page was that everything was on one line.
To fix it, we put and tags around the text.

<!DOCTYPE html>
<html>
  <head>
    <title>My about page</title>
  </head>
  <body>
    <p>My name is</p>
    <p>My favourite subject is</p>
    <p>My favourite food is</p>
    <p>My favourite colour is</p>
  </body>
</html>

The basic structure of a page

The problem with the page was that everything was on one line.
To fix it, we put and tags around the text.

<!DOCTYPE html>
<html>
  <head>
    <title>My about page</title>
  </head>
  <body>
    <p>My name is</p>
    <p>My favourite subject is</p>
    <p>My favourite food is</p>
    <p>My favourite colour is</p>
  </body>
</html>

Activity

Complete the second part of the worksheet by downloading the template file and filling in the missing parts.

Tags in HTML

Very few people know all of the tags in HTML, especially as they are constantly changing.
So instead of remembering them, they use websites like w3schools.com to find them.

Html icons created by Flat Icons - Flaticon

Activity

Complete the remainder of the worksheet by finding definitions for each of the tags.

If you finish that, go to the extension task and complete the webpage, filling in the blanks there.

Presentation Overview

HTML tags and elements

18:36 | 14-05-2026

Keywords

DragonDocs Management

Random selector

Remove after pick

Set a timer for how long?

10:00

5:00

3:00

2:30

2:00

1:00

...

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Apply theme

Blue theme

White theme

More effects:

Dark Mode

Bold Text

Slide Zoom

All slideshow files