HTML Only – The Significance of Proper Markup in Web Design

This article is about the importance of proper markup in a website. A great way to make sure your site works properly is to write your HTML first before you jump into the CSS and JS. This will allow you to focus on the content and the functions and test them before you start making everything pretty.

On our trip back from Yellowstone National Park recently, we wanted to stop by a Redbox and grab a few DVD’s for our daughter to watch on the way. Not familiar with the surroundings, I pulled out my semi-smart Blackberry phone and hit up Redbox.com to find some locations and maybe reserve a few items. After the phone locked up while “loading style sheets” (I’ll blame T-Mobile’s coverage for this one) I turned off CSS and reloaded. With Javascript disabled I received the bare bones HTML only Redbox site and was greeted with big text that read “Sorry, Your Shopping Cart is Full“. I’m not sure where that came from since I hadn’t signed into my account yet, but I should have realized that this was the first of many problems I would have.

The bare bones HTML site was pretty easy to read and I was able to located the “Find A Redbox” button but was unable to click on it. My cursor highlighted the button, but no clicky for me. After reloading with a few times with Javascript and without I was finally able to click the button and fill out the form, but the Javascript buttons wouldn’t work yet again. Eventually (45 minutes later) I was able to almost have success. But luckily, my wife just Google texted Redbox and with seconds received a few texts with Redbox locations. Now, I’m not writing this to talk about how great Google text is, I’m writing this to discuss how websites like Redbox.com can make their web experiences better even when the operating system, service and all other variables are not.

The fix is really pretty simple, it’s really just a matter of making sure that our markup is readable, workable, usable. These are really just basic things that we all know, but it seems like there is still a lot of sites being created with bad habits, so it’s a matter of changing a few old habits.

Try implementing some of these methods on your next project:

  • think about content before you code
  • make sure it works before you style
  • think more semantically

Content, Content, Content

Content is the reason why anybody actually visits a website. Some of us visit or find sites just for pure design reasons, but the majority of surfers, shoppers and readers only view websites for the content. People are generally looking for something to learn, buy or inspire them so the content is still king over pretty design. Your HTML should always present all the important content you want your users to view – avoid injecting important content through Javascript or CSS. Along with headers and paragraphs, also make sure you include forms, buttons, navigation and images.

Images can be tricky, especially when you are thinking mobile first because you don’t want to load a bunch of images that are not necessary and slow down you mobile load time. Some designers prefer to never use the tag and load images via CSS through the background property, but this method may hurt the bare bones user experience because images can be just as valuable as content. My little rule of thumb is to separate images into two categories: content and style. ‘Style’ images are used for navigation buttons, backgrounds, list icons, etc. ‘Content’ images are images that relate to the actual content like author pics, related images within articles, or basically any image that is inline with content.

Refrain from using any inline styling. Now depending on the OS, CSS inline styles may or may not be displayed when CSS is turned off so it becomes unpredictable and we all know we should never use inline CSS (if at all possible). But more critical, use discretion on HTML styles like height and width. If you are presenting some table data or something that needs to be laid out then by all means lay it out – that makes your HTML easier to read and follow. Basically, don’t use CSS inline styles and avoid block HTML styling where possible.

Everything Needs to Work

Okay, now this really is a no-brainer, but there are probably thousands of sites out there that don’t work properly when stripped down to HTML only. If you have a search form or any kind of form, make sure the user can fill it out and submit it without any a Javascript (JS) or CSS crutch. At the very least, if you have forms or functions that require JS, add a friendly, nice reminder that such elements need JS turned on in order to work – this will at least let the user know so that they can make the decision instead of fumbling around for an hour trying to figure it out.

A great way to make sure your site works properly is to write your HTML first before you jump into the CSS and JS. This will allow you to focus on the content and the functions and test them before you start making everything pretty. I used to write my HTML and CSS together, where I would take a portion of the psd file (like the header) and code it up completely with images and layout, then move to the next portion. But now, I stare at the psd file, code up the layout in my head (or in a sketch book), and then write my HTML from start to finish.

Think More Semantically

The big buzz word in web design (beside HTML5, CSS3 or responsive web design) is “semantic markup“. But what really is it? Semantic markup is just basically the meaning of the content and using the tags that reflect that meaning. A good example is the difference between the strong/em tags versus the bold/italic tags. Bold and italic are really just a text style but they don’t really show any meaning to the text – strong and em attach meaning to the content as well as assign style.

Now, thanks to HTML5, we have a variety of tags we can use to make out site more semantic like ‘header’, ‘footer’, ‘aside’ and ‘article’,  just to name a few. Not everything is implemented in HTML5 but there is still a lot of new tags that you can use to markup your site in a more semantic way. Even if you decide not to make the jump in quite yet or you want to use new HTML5 tags that aren’t fully adopted yet, just assign your divs those tag names and get in the habit. Assign your header div the id of “header” or assigning your post divs, change their class name to “article”. The point is this: start thinking about semantics and start thinking about what HTML5 can do, even just thinking about your code more semantically now is better than not.

So Easy a Caveman Can Do It

HTML is the most primitive web language and is the foundation of pretty much every web site – it’s so easy even a caveman can do it… right. This doesn’t mean that it’s the easiest thing to use in it’s bare form or even easy to design with (hence CSS). Not everybody knows how to start a fire with just a few twigs and rock, so not everybody will know how to work an HTML only view of a website – that’s why design is so important – but we can design our HTML code better to make the experience a little bit easier to read, work and use.

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 15

Comments are closed.
  1. I think the major problem isn’t with new professionals taking this approach, it’s finding a way for established companies to adopt a cleaner, more semantic workflow in their creative departments.

    For example, the in house CMS we use will not let you input HTML5 properties as an HTML element in the editor, you have to create a RAW element, which makes it harder for anyone using our CMS to understand. Also, every section in the backend is wrapped in p tags, and spans are used to style forms inline.

    I work around these issues, but we’ll always deliver sub-standard products until we change how our core system operates.

    Great article, I’m glad people are talking about this.

  2. ODT, Ya, I think that biggest problem is with older CMS’ and old coding practices from when IT departments ran companies websites. As the old saying goes, you can’t teach an old dog new tricks, but the web changes fast and I think mobile platforms are going to force developers to change their old ways.

  3. Hi Patrick, this is one of the most important part of web development.

    Great article.

  4. People (and companies, firms, etc.) really desperately need to get over the paradigm of designing a website by having a graphic artist mock up the whole website and then having the developer “cut it up.” That tends to lead to bad HTML. Then add crappy CMS’s to the mix and things get even worse.

  5. It seems hypocritical to write an article like this, when it doesn’t work at all when the CSS is disabled.

    Although I agree proper markup is critical. It really depends on the audience, time, and budget.

    Sometimes things just need to work.

  6. Thanks for the article, but I would like to see an easy well descripted guide on semantic html5 tags. They are still not really clear about semantic usage.

  7. Great article Pat! It’ll definitely be a challenge to get existing companies and clients to go for a cleaner and newly structured website since the design look of the site will be the same. And there may not even be a problem with their website with the javascript and css disabled.

    Good practice though!

  8. Monza – I’ll have to work on that. I’ve wanted a good HTML5 semantic reference for a while now too, the best resource I’ve found so far is HTML5doctor.com, but it would be nice to have a singular reference.

  9. @Gavin – This site works fine with CSS disabled. Just tried it. What are you referring to?