I’ve been interviewing for the past couple of months, and the bulk of my interviews have been with new companies. Many have some very interesting stories, and almost to the company, each one is really focused on the latest versions of HTML and CSS. Admittedly, my actual work on HTML 5 and CSS 3 has been minimal at best, though I am taking the time while I am not working to “woodshed” and get familiarized with the concepts and do some exercises in HTML 5 and CSS 3 so my ramp-up time once I get a job will be minimal.

Now one thing that I’ve observed when I look back on all the interviews I’ve had when the subject turns to HTML 5 and CSS 3 is a focus on the new, “sexy” elements, such as video, but moreover, the focus is on CSS 3. To me, when the focus is purely on the CSS 3 side of it, it’s only really telling half of the story.

I understand, people want “sexy.” But I’ve learned over the years that the ultimate presentation is secondary to the structure of the document you’re presenting, for the simple reason that without a good document structure, you’re asking for trouble down the road when you want to change things up in your presentation. If you’ve written a document structure that’s tailored to a particular presentation, you run the risk of it only being able to be used with that presentation and that presentation alone. This is precisely why it was encouraged NOT to use tables for layouts because tables literally fixed you into a grid structure that could not easily be modified at a later date.

With HTML 5, the game has completely changed. Though it is not fully complete nor ubiquitously available in all browsers, we UI developers finally have a set of tags that allow us to precisely describe a document. To me, that’s the crux of HTML 5. It’s not the new features and things you can do with CSS 3; it’s the document. Repeat: It’s the document.

For years, I’ve been seemingly howling at the moon with both designers and other engineers about the importance of document structure. I communicate well enough where we ultimately come to an agreement, but it is trying sometimes.

A little sidebar…

During the course of writing this article, I remembered one of my on-site interviews; one in which I failed miserably on the HTML part. But I learned my lesson in that one and actually came up with an even better solution than what the interviewer presented to me. The challenge was to create a horizontal “stoplight” of three squares, colored red yellow and green and do it with as little HTML as possible.

I immediately used divs and anchors, which was clear that that was not a minimal solution. The right thing to have used was an unordered list, then use :first-child and :last-child pseudo selectors to style the end pieces. The CSS solution that the interviewer came up with employed floating the li’s left to get them horizontal. That’s totally valid, but based upon my woodshedding with CSS 3, I came up with a different solution that instead employs display:table-cell to get the li’s to line up horizontally. Here’s the HTML:

<ul id="priorityList">
    <li> </li>
    <li> </li>
    <li> </li>
</ul>

And here’s the CSS:

#priorityList {
    list-style-type:none;
}

#priorityList li {
    display:table-cell;
    width:30px;
    background-color:yellow;
    cursor:pointer;
}

#priorityList li:first-child {
    background-color:red;
}

#priorityList li:last-child {
    background-color:green;
}

#priorityList li:hover {
    background-color: #EFEFEF;
}

After I started getting myself familiarized with CSS 3, returning to that interview example, I could’ve scored some pretty big points with this solution. 🙂 It’s actually significantly less CSS than what the interviewer came up with, and satisfies his basic requirements. Note that there is a non-breaking space in the li’s, but it’s not showing here in the article for some reason. I think WordPress is reading it, as opposed to obeying the “pre.” Oh well.