HTML Tags and Elements
Learn what tags and elements are and how they work.
HTML Tags and Elements is a free HTML for Kids lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
1
HTML Tags and Elements
Welcome to the next lesson! Today, we’ll learn about HTML tags and elements. These are the building blocks of every web page you’ll create.
2
What Are HTML Tags?
HTML tags are special keywords enclosed in angle brackets <>. They tell the browser what to do with the content inside them.
Example of a tag:<h1>
Tags usually come in pairs: an opening tag and a closing tag.
Example:
<h1>Hello</h1>3
What Are HTML Elements?
An HTML element is a combination of an opening tag, content, and a closing tag.
For example:
<h1>Welcome to My Page</h1>4
Types of Tags
There are two main types of tags:
- Paired Tags: These have both an opening and a closing tag. Example:
<p>Paragraph</p> - Self-Closing Tags: These don’t need a closing tag. Example:
<img />
5
Commonly Used Tags
Here are some basic HTML tags you’ll use often:
<h1> to <h6>: Headings (from largest to smallest)<p>: Paragraph<a>: Link<img>: Image<br>: Line Break
Let’s see an example:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />6
Attributes in Tags
Attributes provide extra information about an element. They go inside the opening tag.
Example:
<a href="https://example.com"
target="_blank">Visit Example</a>
7
Nesting Tags
You can place one tag inside another. This is called nesting.
Example:
<p>This is a <strong>bold</strong> word.</p>
8
Remember: Always close the inner tag before closing the outer tag.
9
Example: Putting It All Together
Here’s an example that combines everything we’ve learned:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>10
11
Great Job!
Congratulations! You’ve learned about HTML tags, elements, attributes, and nesting. These are the building blocks of every web page you’ll create. In the next lesson, we’ll write your first HTML page with real content!
Frequently asked questions
Is the “HTML Tags and Elements” lesson free?
Yes — the full text of “HTML Tags and Elements” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.
What will I learn in “HTML Tags and Elements”?
Learn what tags and elements are and how they work. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML for Kids?
No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “HTML Tags and Elements” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML for Kids lesson?
Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What is HTML?
- HTML Structure: The Building Blocks
- HTML Tags and Elements
- Setting Up Your First HTML Page