Written by Harry Roberts on CSS Wizardry.
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.
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
Some elements have only one, self-closing tag:
Tags are the bits that make up elements.
<div> is a tag. An opening and closing tag makes an element:
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
When people say ‘Don’t use tables, use
div tags.’ they mean use
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
<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.
Note: I also made this visual aid.
Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.