Q and other mysterious XHTML tags

In this post, I explain not so widely known HTML tags and making use of existing tags in another way they were ment to.

Bold and Italic

Semantic HTML states that you should avoid using <b> and <i>, but use <strong> and <em> instead when you want to emphasise something. However, <b> and <i> are still allowed. They just don't have any semantic value.

Italic or <i> is known to be used when words are traditionally written in italic, e.g. names of ships: "The Queen Elisabeth is a mighty fine vessel". For <b> I haven't found any traditional use up to now.

For coding XHTML, this means that we could use <b> and <i> the same way as <span>: semantic neutral inline elements we want to stand out or we want to give special layout to. In this blog, the labels in the right column, 'Tag cloud', 'Calendar' and 'Monthly archive' are perfect candidates: they should stand out because they are labels, but we don't want Search Engines to pick them up as important content.

Form tags

When you present a fill-in form to the user, how should you code it in HTML? The old way is using HTML tables to present the labels and fields in two columns. But there is a nicer way. Basically, a form is nothing more than a list of labels and fields. And XHTML provides us with a <label> tag just for this purpose. The <label for="fieldId"> tag has a very important behaviour attached to it: when you click on it, the browser gives the corresponding field focus. The for attribute must correspond with the id of a field:

<ul>
    <li><label for="fLastName">Name: </label><input name="LastName" id="fLastName" value="" /></li>
    <li><label for="fFirstName">First name: </label><input name="FirstName" id="fFirstName" value="" /></li>
    <li><label for="fEmailAddress">E-mail address: </label><input name="EmailAddress" id="fEmailAddress" value="" /></li>
</ul>


Try clicking on the labels:

I used a class 'niceform' to the form to add a nice layout to the form:

.niceform{background:#ddd;border:solid 1px #c90;padding:5px}
.niceform ul{margin:5px 0;padding:0}
.niceform li{list-style:none;clear:both}
label{display:block;float:left;width:70px}
input{width:300px}


The mysterious Q-tag

The <q> tag was ment to define inline quotes, as in:

<q>Stop</q>, he said, <q>Let us examine the content first!</q>


Browsers should display this as: "Stop", he said, "Let us examine the content first!" but they just disregard the tag. If we don't use <q> for inline quotes, we could use it to add special behaviour to it with JavaScript, maybe to quickly translate words, labels or categories from a lookup glossary in JSON. It's a trick I used before to translate categories in views. I will explain this in another post.

Creative use of Bold and Italic

When we code HTML tags in JavaScript, we have no real semantic restrictions: Search Engines will not pick up any of it anyway. From JavaScript, <b> and <i> are mere tags we can add special behaviour to. Used in a toolbar, <i> could stand for 'icon' and <b> for 'button'. Here's an example of coding an icon toolbar with the <i> tag. The id attribute is used both to get the icon image and to identify the action:

<div class="toolbar">
<i id="bold" onclick="Toolbar.exec(this)"></i>
<i id="italic" onclick="Toolbar.exec(this)"></i>
<i id="insertorderedlist" onclick="Toolbar.exec(this)"></i>
<i id="insertunorderedlist" onclick="Toolbar.exec(this)"></i>
</div>


.toolbar{background:#ccc;height:20px;border-top:outset 1px}
.toolbar i{float:left;width:20px;height:20px;background-image:url(inc/smarticonsr65.gif);cursor:hand}
#bold{background-position:-280px -60px}
#italic{background-position:-300px 0}
#insertorderedlist{background-position:-300px -40px}
#insertunorderedlist{background-position:-280px -80px}


var Toolbar={
exec:function(a){alert('Exec: '+a.id)}
}

Try to click on the icons. I am going to use this technique for a rich text editing control later on.