next
HTML basics for Canvas
This short course will introduce to the essentials of HTML. You don't need to be a programmer - just enough to feel confident using templates in Canvas. To navigate this course, use the buttons at the top or follow the instructions ⬆️
Want to create something like this?
You can with just a basic knowledge of HTML and some great templates.
Let's get started
next
back
Over the next 30 minutes, you are going to learn to:
01
Recognise key HTML elements, tags, and attributes.
02
Edit existing HTML templates in Canvas to customise content.
Apply basic edits (e.g., headings, colours, emphasis, links) to make learning pages more engaging.
03
next
back
What is HTML?
Think of HTML as the 'instructions' that tell the browser how text, images, and layouts should appear.
💬
HTML stands for HyperText Markup Language. It structures content on the web, including Canvas pages. HTML consists of the components below. 👉 Select each one to learn what it does.
Attributes
Elements
next
back
HTML is like Lego blocks - pieces you stack together to build a structure.
🧩
The building blocks of HTML
Let's now explore some of the most commonly used elements within HTML. 👉 Select each one to learn what it does.
colours
styles
paragraphs
colours
styles
sections
headings
paragraphs
sections
headings
When using HTML is often easier to use the RGB or HEX values, rather than naming a colour. Important: in HTML code, colour must be spelt the American way 'color'. On the right you will find some great resources that you can use to get the code for various colours to use in HTML.
W3 Schools
HTML colour codes
The Canva colour wheel
Adobe colour wheel
You are likely familiar with headings. You may have used them in a word document for example. Headings in HTML are very similar. The HTML element for headings is ‘h’ along with a number. For example, <h1> </h1> The number indicates the size of the heading. 🍿 Learn more about headings in the video on the right.
The paragraph element is probably the most used HTML element. It's what tells the page that you are creating a paragraph. 🍿 Learn more about paragraphs in the video on the right.
Short for division, the <div> element acts as a container that divides a page into sections.
It group elements in your HTML together. This enables you to apply custom styles to a group of HTML elements. 🍿Learn more about the <div> element in the video on the right.
We've already learnt about the style attribute and how you can use it to style an element. But there are other types of formatting that you can use in HTML, such as: <br> or <strong> = bold text <i> or <em> = italics text 🍿Learn more about the style elements in the video on the right.
next
back
From code to Canvas
The great thing about using HTML in Canvas, is that there are loads of pre-written code that you can use. At the end of this eLearning we will share some HTML templates that you can start using today. But first you need to know how to use them. 🖥️ In the video on the right, we will demonstrate the process for using template HTML in Canvas.
Are you ready to start using HTML in Canvas?
Before you get started using the HTML templates in Canvas, let's check in on what you've learnt. There will be 3 questions for you to answer.
Ready? Use the button below to get started 👇
Start the quiz
Remember:
- HTML is made of elements, tags, attributes, and values.
- You don't need to memorise everything - just recognise and edit the basics.
- Templates make set up easy and consistent.
💡
You're now ready to start practising!
✏️
I'd like you to now have a go at using the HTML templates in Canvas. The resources and instructions you need will be provided on the activity page.
Start the task
To format or add style to an element, we need to use attributes. Attributes must be added to the opening tag of an element and determine how the content in that element will appear. These are usually made up of two parts: a name and a value. The name is the thing you want to change or format, for example the colour of the text. The value is how you want to change or format the element.
To learn more about elements, please refer to the 2-minute video below 🍿
The value
<p style=color:red">This text is green</p>
The name
Output
To learn more about elements, please refer to the 2-minute video below 🍿
We compose HTML using elements. These elements are what structure a page and define it's content. The below element is a paragraph. Each HTML element consists of tags. These are the symbols either side: <p> </p>. Think of them as a container. The content is then in between these tags.
Closing tag
Opening tag
<p>This is an element</p>
Content
HTML basics for Canvas
Digital Learning
Created on September 23, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Discover Your AI Assistant
View
Urban Illustrated Presentation
View
Geographical Challenge: Drag to the map
View
Decisions and Behaviors in the Workplace
View
Tangram Game
View
Process Flow: Corporate Recruitment
View
Weekly Corporate Challenge
Explore all templates
Transcript
next
HTML basics for Canvas
This short course will introduce to the essentials of HTML. You don't need to be a programmer - just enough to feel confident using templates in Canvas. To navigate this course, use the buttons at the top or follow the instructions ⬆️
Want to create something like this?
You can with just a basic knowledge of HTML and some great templates.
Let's get started
next
back
Over the next 30 minutes, you are going to learn to:
01
Recognise key HTML elements, tags, and attributes.
02
Edit existing HTML templates in Canvas to customise content.
Apply basic edits (e.g., headings, colours, emphasis, links) to make learning pages more engaging.
03
next
back
What is HTML?
Think of HTML as the 'instructions' that tell the browser how text, images, and layouts should appear.
💬
HTML stands for HyperText Markup Language. It structures content on the web, including Canvas pages. HTML consists of the components below. 👉 Select each one to learn what it does.
Attributes
Elements
next
back
HTML is like Lego blocks - pieces you stack together to build a structure.
🧩
The building blocks of HTML
Let's now explore some of the most commonly used elements within HTML. 👉 Select each one to learn what it does.
colours
styles
paragraphs
colours
styles
sections
headings
paragraphs
sections
headings
When using HTML is often easier to use the RGB or HEX values, rather than naming a colour. Important: in HTML code, colour must be spelt the American way 'color'. On the right you will find some great resources that you can use to get the code for various colours to use in HTML.
W3 Schools
HTML colour codes
The Canva colour wheel
Adobe colour wheel
You are likely familiar with headings. You may have used them in a word document for example. Headings in HTML are very similar. The HTML element for headings is ‘h’ along with a number. For example, <h1> </h1> The number indicates the size of the heading. 🍿 Learn more about headings in the video on the right.
The paragraph element is probably the most used HTML element. It's what tells the page that you are creating a paragraph. 🍿 Learn more about paragraphs in the video on the right.
Short for division, the <div> element acts as a container that divides a page into sections. It group elements in your HTML together. This enables you to apply custom styles to a group of HTML elements. 🍿Learn more about the <div> element in the video on the right.
We've already learnt about the style attribute and how you can use it to style an element. But there are other types of formatting that you can use in HTML, such as: <br> or <strong> = bold text <i> or <em> = italics text 🍿Learn more about the style elements in the video on the right.
next
back
From code to Canvas
The great thing about using HTML in Canvas, is that there are loads of pre-written code that you can use. At the end of this eLearning we will share some HTML templates that you can start using today. But first you need to know how to use them. 🖥️ In the video on the right, we will demonstrate the process for using template HTML in Canvas.
Are you ready to start using HTML in Canvas?
Before you get started using the HTML templates in Canvas, let's check in on what you've learnt. There will be 3 questions for you to answer.
Ready? Use the button below to get started 👇
Start the quiz
Remember:
💡
You're now ready to start practising!
✏️
I'd like you to now have a go at using the HTML templates in Canvas. The resources and instructions you need will be provided on the activity page.
Start the task
To format or add style to an element, we need to use attributes. Attributes must be added to the opening tag of an element and determine how the content in that element will appear. These are usually made up of two parts: a name and a value. The name is the thing you want to change or format, for example the colour of the text. The value is how you want to change or format the element.
To learn more about elements, please refer to the 2-minute video below 🍿
The value
<p style=color:red">This text is green</p>
The name
Output
To learn more about elements, please refer to the 2-minute video below 🍿
We compose HTML using elements. These elements are what structure a page and define it's content. The below element is a paragraph. Each HTML element consists of tags. These are the symbols either side: <p> </p>. Think of them as a container. The content is then in between these tags.
Closing tag
Opening tag
<p>This is an element</p>
Content