After attending the PHP GeekMeet in Cluj, I’ve talked briefly with Andrei Gheorghe and remembered a presentation that he held some time ago at Wurbe, about Microformats.

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

What’s the difference between:

<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.

You know the saying it’s funny because is true? Well it also applies to software development. This drawing it’s funny because is true. And when – not if, when – your application will start looking like that, it’s obvious that you’ll need a FAQ section.

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. Keep reading»