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:

  1. <p>
  2. This is the content of the paragraph element.
  3. </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:

  1. <p>

A start tag with an attribute:

  1. <p class="info">

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

  1. </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:

  1. <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 />:

  1. <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.

  1. <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

Comments

  1. As a technical writer by trade this has always annoyed me. HTML is pretty easy for most people to pick up, maybe it’s TOO easy, and certain people then fall into the, all too common, trap of thinking they know it all.

    After all “element” and “attribute” are quite techy sounding, whereas tag, well that’s like something you get on clothes - the layperson has an easy hook on which to hang their co.. knowledge (tripped up by my own metaphor!).

    I’m not making my point very well, someone else tell me what I’m trying to say please (long day, yadda yadda)

  2. A good article. Tom Myer briefly touched on this in his recent article on SitePoint.

    One of my pet peeves is when people say “alt tags”, especially supposed web professionals.

  3. August 30, 2005 by Kalle Wibeck

    Roger, I agrees with you when it comes to programmers/developers (which should be the ones you’re talking about, right?.
    If all webdevelopers were more in to the “mysteries of XML” I think this tag/element/attribute confusion would be less noticable.
    But when it comes to non-tech co-workers or clients I think it’s sane and normal that they use the wrong terminology, after all, syntax description is mostly up to “us”, right!?

  4. Not to nitpick, but: your example of an alt attribute shows improper usage. It should probably have been “Foos can be easily balanced on bars.”.

    See Hixie’s alt text advocacy.

  5. …or rather “Foos can be balanced on bars easily.”.

  6. A class is an attribute?

  7. August 30, 2005 by Roger Johansson (Author comment)

    Kalle: Yes, this is mostly meant for those who should know the difference.

    Greg: LOL!

    mini-d: Yep: Element identifiers: the id and class attributes.

  8. Nice Article. For me personally as a German it is also interesting to know the English terminology.

    Of course your are not nitpicking or have you mentioned block-level and inline elements?

  9. Yeah I am one of those guys who sadly got used to saying “alt tags” lol.. Anyway. Bear with me until I get over it. (And I did that on a W3 mailing list, what an embarassment…)

  10. August 30, 2005 by Roger Johansson (Author comment)

    Greg: Hmm. After thinking about your comment some more, I realise you are correct. Possibly nitpicking, but correct. I have updated the text in the alt attribute example :-)

  11. No, I don’t think you are nitpicking at all. Its important to use correct terminology to ensure the information you are conveying is clear. Not just for correctness, but so that any learners reading one’s work are not mislead or confused. A good example is ‘cite’. If I routinely use the wrong nomenclature (eg ‘alt tag’) and then I mention the ‘cite tag’ - how will you know what I am referring to? The cite element, the actual tag, or the cite attribute. Consistently get it right and there is no problem.

    I read an article the other day that consistently referred to the ‘alt img tag’. I had trouble reading it…

  12. I am one of those people who occasionally use the wrong terminology. This post was a good refresher. Thanks Roger. Nice post.

  13. Good luck, Roger. I wrote a post like this over a year ago, but it doesn’t seem to have helped any. :)

    Actually, calling everything ‘tags’ is the hallmark of those one step up from absolute beginners. The latter seem to call everything ‘codes.’ :)

  14. Man, I realize just how ignorant I must sound, as half the time I use all those terms interchangably, and the other half of the time I’m just rambling incoherantly.

    @Tommy: It reminds me of how people call their entire computer a CPU. I am quick to point out to them that they have probably never actually seen a CPU, unless it involved a screwdriver and a bit of frustration.

    @Roger: Welcome to 9rules (a bit late, but welcome nonetheless). I’m glad you’re here to help straighten us out on the use of our geek-slang and in general raise the collective intelligence level a few notches. :)

  15. @Nathan: In Sweden many non-techies refer to the computer as ‘the hard drive’ rather than the CPU. I don’t know which is worse. :)

  16. I finished writing a proposal for a tech spec that was half spec / half educational last week for a website (a first around here I think) and made sure to use the correct terms. But is it website or web site? ;-)

  17. I guess in a way it’s nitpicking because I do know some who do know the real meaning but still habitually call everything tags over a couple of beers. I’m probably one of them - some memories I feel are back there waiting to embarrass me no doubt. But by the same token it’s important that we must use the proper professional language if we would like to be regarded as professionals so I see your point.

    The real trick is using the correct language for the conversation at hand - client, other DW developer on the phone who calls everything a tag, and savvy one’s who know what attributes are for example. As professional as it is I doubt the first two would get a lot out of my conversation if I don’t use ‘their’ reference of understanding.

    I’m willing to beat them over the head with the good book ‘Idiots Guide to Making Web Pages’ if anyone’s willing to cover my financial losses though lol. Seriously, I get your point and remember Tommy’s article quite well.

  18. Anne van Kesteren also has some nice articles on this nomenclature thing: Tags vs. elements, and as for the “ALT tag” horror, the ALT attribute.

  19. I wrote something last year about tags and elements that expands quite a bit — it explains some of the intricacies of SGML vs. XML.

  20. Glad to see I’m not the only person annoyed by this :)

  21. I was a big offender of using the wrong terminology. I am one of those people that learned code by reading other peoples code. So I learned the proper techniques, but the correct terms for individual elements sometimes escape me. I am working very hard on fixing this. Especially now since I am out at client sites a lot. I don’t want to sound like a fool, so thanks for the proper terminology.

  22. I work with some people that refer to everything as either “you know that thing“ or “that markup taggy thing.” Guess I’m not the only one in this boat. Thanks for the article, I will have to forward it too them.

  23. This makes sense, but I’m wondering about a similar situation: the term “element” seems to be used with a distinct sense in the context of DOM scripting. So for instance:

    x = document.getElementById(‘someId’);

    What is x? I suppose it should be called “a reference to the element ‘x’”, but the terminology built into the DOM calls seem to suggest (to me, anyway) that ‘x’ is also an ‘element’.

    Perhaps it should be called a ‘node’. But that doesn’t seem quite right either; this ‘x’ seems distinct from what you get with, for instance:

    links = document.getElementsByTagName(‘a’)

    But “element” is there in both calls.

    Or perhaps I’m mixing two disparate contexts.

  24. August 31, 2005 by Markus Wulftange

    Suitable to this topic: Lachlan Hunt – HTML Tags

  25. When did this turn into a nooblar blog.

  26. Sadly, I believe I needed this refresher.

  27. It was only recently that I learned the correct usage of the terms element and tag and I thank you for confirming the other source.

    I occassionally also see the term alt text but, although this too could be wrongly used, in most cases, it is a reference to the content of the alt attribute.

    Although (now) there is clarification of the element and tag terms, what is the proper term for p when it is used in CSS? Yes, it is a selector but, for newbies, it can be quite confusing when, depending on how it is used, p could be part of a tag, part of an element or part of a selector.

  28. September 1, 2005 by Roger Johansson (Author comment)

    I’ve seen most of the other articles on this subject that have been mentioned in the comments, but I thought since so many still aren’t using the correct terminology another one wouldn’t hurt ;-)

    Patrick: I am not an expert DOM scripter, but in your first example x is a single element, and in the second it is an array of elements.

    Jules: In CSS, p would be an element name:

    These patterns, called selectors, may range from simple element names to rich contextual patterns.

    CSS 2.1, Selectors

  29. Element name! Thanks.

  30. @Patrick

    I think an element is a relatively abstract concept. You make a paragraph element in (X)HTML by writing an opening tag, some text and a closing tag. You can create (or address) them in a different way in a DOM script - but they’re still elements. There’s no need for a different name (that would be confusing).

  31. I also wrote a short article on the subject a couple of weeks ago, and hopefully the combined effect of all theese articles will create a more consistent usage of the two expressions.

  32. Not nitpicking at all. Using confused terminology is like starting a job by grabbing indiscriminately in your toolbox and taking the almost-right tool to the worksite. What you come up with might do the trick, but we have a term for that: “kludge.” Let’s use the right tools!

    (And nitpicking does have its place. Who wants a head full of nits?)

    Greg: Sorry I didn’t see the original version of the sentence you critiqued. But your note did put me in mind of something that great entrepreneur Dan’l Barnum once said about animal trainers: “A foo and his bar are soon departed” …

  33. Thanks Roger! I’ve successfully used this article to prove to my work colleagues that I’m not just being pedantic when I refer to an “alt attribute” rather than an “alt tag” (the latter still sends a shiver up my spine!).

  34. Now that’s when it gets serious, when you’re talking to your brother developers. I’m with you there entirely. Its not pedantic at all in that conversation as you all need to know what each other is talking about.

    There are never enough articles about the basics so some things need to be repeated and stressed on lots of blogs. Remember there are those just finding this stuff for the first time that can be educated before they develop those bad habits.

    A very informative comment list too I might add. Great stuff.

  35. I feel like I use ‘tag’ all the time. Simply because I first started out using a WYSIWYG program like Dreamweaver. Then as I progressed I actually started looking at the html, and then moved on to CSS. I guess over time I’ve just over looked certain things like this. It’s really nice to have someone point out the small stuff that may seem nit picky, but really can influence people.

  36. I think you most often hear “can’t we just use alt tags?” from people who think that adding a few alt attributes is all they need to do to make a site accessible. I’ve found it’s generally people who don’t do markup for a living (or have since moved up the proverbial ladder and no longer do but still think they could) who call everything tags.

    Thanks for pointing out one of my favorite pet peeves.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.