Recently an interesting discussion occurred at Sweclockers regarding the semantics of HTML classes. I argued that classes in HTML should hold significant semantic meaning, and was surprised to find that many disagreed. It started when the following piece of code was posted as a suggested solution to the original thread problem:

<div class="content white">
    <p>White text</p>
</div>

Forms are an integral part of the web; but how do you design an effective, user-friendly form using valid HTML5 and CSS? Well, the answer is not as easy as it might seem; there are a lot of considerations to make. First, you have to decide what information you want to gather from the user. If you’re designing a registration form, you want to gather as little information as possible to make the registration simple and quick. Extra information can always be gathered on a profile/settings page when the user has registered. With new technology such as OpenID, registration forms can be reduced to one text input field and one button; it won’t get much simpler than that.

Setting/profile forms tend to get a bit larger. This is perfectly fine, as long as you have a sensible layout and, if your form is really large, split it up in several parts that can optionally be submitted separately. Again, using modern technology such as AJAX, the user experience can be greatly enhanced in these cases. {continue reading}

OpenID is a great technology that has the potential to simplify most authentication routines on the internet to an incredible degree. One of the processes that benefit from OpenID is the registration process. Instead of the good old giant form of preferences and additional information you could get along with just one peice of information; your OpenID provider. There are sites that already use this great method of registration, such as Stacked Overflow et. al., but the rest of the internet has been very slow to adopt this (by now fairly old) technology.

OpenID improves security by eliminating the need to remember a ton of different passwords — remembering one really difficult password is far better (and easier) than not remembering 15 different ones and having to either write them down or make them really simple. More sites need to embrace this excellent system; it’ll make the internet a more secure place.

With the not so recent anti-table movement people have begun to seek solutions that don’t involve tables. This is a good thing. However, it has had one major side-effect; people misuse elements. This isn’t really a side-effect of not using tables; rather, it’s a side-effect of people not paying any attention to semantics.

Recently one user on Stack Overflow asked “What is the best way to style a list of checkboxes?”. I was kind of appalled when I saw a flood of non-semantic answers involving div, ul and even dl elements. People seemed to forget that there was an element with this very purpose (fieldset) in HTML already, and instead of doing some research they immediately fall back to half-assed solutions involving misused elements and complete lack of semantic meaning.

The definition list is not a universal solution for something that might be considered to be a list. Its purpose is to associate one specific element with one or more elements, such as a word and its definitions. Definitions are really one of the few cases one needs to employ the definition list, most other cases are covered using very basic HTML.

Side note; this post has been a draft for several weeks now and I originally intended to present a range of examples of how (not) to use definition lists. However, I feel that presenting my point is more relevant than spending time I don’t have on writing examples that are of lesser importance to the post.