HTML tags vs. elements vs. attributes

When talking (or writing) about HTML, it is common for many people to refer to just about everything as “tags” instead of using the proper terms: “tag”, “element”, and “attribute”. A lot of the time what the author really means can be figured out by looking at the context, but sometimes it can be confusing.

Using the correct terminology is not very difficult. It will also make it easier for others to correctly interpret what you mean, not to mention lend more credibility to what you have to say. This is pretty basic knowledge, but in case you need to refresh your memory I’ve written a quick explanation of tags, elements, and attributes in HTML.

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:

<p>
This is the content of the paragraph element.
</p>

HTML tags

Tags are used to mark up the start and end of an HTML element.

A start tag consists of an opening angle bracket (<) followed by the element name, zero or more space separated attribute/value pairs, and a closing angle bracket (>).

A start tag with no attributes:

<p>

A start tag with an attribute:

<p class="info">

End tags consist of an opening angle bracket followed by a forward slash, the element name, and a closing angle bracket:

</p>

There are also some elements that are empty, meaning that they only consist of a single tag and do not have any content. In HTML, such tags look just like opening tags:

<br>

The syntax is slightly different in XHTML. Empty elements must either have an end tag or the start tag must end with />. In order to ensure backward compatibility with HTML the most common way of writing empty elements in XHTML is to use minimised tag syntax with a space before the trailing />:

<br />

HTML attributes

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.

The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.

<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar’s foobar.">

Document sections

Another related term is “section”. An HTML document is divided into a “head” section (the contents of the head element) and a “body” section (the contents of the body element).

Not nitpicking

You may call this nitpicking, but I don’t think it is. Sure, most of the time people will understand what you mean even if you call everything a “tag”. But by using the correct terminology you reduce the risk of being misunderstood, and you will sound more professional, so you really have nothing to lose by learning the difference.

Posted on August 30, 2005 in (X)HTML