HTML Elements & Anatomy
What is an HTML Element?
Think of tags as labels and elements as the actual physical items. For example, if you label a box "Toys", the label is the tag, but the box and the toys inside together form the complete element.In HTML, an Element is the entire package: the opening tag, any attributes (settings), the actual text or content inside, and the closing tag.
Why does it matter?
Understanding the difference between tags and elements helps you communicate clearly as a developer and makes debugging much easier. It also introduces you to attributes, which are extra settings that give elements special powers (like telling an image where to load from, or giving a link its destination).How to write it
Let's break down the anatomy of an element:<p> - tells the browser "start a paragraph here".class="intro" - extra settings placed inside the opening tag. The attribute name is class and the value is "intro".Paragraph text - the actual text that the user sees on the screen.</p> - tells the browser "the paragraph ends here".Here is a visual representation of how these parts come together:
<p
class="intro"
>
Paragraph text
</p>
Common Mistakes
</p class="intro"> is incorrect.class="intro").Quick Reference
<tagname> — Opening tag.</tagname> — Closing tag.name="value" — Attribute structure, always written inside the opening tag.<hr> — Horizontal Rule. It's a "self-closing" tag used to draw a divider line. It does not need a closing </hr> tag!Your Task
1. Add an `<hr>` tag below the paragraph.
2. Below the `<hr>`, create another `<p>` tag with the text 'End coding.'.
index.html
Type code above to start the lesson.
Live Preview