The Element, the Tag and the Attribute

 

A short clarification of what an HTML element, tag and attribute are.
Article by: Dion van Huyssteen
Sections: HTML, XHTML
Often when reading forums about HTML, people seem to get their terminology mixed up. Usually the word tag is used to define everything from an element to an attribute. While I'm sure that this isn't the end of the world, misunderstandings here can lead to confusion, and if one is to learn HTML from tutorials, it is probably a good idea to understand the difference between a tag, an attribute and an element.

The Element

An element consists of start tag, it's attributes if any, content and an end tag. The following example has two elements, a paragraph element, and within it, a link element.
Code:
<p>This is the content of the paragraph and forms part of the paragraph element, and <a href="somelink">this is the link element starting with the a tag</a></p>

The Tag

A tag is used to mark the beginning and the end of an element. A tag is started with an opening angle bracket "<", contains the element name as well as any attributes, and is ended with a closing angle bracket ">". A closing tag will contain the element name preceded by a forward slash "/". In the example above, there are 4 tags: The opening <p> tag for the p element, the opening <a> tag for the a element, and then the closing tags for those elements.

Elements without an end tag

In HTML there are empty elements that consist only of a start tag, the line break (<br>) being an example. In normal HTML placing this elements start tag by itself is legal. In XHTML however, all tags must have a end tag. This can be accomplished by putting an end tag in, or you can do it by placing a forward slash at the end of the start tag (e.g. <br />). Placing the forward slash at the end of the start tag ensures backwards compatibility with HTML and is thus the preferable method.

The Attribute

Attributes are used to define properties of an element, and are placed in the element's start tag. An attribute has both a name and a value known as an attribute-value pair. In the example above, the p element has no attributes, but the a element has an href attribute that defines where the a link points.

In Summary

And that is elements, and their tags and attributes in a nut shell. While not knowing the correct terminology will not stop you from learning how to code HTML, it will definitely lessen the chance of confusion.