HTML
Beginner
30 mins
Teacher/Student led
275 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

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!
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    2 - Paragraphs

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

    3 - Break

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

    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).

    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.

    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.

    Copyright Notice
    This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more