The Select tag in HTML is the code used to create a simple drop-down list on the web. In its simplest form, its usage is for organizing a long list of options and allowing a user to click one item from the list. One of the most common usages of it can be found as you fill out a web form and have the ability to select your state from one.
I had that exact need arise this week and can’t actually count on two hands over the years how many times it has come up. The code is easy but with 50 states + options like Washington DC and Canadian provinces it gets a bit tedious to re-type it all. And what’s more, sometimes you just need abbreviations of states and not the full name.
Posting mostly for my future self but in case you need a quick copy/paste down the road I’ve gone through and done up three versions:
US states + DC (full titles)
US states + DC (abbreviations)
US states + DC + Canadian provinces (full titles)
Each includes an id and a class name so you can style to your liking and a tabindex number to remind you that keyboard accessibility is useful.
There’s no shortage of material in the web-ranks that points to best-use practices of coding a website in a proper, semantic way. Semantic, basically meaning the idea that your content should be separate from the way it is presented to the computers that display your work. Creating a website with logical semantic code, often means that your website fares better in a number of areas:
Pages have the ability to be far more flexible for each device that accesses them
Page load times are often shorter with well-written code
Search engines — like Google — mention well-written code in their documentation of ways to rank higher in their results
Code-nazi’s sleep better when you abide by the rules written in their books and they don’t call you out in the blogosphere
Disclaimer: I am all for best-practices in everything I produce. Whether in design or development, I try to always take the path of least resistance but not at the expense of cutting corners. I prefer to develop my sites with semantic HTML.