Lesson Content
HTML is built from three core concepts: tags, elements, and attributes. Understanding the difference between them is essential.
Tags are the raw syntax — the angle-bracket keywords you type. For example, <p> is an opening tag and </p> is a closing tag.
Elements are the complete unit: the opening tag, the content inside, and the closing tag together. So <p>Hello</p> is a paragraph element.
Attributes are extra information added inside the opening tag. They modify how the element behaves or appears. Attributes always follow the format name="value".
class— assigns a CSS class for stylingid— gives the element a unique identifierhref— specifies the URL for a linksrc— specifies the source for an imagealt— provides alternative text for images
Some elements are self-closing — they don't wrap content, so they don't need a closing tag. Examples include <img />, <br />, and <input />.
<!-- An anchor element with href attribute -->
<a href="https://example.com" class="nav-link">
Visit Example
</a>
<!-- An image element (self-closing) -->
<img src="photo.jpg" alt="A sunset over the ocean" />
<!-- A div with id and class attributes -->
<div id="hero" class="section hero-section">
<h1>Welcome</h1>
</div>Finished this lesson?
Mark it complete to track your progress through the course.
Learning Objectives
- 1Define the difference between a tag and an element
- 2Understand how attributes modify elements
- 3Use common attributes like class, id, href, and src
- 4Recognise self-closing tags
0 of 31 lessons done