Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Proper Mark up Speak

Last updated Oct 17, 2003.

The grammar-freak in me must speak up. Much has been said about mark up, and it's time to straighten out the right way to speak of mark up. Excuse me while I put on my teacher's look. Good day, students. Are we ready for our lesson?

I admit that I've mixed up my attributes and elements. It's similar to the two cousins of mine named Justin and Joshua. I know exactly who is who, but I'll call one the wrong name and same for the other. Heck, I do it with my own three kids even though their names all start with different letters and sound completely different. Think I know who is who? Of course!

At times, HTML and XHTML are referenced as "code" or "programming languages." Personally, I prefer to say "code" because mark up just doesn't flow when you speak of the two languages. In both cases, they're wrong terms. HTML and XHTML are mark up languages. Not programming. Not coding. They don't have the ability to do anything more than provide the structure for the document.

Memories of DOS Word Processors

I remember using Word Perfect for DOS, the popular word processor before Word for Windows squashed it with its easy to use GUI (graphical user interface). To add bold, italics, and underline, I had to "mark it" by putting using function keys and other shortcuts that are unheard of today. If you turn on the "Reveal Code," you'd see [BOLD][bold] around bolded words and [UND][und] with underlined words.

Little did I know this was the start of my mark up learning. However, <u>, <font>, and <center> are deprecated. Here's w3.org's definition: "A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML. User agents should continue to support deprecated elements for reasons of backward compatibility."

Tag Ain't It

These are presentational elements. Such elements are controlled through CSS. Though the default <h1> has the largest font size of the header elements, it isn't considered presentational because its focus is identifying the content as the most important. H1 is an element. We add it to a document by using a start and end tag in terms of <h1> and </h1>.

I'm guilty of this. I don't know why I do it. I've said, "alt tag." Alt isn't even an element, and most people call elements "tags." Alt is an attribute. It accompanies the img element and doesn't stand alone as in <alt>Hello</alt>. Instead, it's <img src="blahblah.gif" alt="brief text" />. It's A-OK to refer it as alt text since it does provide "alternate text" for those not viewing images.

For memory purposes, element is the bigwig. It appears alone or with company. That company would be the attribute. The attribute has to accompany the element. The tags are like the attribute because they can't live without the element.

Property of CSS Athletic Dept.

Another term to know is property. It's understandable many use attribute to reference the stuff that appears between { and }. Like attribute, they change the appearance of their associated elements. In CSS, these are called properties.

Mark up = attributes

CSS = properties

Maybe you can use mnemonics to help you remember this: MA! Mark up = attribute. Here's a long shot for recalling CSS and properties. School varsity jackets almost always have an "S" to represent "school." Hey, CSS could be "Cascading State School." Almost every collegiate team and even my kids' elementary school have jerseys that say, "Property of [school name or sports team] athletic department." So Cascading State School is associated with property. Far-fetched. Let me know if you remember this one week after reading this.

Then there is structure and semantics. I think we've covered enough for today. Go cheer for CSS to win the layout ball game.