HTML Basic Elements

In this step-by-step lesson, you'll learn the basics of HTML. You'll explore how to create headings, paragraphs, breaks, images, and links. Finally, you'll apply your new skills to write your own HTML code, incorporating all these elements. Get ready to dive into the world of web development!

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>

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>

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>

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%">

123learn · Online learning platform

Unlock the full learning experience

You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

Hundreds of curriculum-aligned lessons

Interactive activities in every lesson

Printable resources & progress tracking

Get started

Copyright Notice
This lesson is copyright of Coding Ireland 2017 - 2026. Unauthorised use, copying or distribution is not allowed.