Module 1: Syntax0 Level Beginner

2. Difference between Tag, Element and Attribute

The detailed anatomy of Tag vs Element vs Attribute

Real-life analogy

If a tag is a 'person', then an attribute is the 'colour of their clothes' or their 'height'. In other words, an attribute gives a tag additional information.

Explanation

Students get most confused about these three terms:

Tag: A word written inside angle brackets (for example <p> to start and </p> to close).
Element: The whole group, from the opening tag through the closing tag and the content between them, is called an element.
Attribute: It is always written inside the opening tag and gives the tag extra instructions (for example src="photo.jpg" or href="https://..."). It always comes as a name="value" pair.

Golden rules

Always enclose attribute values in quotes "...".
Attributes always go inside the opening tag, never in the closing tag.

Common mistake

Forgetting to add quotes, such as <a href=https://google.com>. This can break the code.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <!-- href, target and style are Attributes here -->
  <a href="https://google.com" target="_blank" style="color: #2563eb; font-weight: bold; text-decoration: underline;">
    Open Google (New Tab)
  </a>
</body>
</html>

Run & edit this in the live editor

Quick quiz

In <p class='lead'>Hello</p>, what is 'class="lead"' called?

Tag
Element
Attribute
Entity

Show answer

Answer: Attribute

The additional information given inside a tag is called an Attribute.