Well, what can I say? Microformats are cool idea, that will allow scripts to better retrieve the information from the Internet. Of course, if people actually use them. So I’ve decided to be among the pioneers in this matter and post my own resume on the web, formatted as hResume. Here

<form action="/foo" method="post">
    <!-- other form fields -->
    <input type="submit" value="Send data" />
</form>

…and…

<form action="/foo" method="post">
    <!-- other form fields -->
    <button type="submit">
        Send data
    </button>
</form>

Apparently none. Both snippets look and act exactly the same way. And yet, there is a more subtle difference. The difference lies in the semantics and in the meaning of the two types of buttons. A <button> tag displays a button, that you can click with your mouse and can be placed almost anywhere on a page. That’s all. It doesn’t have a purpose.

An <input type=”submit” > on the other hand does a lot more. It’s a form element – can only appear in a form – and it has meaning attached to it. When you submit a form by clicking on such an button, the value of the button is being sent along with the values of all the other form elements to the server.

<form action="/foo" method="post">
    <input type="checkbox" name="item[]" value="1" id="item_1" /> <label for="item_1">First item</label>
    <input type="checkbox" name="item[]" value="2" id="item_2" /> <label for="item_2">Second item</label>
    <input type="checkbox" name="item[]" value="3" id="item_3" /> <label for="item_3">Third item</label>
    With selected: <input type="submit" name="delete" value="Delete" /> <input type="submit" name="archive" value="Move to archive" />
</form>

In this case it matters on which button the user clicks, so an input type=”submit” tag is the best choice. But when you have something like:

<form action="/foo" method="post">
    <input type="text" name="email" />
    <button type="submit">
        Subscribe to newsletter
    </button>
</form>

…it doesn’t! So here the button tag is best suited.

Usually, people use tables or other types of markup for setting up the FAQ page, but the proper way to code it is the long forgotten definition list. When it comes to semantics, this is the perfect choice. The questions in the FAQ represent the definition terms and their answers the definition data.

The proper xhtml code for the FAQ page should look like this…

<dl>
    <dt>How do I...?</dt>
    <dd>Just click the ... button!</dd>
    <dt>Are your sure?</dt>
    <dd>Positive!</dd>
</dl>

…of course, with more relevant data.

Improved FAQ

If you have a lot of questions, displaying them all to the user at once isn’t always such a good idea. If you have many items in your list, you can hide all the answers an only display them when the user clicks on the associated question. The proper way to do this is to hide the dds with Javascript, because if you hide them using CSS and display:none and the user turns off js in the browser, he will only be able to stare with increasing frustration at a list of questions with no visible answers.

Here are two javascript implementations, with two of the most popular javascript frameworks at this moment: prototype and jQuery that convert a regular definition list into a clickable one in a unobtrusive manner that degrades gracefully.

Prototype implementation (see working example):

Event.observe(
    window,
    'load',
    function() {
        $$( '.faq dd' ).each(
            function( item ) {
                item.hide();
            }
        );

        $$( '.faq dt' ).each(
            function( item ) {
                item.observe(
                    'click',
                    function( event ) {
                        Event.element( event ).next().toggle();
                    }
                );
            }
        );
    },
    true
);

jQuery implementation (see working example):

$( document ).ready(
    function() {
        $( '.faq dd' ).hide();
        $( '.faq dt' ).toggle(
            function() {
                $( this ).next().show();
            },
            function() {
                $( this ).next().hide();
            }
        );
    }
);

Another good idea is to let the user know that the definition terms are “clickable”, by adding the following rule to your CSS file:

.faq dt {
    cursor: hand;
}

Questions?