HB Blogside

Usability in HTML and CSS

As a web developer I am very aware of the need for usability of web sites. I also teach HTML/CSS as an adjunct professor at Clark College. In the time that I have been teaching HTML/CSS and trying to help students understand these languages, I have become more aware of usability issues with the HTML/CSS languages.  Here are some examples.

HTML has tags for linking to external CSS files (<link>), images (<img>), other web pages (<a>),  forms (<form>), and scripts (<script>). In each case you need to provide the address of the item you are accessing. You do this by providing an attribute to the tag that specifies the address to the item. The attributes are:

  • <link> uses the href attribute
  • <a> uses the href attribute
  • <img> uses the src attribute
  • <form> uses the action attribute
  • <script> uses the src attribute

All are doing basically the same thing— pointing to an external file using a URL, but a coder needs to remember which attribute (src/href) goes with which tag. From a usability perspective, it would be much better if they all used the same attribute.

As another example, both HTML and CSS have comments. The languages are intrinsically linked. Why do they have different comment characters? In HTML you type <!–  comment –> and in CSS you type /* comment */. It would be much more usable if CSS used the same comment system as HTML.

And then there are forms. There are three tags for forms that are related to data: <input>, <select>, and <textarea>. Select tags do one thing: they display a dropdown. Textarea tags do one thing: they display a multiline text box. But the input tag in HTML does ten different things: text, password, hidden, radio, checkbox, submit, reset, button, file, and image. Why have <input type=”checkbox”> instead of <checkbox>?

CSS has issues as well. One that trips up my students is the use of a space as an operator in selectors. For example, in the selector: div > p,  the “>” sign is an operator indicating a child relationship. But to indicate a descendant relationship the selector is: div p! The space between the “div” and the “p” is an operator. Wouldn’t it make more sense to do something like: div >> p to indicate descendants?

This, I think, illustrates a problem with the design of programming languages. The designers of many of the languages don’t think about human factors or usability. I suppose that one could argue that this is a good thing in that it gives rise to opportunities to develop code editors that try to provide code editing tools to help. But I, personally, would like to see future releases of the languages address issues of usability and how those issues affect learning of the languages.

If you are a developer I am sure you can come up with more examples. Please feel free to send them to me.

This entry was posted in Technology, Usability and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.




3 × one =