HTML

Beginner

35 mins

Teacher/Student led

215 points

What you need:
Chromebook/Laptop/PC or iPad/Tablet

Introduction to HTML

Embark on a journey to understand HTML, the standard markup language for creating web pages. Learn about the structure of a web page, HTML elements, and how web browsers work. Get hands-on experience by writing your own HTML code and adding content to your webpage.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 What is HTML?
2 The structure of a web page
3 What is an HTML element?
4 How do web browsers work?
5 Write some HTML code
6 Add some content
Quiz

1 - What is HTML?

HTML stands for Hyper Text Markup Language. It is the standard markup language used for creating web pages.

HTML codes the structure of a web page by using a series of HTML elements. These elements tell the web browser how to display the content of the web page. For example using HTML we can tell the web browser if something is a heading, or if it some regular text, or if it's an image, or a table, or a link etc.

10 points

2 - The structure of a web page

Each web page on the internet will have HTML code behind it that tells the web browser how to display the content.

Although web pages can display many different things, every web page will always have at least the following:

The <!DOCTYPE html> that appears as the first piece of HTML code. This defines that this document is an HTML document.
The <html> element is the root element of a web page.
The <head> element contains information about the web page.
The <title> element contains the title for the web page (this is used to display the title in the web page's tab).
The <body> element contains all the content that will be displayed on the web page such as headings, text, images, videos, links etc.

<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my first web page.</p>
</body>
</html>

30 points

3 - What is an HTML element?

A HTML element has a start tag, some content, and an end tag. Here are some examples:

Start Tag	Content	End Tag
<h1>	Heading 1	</h1>
<h2>	Heading 2	</h2>
<p>	Paragraph	</p>
<br>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
<br>

Note some HTML elements do not have content inside them (like the <br> 'break' element). These elements are called empty elements and do not have an end tag.

30 points

4 - How do web browsers work?

A web browser is an app that displays websites. Some examples of web browsers are:

Mozilla Firefox
Google Chrome
Microsoft Internet Explorer
Apple Safari

These web browsers take the HTML code and display the web page using the HTML code as the instructions on how to display the web page.

Although web browsers use all the HTML code that is written for a web page, they only display the code that is inside the <body></body> element.

20 points

5 - Write some HTML code

Let's write some HTML code!

Type (or copy and paste) the following code into the box below. This is the basic HTML code for the structure of a web page.

<!DOCTYPE html> <html> <body> </body> </html>

After you have entered the code, click on 'Run Code'. You will notice that nothing is displayed! This is because we haven't put anything inside the <body></body> tags.

50 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started