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

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


    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:

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

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

    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.



    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.

    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 Coding Ireland. 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