goer.org

« How to Convert AuthorIT to DocBook | Main | I Win Christmas! »

Tutorial Sneak Preview: Elements vs. Tags

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.

Posted by Evan Goer on Dec. 02, 2006 at 10:38 AM | Comments (5)

Comments

  1. Well, you <em>can</em> insert a paragraph break just by adding a <code>&lt;p&gt;</code> 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 <code>/&gt;</code>.

    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.

    Posted by Auros on Dec. 05, 2006 at 3:55 PM

  2. Right. (Although whether you should close your empty elements with a <code>/&gt;</code> depends on whether you're using HTML 4.01 or XHTML.)

    In another section of the tutorial, I give an example of using the <code>p</code> 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.

    Posted by Evan on Dec. 05, 2006 at 7:32 PM

  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.

    Posted by Evan on Dec. 05, 2006 at 7:35 PM

  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.

    Posted by phil on Dec. 09, 2006 at 4:49 PM

  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 <em>actually</em> 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."

    Posted by Evan on Dec. 09, 2006 at 5:55 PM

Post a comment

(Optional, but hides your email address)

Are you a spammer? (REQUIRED — you must select "No" to post.)

NOTE: For mysterious reasons, comment posting is extremely slow right now. It can take from 30-60 seconds after you hit "Submit" for your comment to post. However, your comment will go through; you shouldn't need to click the button again.

Comment Syntax

The basics:

  • For a new paragraph, enter two carriage returns.
  • Plain URLs such as http://www.yahoo.com automatically become links.
  • The system encodes all angle brackets and ampersands. For example, if you try to enter a HTML paragraph, the system displays the open tag literally as "<p>".

Show advanced syntax

About

This entry was posted on December 2, 2006 by Evan Goer.

For more entries, you can visit the main journal page or browse through the complete archives, which date back to 2001.

Subscribe to this Site

(What does subscribing mean?)

Recent Posts

  1. Apr 20: Sorry, My Amicus Briefs Only Work Against Chaotic Evil
  2. Apr 07: Time for Some Good Old-fashioned Embezzling
  3. Mar 30: Does 'FIRE EVERYTHING!!!' Sound Better in German?
  4. Mar 10: Pop Quiz: Good Parenting
  5. Mar 06: Thank Gods for the iPhone App Store
  6. Feb 28: Why "Never Let Me Go" is Boring As Hell
  7. Jan 31: Two Thousand Hours
  8. Jan 21: I Will Make You Stuff!
  9. Jan 08: I'm so evil and... skanky. And I think I'm written for the IBM 7094!
  10. Jan 02: NieceTube - Nesya Loses at Fencing

Friends and Family

Copyright

Creative Commons License Text released under Creative Commons.

To use this license, you must attribute this work properly. This license does not extend to comments unless the original poster of that comment states otherwise.

Powered by Movable Type 3.33.

Home | About | Journal | HTML Tutorial

© Copyright 2001-2007, Evan Goer. Some Rights Reserved. Last Updated April 20, 2009.