Semantic tags

Some weeks ago, I discussed about how to put a backround image in a hr for IE with jQuery.
I used the word “semantic” in not clear way, so I discussed, in the comment, whether HR is a semantic tag or not.

When I designed the code of my blog, I choose some tag instead of others, why?
We usually forget the history of web and HTML language, when websites were only simple white pages with text and images. A lot of time has passed and we got used to complex graphic design.
We put all of our attention in it and when we design the code, we focus only in the graphic design and in building it in the best possible way. But we often forget to choose the right tags to translate the design in the code.

Every single element of the layout has a meaning and we can choose the right tags to translate the sign language of design in our code.
For example we use to identify our title with H1, H2, etc, but when we have a phrase, we have to think about: what type of sentence is it? How can I translate it in the correct XHTML to show its meaning throughout code?

This is my design:

I translate this design in XHTML as:

<small>5 Giugno 2008 </small>
<div class="entry">
	<p>
		<strong>Provenienza</strong>: Isole Mauritius<br/>
		<strong>Portata</strong>: Contorno
	</p>
	<p>La ricetta più richiesta dai nostri amici! Viene benissimo da portare alle cene estive o invernali che siano.</p>
	<h3>Ingredienti x 4 persone</h3>
	<ul>
		<li>4 manghi verdi</li>
		<li>2 cipolle</li>
		<li>3 spicchi d’aglio</li>
		<li>10gr di zenzero</li>
		<li>2 peperoncini verdi piccanti</li>
		<li>1/2 cucchiaino di senape</li>
		<li>1 cucchiaino di zafferano</li>
		<li>4 cucchiai di olio</li>
		<li>aceto</li>
		<li>sale</li>
	</ul>

	<h3>Preparazione</h3>

	<p>Sbucciare i manghi e tagliarli a fiammifero. Privare i peperoncini dei semi e tagliare anche loro a fiammifero. Preparare un trito di aglio e zenzero.</p>

	<p>In una padella far saltare le cipolle e poi aggiungere il trito, i peperoncini e lo zafferano stemperato in un cucchiaio di acqua calda. Aggiungere quindi i manghi, l’aceto, la senape e il sale. Rimestare ancora qualche minuto e servire con del riso bianco a chicco lungo (tipo <a href="http://www.cookingpiyo.com/2007/06/03/basmati-chawal-riso-basmati/" title="riso basmati">basmati</a>).
	</p>
</div>

Probably this isn’t the only way to write this code and maybe, it isn’t the better way, but I try to find the tags that show the meaning of the information that they have inside. What is important here is the decision, the process that we made to choose the right tag to match content and design.

Other example is to correct our behavior to use <B> in any case: we could use STRONG or EM instead of it!

The same thing happens with the tag SPAN: it isn’t a semantic tag, we can choose a better way to translate the phrase or the word inside of it focusing on the meaning of the role that it has inside the contest.

This is only simple and common example, but there are a lot of forgotten tasg in the (X)HTML as TH,CAPTION, DT/DD, SUB and SUP and so on: finding the right way to use them is up to you!

Technorati tags: semantic tags