HTML

Beginner

30 mins

Teacher/Student led

+275 XP

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

HTML Basic Elements

Explore the essentials of web design by learning key HTML elements. You'll work through creating headings, paragraphs, line breaks, images, and links with hands-on coding examples. Put your skills to the test by writing your own HTML code.

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 Headings
2 Paragraphs
3 Break
4 Images
5 Links
6 Write some HTML
Quiz

1 - Headings

HTML comes with 6 different heading tags <h1> to <h6>. The most important headings on a page use <h1>, the second most important headings use <h2> and so on.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

👇 Mark your steps as done as you complete them.

+40 XP

2 - Paragraphs

Paragraphs are defined using the <p> tag. Each paragraph will go onto a new line with some space above and below it.

<p>This is the first paragraph. It has lots and lots and lots of text in it.</p>
<p>This is the second paragraph. Notice how it goes onto a new line.</p>

👇 Mark your steps as done as you complete them.

+30 XP

3 - Break

Breaks are defined using the <br> tag. This tag puts a line break wherever it's included.

<p>This is the first line.<br>This is the second line<br>This is the third line.</p>
<p>Lots<br><br>of<br><br><br>line breaks!</p>

+30 XP

4 - Images

Images are defined using the <img> tag. For each <img> tag we need to give some extra information for the location of the image file to show and the width and height. These are called attributes and they go inside the <img> tag.

src - this is the source or location of the image file to display.
width - we can say how wide the image should appear (in pixels or a percentage).
height - we can say how high the image should appear (in pixels or a percentage).

<img src="https://www.codingireland.ie/images/avatar/avatar-1.jpg" width="100" height="100">
<img src="https://www.codingireland.ie/images/avatar/avatar-2.jpg" width="200" height="200">
<br>
<img src="https://www.codingireland.ie/images/avatar/avatar-3.jpg" width="50%">
<img src="https://www.codingireland.ie/images/avatar/avatar-4.jpg" width="20%">
<img src="https://www.codingireland.ie/images/avatar/avatar-5.jpg" width="20%">

+40 XP

5 - Links

Links are used to 'link' to other web pages and they are defined using the <a> (anchor) tag. For each <a> tag we need to give some extra information for the location of where to link to as well whether to open a new tab or not. These are called attributes and they go inside the opening <a> tag.

href - this is the location of the web page we want to link to.
target - this says whether we open the link in the current tab or a new tab.

Whatever we put inside the <a></a> tags is what the browser will display as the link.

<a href="https://www.codingireland.ie" target="_blank">Coding Ireland Website</a>
<br>
<a href="https://www.rte.ie" target="_blank">RTE Website</a>
<br><br>
<a href="https://www.wikipedia.org" target="_blank"><img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png"></a>

+50 XP

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

Copyright Notice
This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.

Your Answer or Description of Your Work

Project URL This can be a link to your project (e.g. a Scratch, Microbit, Arcade or CodePen URL link).

Upload File

You must be logged into Scratch to share your project, otherwise the link will not work.

To get the URL link of your Scratch project:

Make sure you're logged into Scratch.
Click on the Share button in the project editor.
Click on the Copy Link button.
Click on the Copy Link link. This will save the URL of your project page into your clipboard.

To get the URL link of your Microbit project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your Arcade project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your CodePen project:

Make sure you're logged into CodePen.
Open your project in the editor.
Click on the Save button at the top of the editor.
Copy the link from the address bar in your web browser (e.g. https://codepen.io/Jane-Smith/pen/gOVXxBQ)

HTML Basic Elements

Teacher Class Feed

1 - Headings

Send your work to your teacher

2 - Paragraphs

Send your work to your teacher

3 - Break

Send your work to your teacher

4 - Images

Send your work to your teacher

5 - Links

Send your work to your teacher

Unlock the Full Learning Experience