Semantic HTML is not just the latest fad on the web nor another way to show that your web site and your coding style is trendy. On the contrary, semantic HTML is the only way to get consistent results across web sites and environments. As web developers, we're all accustomed to run several projects simultaneously. The point is that without a consistent, semantic way of naming and using our HTML elements, we'll always end up with having several web sites that feature inconsistent and incompatible element nomenclatures. What does this mean? Simply put, we can't globally change our site styles across our web sites, not to say that it's hard to remember the structure of each site we're working on. Let's see some examples.

Read more »

HTML 4.01 introduced the concept of successful form controls. Quoting the HTML 4.01 specifications, "A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a form element and must have a control name.. This definition might lead to some confusion, so the specifications add the following:

Read more »

Two of the most underused attributes of the img element are width and height. If properly used, these attributes can actually speed up the overall loading and rendering of images. In fact, if you omit these attributes, browsers must perform an additional step in order to exactly calculate the dimensions of an image. For that reason, I recommend to use these attributes whenever it's possible. Many developers who use CSS think that these attributes are deprecated. This is completely wrong. The deprecated attributes for images are border and align, not width and height. Bear this in mind, especially when you're dealing with large sets of images.

FBML (FaceBook Markup Language) is a markup language proposed by Facebook to extend some of the core functionalities of the social network itself. In its simplest form, it's made up of code snippets that, once inserted into the markup of a web document, allow us to use some Facebook's gadgets and widgets.

For example, the following code adds a "Like" button to our pages:

<fb:like href="http://www.site.com/"></fb:like>

Unfortunately, this code won't pass the W3C validation. Theoretically speaking, this problem would arise only with HTML, which is not extensible and its DTD is immutable. On the contrary, if we serve our documents as XHTML 1.1 and with a custom DTD, then we could use FBML without any problem.

I say "theoretically", because with XHTML 1.1 we must:

1. serve our documents as application/xhtml+xml
2. specify the FBML namespace in the root element (html)
3. create a custom DTD

However, none of these steps can actually be done without a firm knowledge of how XML works, plus a long practice with parsing, DTDs, namespaces and XHTML 1.1. Is there a solution? Yes, and it involves injecting the above snippet directly into the DOM via JavaScript. For example, by using jQuery:

var $fbLike = '<fb:like href="http://www.site.com/"></fb:like>';
$($fbLike).appendTo('body');

But now a major accessibility problem arises: we have to deal with browsers that don't support JavaScript or have JavaScript turned off. Then we must provide the following fallback mechanism:

<noscript>
       <p><a href="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fwww.site.com">Like</a></p>
</noscript>

By providing a simple textual link within a noscript tag we cater the accessibility needs of our users.

Check out this SlideShare Presentation:

Building i phone apps with html, css, and javascript

View more documents from m1.

Interesting talk by David Baron.

This video is really obsolete, but it reminds me the first answer I got about CSS. I asked: "What is the best CSS editor?" and they said: "Notepad!". After 5 years, do you know what I realize? Simplicity is bliss!