Understanding Elements and Tags

People often use "tag" and "element" interchangeably, but they mean slightly different things. A tag is the markup itself, like <p> or </p>. An element is the tag plus its content plus its closing tag — the whole unit.

<p>This is a paragraph.</p>

Here, <p> is the opening tag, </p> is the closing tag, "This is a paragraph." is the content, and all of it together is the element.

Most elements follow this open-content-close pattern:

<h1>Heading</h1>
<div>A generic container</div>
<span>Inline text</span>

Elements can be nested inside other elements, forming a tree structure:

<div>
  <h2>Title</h2>
  <p>Some <strong>important</strong> text.</p>
</div>

Here, <strong> is nested inside <p>, which is nested inside <div>. This nesting must be properly closed in the reverse order it was opened — this is called well-formed HTML. Browsers are forgiving about small mistakes, but relying on that forgiveness leads to bugs that are hard to track down later.