HTML elements, tags and attributes

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

This article is only a small one, and to the vast majority it won’t be of much use, but I’m still astounded that today, in 2011, professional web designers and developers are still making this fundamental mistake. The difference between HTML elements, tags and attributes.

Elements

An element is a single ‘chunk’ of code comprising of an opening and closing tag.

<code><div>This is a div element</div></code>

This is a div element. Not a div tag.

Some elements have only one, self-closing tag:

<code><img /></code>

Tags

Tags are the bits that make up elements. <div> is a tag. An opening and closing tag makes an element:

<code><div></code>

And:

<code></div></code>

Attributes

An attribute is a piece of code attached to a tag which supplies additional information:

<code><div <mark>class="some-class"</mark>>This is a div element</div></code>

This is an attribute.

So, when people say ‘I’ve used alt tags’, they haven’t; they’ve used alt attributes.

When people say ‘Don’t use tables, use div tags.’ they mean use div elements.

When people say ‘mark important text up in a strong tag’ they mean mark important text up in a strong element (made up of two strong tags).

<code>|<--             --element--            -->|
<tag attribute="value">Element content</tag></code>

This is probably really very basic for the majority of you, so apologies, but it really winds me up when I see developers making this mistake. Still.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.