An element is the opening tag, its content, and its closing tag together — the full unit. This is subtly different from a tag, which is just the markup itself.
Element vs Tag
<p>Learn to code with CodingNow.</p>| Term | Refers To |
|---|---|
| Opening tag | <p> |
| Closing tag | </p> |
| Element | The whole thing: <p>Learn to code with CodingNow.</p> |
In everyday conversation, developers often say "tag" when they technically mean "element" — it's a minor distinction, but interviewers sometimes probe it specifically.
Nested Elements
<article>
<h2>5 Tips for Learning Python</h2>
<p>Start with the <strong>basics</strong> before jumping into frameworks.</p>
</article>The <article> element contains an <h2> element and a <p> element, and the <p> element itself contains a nested <strong> element. This nesting is called the DOM tree — see DOM Basics.
Empty Elements
An element can have no content, just attributes — e.g. <img src="logo.png" alt="CodingNow logo"> has no closing tag or inner content; it's a void element.
Content Models
Not every element can go anywhere — a <li> only makes sense inside a <ul>, <ol>, or <menu>; a <td> only makes sense inside a <tr>. HTML defines valid parent-child relationships for most elements, and browsers/validators will flag violations.
Common Mistakes
- Using "tag" and "element" completely interchangeably in a technical interview answer, missing the more precise distinction
- Placing an element somewhere its content model doesn't allow (e.g. a
<div>directly inside a<table>, outside of a valid table structure)
Interview Relevance
Q: "What's the difference between an HTML tag and an HTML element?" — a genuinely common opener; the table above is exactly the answer expected.
Practice Question
For <button class="btn">Submit</button>, identify the opening tag, closing tag, attribute, and the element as a whole.
