Tutorial Sneak Preview: Elements vs. Tags

By Evan — — Web

I’m working on a new version of my ancient, long-neglected HTML Tutorial, which I originally wrote in 2002. The Official List of reasons why I’m doing this includes:

  • finishing broken and missing sections, such as tables and forms
  • updating the tutorial for the new web environment (IE 6 is now the baseline)
  • migrating to DocBook so that I can provide multiple output formats
  • replacing all copyrighted material in the examples with material in the public domain
  • releasing the tutorial under a much more liberal license

But the real reason I’m doing this is because the tutorial currently says “tags” when it really should be saying “elements”. Arrgh! I cringe every time I read that. I’ve added a section about this to the tutorial so that others can avoid my mistake…

A Digression: What’s a “Tag”?

You’ll often hear people refer to “tags,” as in, “The markup tags tell the Web browser how to display the page.” Almost always, they really meant to say “elements.” Tags are not elements, they define the boundaries of an element. The p element begins with a <p> open tag and ends with a </p> closing tag, but it is not a tag itself.

  • Incorrect: “You can make a new HTML paragraph with a <p> tag!”
  • Correct: “It’s a good idea to close that open <p> tag.”

Now that you possess this valuable information, you’re in the same position as someone who knows that in the phrase “That’s not my forte,” the word “forte” should be pronounced fort, not for-tay. You get to feel slightly superior to people who say for-tay, but you really shouldn’t go running around correcting them.

Sometimes you’ll hear people say “alt tag,” which is even worse. An “alt tag” is really an alt attribute. This important attribute provides alternative text for images, in case the user can’t see the image for some other reason. We’ll talk more about this attribute later.

The element vs. tag confusion is sort of understandable: it’s a common mistake even among professionals, and they both look like angle-brackety things, after all. But attributes are not tags, not even close. If you hear someone say “alt tag,” this is a key indication that the speaker does not understand HTML very well. (You probably shouldn’t invite them to your next birthday party.)

I suppose I shouldn’t beat myself up, since nearly all of the prominent HTML tutorials get this and many other issues wrong, as any search for “html tutorial” makes depressingly obvious. Two notable exceptions are Stephanos Piperoglou’s Webreference.com tutorial and Patrick Griffith’s outstanding HTML Dog.

5 thoughts on “Tutorial Sneak Preview: Elements vs. Tags”

  1. Well, you can insert a paragraph break just by adding a <p> tag — all the major browsers cope with crummy markup to some degree — it’s just not a good idea. It’s better to actually properly wrap each non-empty element in paired open and close tags, and indicated empty elements by closing them with />.

    BTW, a minor blog tweak suggestion: If a person has a cookie storing their name and address, the “Store my name and address” box should be checked when they use the comment form. If they uncheck it, that would wipe out the cookie so that next time they show up, their name and address won’t be stored.

  2. Right. (Although whether you should close your empty elements with a /> depends on whether you’re using HTML 4.01 or XHTML.)

    In another section of the tutorial, I give an example of using the p element incorrectly, along with the *practical* reason why you don’t want to do that. Namely, because certain things that you think are HTML paragraphs won’t actually be HTML paragraphs, which will in turn cause trouble in your CSS.

  3. Oh, and that’s not a bad idea about how the cookie works. But I don’t think I’ll be hacking anything here until after I migrate to MT 3. Or possibly WordPress.

  4. I would suggest you check a recent dictionary before making a claim about the pronuniation of a commonly used word. I refer you to the online Merriam-Webster dictionary’s discussion of “forte”.

    I would embed the link but that’s not my forte.

  5. Thanks for letting me know, Phil. My dictionary from college made it clear that the 1-syllable pronunciation is preferred, but I see the consensus nowadays is that both pronunciations are right. So it looks like I’ll have to come up with another throwaway example:

    “Now that you possess this valuable information, you’re in the same position as someone who understands electron drift speed and how AC signals actually propagate in copper wire. You get to feel slightly superior to people who talk about “sending/streaming/wasting electrons” in the context of the Internet, but you really shouldn’t go running around correcting them.”

Comments are closed.