posted by Matt Ward on Dec 8, 2010.
In this article, we will take a brief look at the concept of semantics and the Semantic Web, and then turn to one little, often overlooked but extremely useful little HTML attribute that can really help make your web forms more semantic (assuming you’re not using it already).
Semantics, semantics, semantics—sometimes it feels like it has become just another clichéd buzzword that we like to throw around the web these days. Obviously it’s more than that though. Semantics has everything to do with meaning. More specifically, in the context of web design/development and the deployment of markup, it has to do with meaning in a very particular context.
I’ve always tended to think of semantics in web design as being primarily a means of accurately describing content. In fact, that’s how I have described HTML to a number of the people who have asked me questions as they were getting started using the language. The tags in which we wrap our content essentially describe what the content is, and as the sort of person who obsesses over grammar, structure and the meaning instilled by language, this is a huge part of the reason that I preach the necessity of using the correct tags in your HTML.
Using the wrong tag is basically telling us that the content is something that it’s not.
This understanding of semantics is, well, primarily semantic. In other words, it concerns itself with meaning for meaning’s sake. Yeah, trust the guy with the English degree to make that argument.
There are others on the web, however, who (being far more intelligent than I) look beyond the semantics of semantics and theorize the concept of what they call the Semantic Web. All the way back in 2001, Tim Berners-Lee, James Hendler and Ora Lassila authored an article published in Scientific America about this very topic. Simply entitled “The Semantic Web,” the article envisions meaning (semantics) as becoming the common bond the would bring information from different and even unrelated sources together in a way that could be readily processed by software, due simply to the common shape of meaning. In the article, the authors write:
The Semantic Web will bring structure to the meaningful content of Web pages, creating an environment where software agents roaming from page to page can readily carry out sophisticated tasks for users.
It is a fascinating idea, and though we will probably get there one day, I don’t think we’re there yet. There are probably thousands of semantic “content pockets” all over the web, but the glaring inconsistencies between sites and other data models are probably still polluting the waters too much for any truly extensive semantic tasks to be readily performed by the envisioned “agents”
That being said, however, it is still a good practice to work at creating the most semantically accurate code that we can today. It is important simply for the sake of meaning, but also to train ourselves for the day when semantic coding will be more than just a best practice that we as web designers and developers like to talk about amongst ourselves. The chances are very good that one day, semantics will become a true requirement.
But What about Forms?
Yes, this article is about forms. We’re getting there.
If you follow me at all on Twitter, you may have seen that I am currently working on an application called Survd, which will allow users to create and manage surveys (on other data collection forms) right from their own websites. As such, I’ve been spending a lot of time working with forms lately, and it occurred to me that, up to now, I had not been creating forms that were quite as semantic as they could have been.
Why, you ask?
Simply because I had previously been unaware of a somewhat obscure little attribute of the <label> tag, called “for”. In a nutshell, this little attribute actually allows us to specifically declare the input field that a particular label actually describes. For example, I could define a label and input in HTML like this:
<label>Name</label> <input type="text" name="name" id="yourname" />
As human beings looking at this, code we can obviously deduce that the label is intended to describe the input field. However, from a purely technical standpoint, the label and the input are not related to each other in any way other than their relative proximity. An extremely intelligent program might be able to correlate the name value of the input with the contents of the label, but what if we had something like this?
<label>What do they call you?</label> <input type="text" name="name" id="yourname" />
Now there is no textual relationship at all. The elements may rest right beside each other in the document, but is it really safe for any program parsing the document to assume that this proximity automatically implies relationship? Probably not. There are too many possible exceptions.
That’s where the for attribute comes in really handy. Now, we can take our same block of code, but add the attribute in:
<label for="yourname" >What do they call you?</label> <input type="text" name="name" id="yourname" />
Instantly, this establishes the desired relationship! The label now explicitly defines the connection between the input and its label through the common value held by the id attribute of the input. Using this attribute also brings the added usability benefit of allowing the user to click on the label to bring focus to the related input element. It’s a small touch, but in many ways, isn’t that what a lot of usability is all about—those small touches that help to make a site or web app super user friendly?
I’m sure that there are plenty of people out there who already knew about the for attribute. Until, recently, I wasn’t one of them. It’s one of those oddly obscure attributes that you don’t read a lot about and which doesn’t do anything overly visible of flashy to draw attention to itself. As such, in my continuing journey of self-education, it was unfortunately something that got lost or glossed over.
I’m glad to have it well in mind now, though, and I hope that those of my readers who were in the same boat as me will also benefit from the knowledge. I’ve already gone back and checked through my comment form on the blog (attributes were already there, thanks to rock-solid coding from WordPress), and will be improving the semantics of all my forms of the future by explicitly linking my labels and inputs.
What about you? Are you so familiar with the for attribute that it’s like second nature to you now? Or, did you come into this article like me, having somehow missed it?Post A Comment
Also from Echo Enduring Media: