Tags, Elements & Attributes

The exact parts every piece of HTML is made of: an opening tag, content, a closing tag, and the attributes that ride inside the tag.

HTML6 min readConcept 3 of 42

What it is

People use the words tag, element, and attribute interchangeably, but they are three different things. A tag is a single piece of markup like <p> or </p>. An element is the whole unit: the opening tag, the content inside, and the closing tag together. An attribute is extra information that rides inside the opening tag, written as name="value".

So <p class="intro">Hello</p> is one element. <p ...> and </p> are its tags, Hello is its content, and class="intro" is an attribute on it. Once you can name those parts, every other HTML lesson is just learning which elements exist and what they mean.

Why it matters

Almost every HTML bug a beginner hits is really a parts problem: a closing tag that was forgotten, an attribute value missing its quotes, or two elements that overlap instead of nesting. Naming the parts is what lets you read an error and know which one is wrong.

It is also the vocabulary the rest of the web speaks. Documentation, error messages, CSS selectors, and teammates all assume you know the difference between an element and an attribute, so this is the grammar the whole subject is built on.

How it works

A normal element has three parts: an opening tag that names it, the content, and a closing tag with a slash, like <h1>Title</h1>. Tags are not case sensitive, but write them lowercase by habit so your markup stays consistent and readable.

Attributes go inside the opening tag, each separated by a space, written as name="value" with the value in quotes. Always quote the value: title="My homepage" is one attribute, but unquoted title=My homepage is read as three. Some attributes are boolean, like disabled or required, where simply being present means true and leaving it out means false.

A few elements are void elements: they hold no content, so they have just one tag and no closing tag, such as <br>, <hr>, <img>, <input>, <meta>, and <link>. You may see a trailing slash like <br />, which is allowed but not required. Elements also nest inside each other, and the rule is to close them in the reverse order you opened them. Finally, anything wrapped in <!-- ... --> is a comment: a note the browser ignores and never shows.

The anatomy of an element

Here is one element on the left. Each part lights up and names itself on the right, so you can see exactly where the tag ends, the content sits, and the attribute lives.

<p class="intro">Hello</p> <img src="cat.jpg" alt="A cat"> <!-- a note the browser ignores -->
opening tag

names the element and marks where it begins

attribute

extra info inside the opening tag, as name="value"

content

whatever sits between the tags

closing tag

the same name with a slash; marks where it ends

<img> is a void element: one tag, no content, no closing tag.

<!-- --> is a comment: a note the browser never shows.

One element, named part by part.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In <p class="intro">Hello</p>, what is the element?
  2. 2Which of these is a void element with no closing tag?
  3. 3Why should you wrap attribute values in quotes?

Remember this

  • A tag is one piece of markup; an element is the opening tag, content, and closing tag together.
  • Attributes ride inside the opening tag as name="value"; boolean ones like disabled are true just by being present.
  • Void elements (<img>, <br>, <hr>, <input>, <meta>, <link>) have one tag and no closing tag.
  • Nest by closing in reverse order (last opened, first closed); <!-- ... --> is an ignored comment.

Done with this concept?

Mark it complete to track your progress. No login needed.