The Core HTML Tags?

By Deane Barker on September 10, 2003

We’re deep into HTML and CSS now with The Joshua Project, and I’m determined to teach these guys the right way to do things from the start, which means lots of CSS.

I’m not going to let them get into the bad habits of HTML hacks. No FONT tags, no CELLPADDING, etc. We may not tackle CSS positioning right away (yes, there may be some table-based layouts), but they’re not going to hack up pages like we did back in ‘96 either.

So, when I was wandering through a list of HTML tags, trying to ferret out the tags they really needed to know, I got to wondering: What is the minimum set of HTML tags you would need to build a Web page?

Removing the necessary structural tags like HTML, HEAD, TITLE, BODY and all that (essentially limiting the list to descendants of the BODY tag), I was left with these four tags as the minimum set needed to build a legitimate Web page: DIV, SPAN, IMG, and A.

Is this right? By my calculations, by using these four tags and a healthy dose of CSS, you could build a solid Web page. Comments? Am I missing a big one? (I know there are tags like OBJECT and APPLET and such, but you don’t need those, really.)

Gadgetopia

Comments

  1. As far as making sure your HTML is formattable, I agree – those four would do it. I’m also a fan of using the ‘type’ tags (

    ,

    ,

    ,

    , etc.) to indicate what type of content is inside that tags (like you do on this site).

    I might also add the list tags, especially

      and
    • . I’ve found those increasingly usefull, especially with menus.

  2. The TABLE tag is still neccesary, but only for tabular data. If you’re making a table of something, using CSS to do it would be like using a butter knife as a screwdriver – it works, but it’s kludgy, sometimes you get hurt, and your wife yells at you for bending her silverware up.

    Don’t use TABLE for layout, but use it for tables.

    I think P, UL, and LI should still be used for their jobs as well. You can tweak a SPAN to do the job of a P, but again, it’s a kludge. Theoretically, you can make DIV so the jobs of SPAN and IMG, but why would you?

  3. Go look here:

    http://www.siouxfallscommercial.com/Property/Office.asp

    That listing of office properties was done without any tables. Just nested, floated DIVs. Works quite well, and was pretty easy.

    DIV and SPAN can be hacked into each other because they’re the same tag, just one has a display of “block,” and other has a display of “inline.”

    With this, you wouldn’t need the LI tags because they’re just a DIV with a display of “line-item.” However, that might be messy, so I’d keep them.

    You could use a DIV as an IMG? How, by setting the background to the URL of an IMG? Never thought of that.

    The H1…H6 tags are good. I’d keep them.

    I agree that TABLE tags are good…for tables. I found myself the other day trying to prepresent some tablular data with DIVs because I’ve been conditioned to think the TABLE tag is bad. But then I realized that this was what it was designed for, and that it is indeed okay to use it for this purpose.

    I wouldn’t use P actually. I think P tags should be replaced with classed DIVs.

    So my list currently looks like this: DIV, SPAN, A, IMG, H1+, UL/OL, LI, and TABLE+.

  4. Deane,

    I agree with your updated list, except the exclusion of the P tag. It’s one of those tags that tells you what type of content is inside it — a paragraph. A DIV tag, however, tells you nothing about what’s inside it. In fact, if you get rid of P, you might as well get rid of H1+. Like P, the H1 tag tells you, ‘this is a Header.’ You could just replace H1+ tags with classed DIVs as well.

    I agree that in most browsers a P acts almost identical to a DIV. And, the user (or viewer of the page) could care less. However, since I am a purist, I say, keep P.

  5. But what context does a P tag impart? That it contains text? H1+ tags denote that the text in them is a heading. That the tag contains text that should be read (assuming this is what a P tag is saying), isn’t really that ground-shaking — all text on the page should be read, shouldn’t it?

    I’m still against the P tag, but I’ll gladly listen to arguments.

    I wrote something about this last year:

    http://www.gadgetopia.com/2002/11/11/RIP.html

  6. In defense of the P tag:

    If your users visit the site with a non-CSS compliant browser, or a text-only browser like Lynx, use of the P tag to denote your paragraphs will increase readibility by seperating one paragraph from the next. Using only DIV’s could (and likely will) result in all your text running together.

    A way I like to build pages is to first structure all my markup logically, and test it using http://www.delorie.com/web/lynxview.html . This “no frills” version of your page should still be logical and readable. Once you’ve got this, then style away to your heart’s content.

    Just my 2 cents.

  7. You have a good point there, Frank. Though, to be honest, I’m big on just using two BR tags instead of P tags or styled DIVs anyway. I’m still anti-P, I guess.

  8. While I agree that you only need a few tags to create a decent “looking” webpage removing all the other tags makes the markup meaningless. In the new world of css and styles the html is the markup and the different tags have meaning about what the content inside them is. If you remove all the other tags then the page markup is meaningless to someone using a screen reader or other device that takes its queues from tags like p, if you change the p to divs then how will the screen reader know to tell the blind person that it has come across a paragraph without reading the entire paragraph first. There are many other tags that should be used as well including acronym, abbr, label, etc. Even though explorer and other web browsers ignore them they provide valuable information to screen readers just imagine if you have IEEE in your web page the screen reader will read I’EEEEEEE instead of I E E E you can add a title to tell that it is pronounced I triple E. Without these different markups you will destroy much of what is possible with the web and lead your students down a bad road. You are right to focus on content but you should be sure to make sure to impress upon your students that using the correct tags for different content is very important and that with css available you should never use a tag simply for its display characteristics while disregarding its intrensic meaning.

Comments are closed. If you have something you really want to say, email editors@gadgetopia.com and we‘ll get it added for you.