Don’t be an anti-semantic

I often get the feeling that there are many people who hear the word ‘Semantics’ mentioned by Front End Designers in passing but don't really know what it means.

Rather than go straight into Web Semantics & how this relates to the Web and building semantics into HTML, I think it is important not to lose sight of what the word 'Semantics' actually means. It is not a word made up by Front End Designers but a general term used to describe the use of meaning.

A lot of people start using HTML without really understanding it. They see that they can attach a css file to some HTML and it starts to look pretty. HTML is one of those things that get misused way too much. You can get away with using a minimal variation of its features yet seemingly achieve what you want quickly. The browser doesn't care what you put in it, as long as you can apply some sort of design. Over time, this kind of mentality has taken hold in some circles.

We should be thinking about the way we build things with HTML, whether we are a client or colleague of a Front End Designer and update our site through a CMS, or we are the ones who actually build Web sites, static pages or 'templates' that get put into a CMS for non technical people to update them. The future of the Web depends on it.

General meaning

According to Wikipedia, the term semantics is summed up as the study of meaning. In general everyday life, everything needs to have meaning whether that be language, objects - pretty much anything that exists.

The reason semantics is quite an open ended topic is because a lot of what it conveys is extremely subjective. As human beings, we accept that there is a commonly understood association with an object, word or phrase. Seeing the object or hearing the word or phrase, even feeling somethings shape or texture results in an emotional response, leading us to conclude what the object or phrase is as we put all the features together in our mind.

Phrases can mean the same thing yet have an underlying tone which can convey something else entirely. The word ‘Meticulous’ has a positive connotation which suggests that something or someone has a high attention to detail and wants to produce the best result possible, another word which has the same literal meaning is ‘Pedantic’. This has an altogether different feel about it. This can affect the way a message comes across. Choosing the right word is where semantics comes in.

The point here is that we all have a commonly understood perception of these things. The principle is that without the elements of an object, the object itself would have no meaning. If any one of the elements were missing, the object itself would no longer hold together and would become something else.

The Real World

As well as a general understanding of the phrases, objects can also have different connotations. Let me use a Bank as a real world example. It is generally understood that a Bank is a big building that holds lots of Users Bank accounts where our money has a large degree of security. If we change our object to that of a Piggy Bank, we now think of it with an altogether different connotation. None of the elements have changed and it is still a bank which holds a Users money yet we view it in a completely new way.

Unlike a lot of connotations we haven’t changed it in a negative way, just a different one. It is less intimidating and more fun. In effect, we have reduced the way we perceive the size of all the elements the bank contains. A piggy bank is commonly understood to have one user, a small amount of money and a lower level of security.

Semantic HTML

This way of defining things can and should be the same for the Web. Visually, we can achieve a lot through the use of graphics but if we don’t make use of Semantics, the Web page we build will have little meaning.

An HTML web page is essentially made up of lots of little bits of meaningful data. Presentation is absolutely essential though it should complement the data it is designed to present. For example, we can place an image on a Web page with very little HTML knowledge. This image may have lots of information on it yet mean very little to the Web.

Being able to identify and define what that information is, is vital to making HTML Semantic. Let me give you an example (time for some code I'm afraid!):

This is some html, which will allow users to click on it and be sent through to a link. As a Web Designer, if I am told that this link is an important part of the Web site I am building, it is my duty to try and do something about that.

<h1>
<a href="http://www.webegg.co.uk">I know this will be very meaningful text to google but I want to see an image</a>
</h1>

This is another way to create the same thing. Using a combination of more meaningful tags (the <h1> tag has very high priority in HTML) it is possible to give more meaning to the element. Are certain corners of the Web Industry trying to tell me not to worry about things like this, because to me, that just sounds lazy.

There are many more examples of this kind of technique and I'm always trying to think of better ways to make the content of Web sites I build more meaningful. I believe in doing things this way as I think should anyone who wants to get involved in designing Web sites with HTML. After all, who else is going to?

In recent years, the use of preprocessors has become commonplace for Front End Development and many do not even write raw css anymore. As a direct result of the rise of Responsive design, the requirement for css preprocessors went from a nice to have, to virtually mandatory for some projects due to the scale of […]

Dear Valued visitor, Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I’ve had to do this to keep my level […]

Dear Valued visitor, Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I’ve had to do this to keep my level […]

Dear Valued visitor, Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I’ve had to do this to keep my level […]

Having been busying myself on the redesign of this site over the last week or so I invaded the custom post functionality of WordPress to try and make the process a little more organised and straightforward. There’ll always be an element of variable copy and paste tediom but found that it can at least be […]

I have been building fully responsive web sites for a couple of years now and it became abundantly clear early on in that time that although responsive sites and the use of Media Queries to build them is a great thing because it reduces the need for multiple sets of code and management of both […]

I’ve been building Web sites professionally for over 7 years now and in that time the Landscape of getting a site from the flat graphic state, to a state where users can interact with it have changed dramatically. Working without a script, piecing together client expectation over new technologies is an everyday balancing act where […]

When I build sites I, like a fair few other Web Designers, use a local server setup. For me it’s WAMP at the moment. In order to work on many peoples sites at once, not having to copy/paste or constantly rename things, I have to use a combination of the Windows hosts file, which is […]

I often get the feeling that there are many people who hear the word ‘Semantics’ mentioned by Front End Designers in passing but don’t really know what it means. Rather than go straight into Web Semantics & how this relates to the Web and building semantics into HTML, I think it is important not to […]

I spend an enourmous amount of time with browsers and knit picking the designs I build to fit them all. During the build process and my fleeting (and sometimes more than fleeting) visits to outdated browsers such as Internet Explorer 6 and 7, I sometimes wonder what it must be like for those poor souls […]

Lately I have been much more focused on creating useful things that I have had the motivation to actually write a Blog post on something I made a while ago. Try the Demo Download the code I should point out that this is quite advanced and some undertsanding of the finer points of HTML/CSS/jQuery are […]

Lots of high profile Web Industry Pro’s describe Front End Design/Development (what ever else you want to call it) as ‘Responsible for View Source’ and I tend to agree. ‘View source’ covers everything except things that happen on the server and occasionally, some of that as well. Most Web sites can actually be built and […]

What a difference CSS makes Left outset image. See right set image for explanation. Firstly, your eyes aren’t decieving you. For my latest post I’ve decided to show you the power of ‘Modularisation’, a technique which attempts to simplify layout, mainly for the client. I was inspired after reading articles from people like Elliot Jay […]

On 30th November 2010 it is the fourth annual Blue Beanie Day. It was founded by Jeffrey Zeldman, who was the lead author of one of my favourite books ‘Designing with Web Standards: Third Edition’ and has among many others been designing, speaking and championing the use of Web Standards since the mid-nineties. Blue Beanie […]

What is FOUT? Flash Of Unstyled Text is a phenomenon that occurs in some browsers when using the @font-face rule in css. The @font-face rule as I’m sure most professional Front End Designers already know, is one of the most hotly debated design tools that make using beautiful and more importantly accessible and selectable Typography, […]

If you’re anything like me, you like reading blogs and other online content to learn things, be inspired and have a nice experience while you’re doing it. I was recently made aware an article over at Usability post called ‘a motive for bad design’. Being someone who strives for the highest quality possible, it took […]

The Web has been around for a good few years now. Most people are aware of it, if not using it in their every day lives. It has come a long way since the early nineties when Web pages consisted of a bunch of simple tags that linked to other pages with basic information in […]

Over the last few weeks, I’ve been putting together quite a comprehensive online documentation system for the WordPress platform, more specifically for the Theme creation side of WordPress. Theming is the way Web Designers can customise a new site for their client to produce something completely bespoke with a good platform for all the mundane […]

I’m always looking for the best way to build Web sites and one thing that always seems to catch me out is the use of a unit called em. This unit is a more recent convention which Web designers overuse. There is no reason why we shouldn’t be using the px unit for font sizes. […]

View the entire menu in action If you are a Front End Developer who gets frustrated, working with back end system where you can never seem to have fine control over the menu design. With the following technique, you should now have an extra option if you can’t explain what is required to a back […]

The Web of today is changing. Whether we, as Web professionals, like it or not. There are currently about 10 browsers (taking into account versions, which often differ from each other) on the market within which Web sites need to function. As a front end designer who is conscious of the way businesses have to […]

During the design process of a recent project homepage, I wanted to use an effect that native jQuery plugins or javascript effects could not achieve in the way I wanted them to. My idea was to have as spooky a theme as I could on the site and the main feature of the homepage would […]

For a long time now, I’ve been itching to learn how to set up my own home server that I alone have complete control over. I was fed up with trying to contact my hosting company to ask them if they wouldn’t mind installing something to help me with building my websites, for them to […]

I found a bit of a glaring hole in the twitter API the other day. I have a protected Twitter account and all I wanted to do on the Webegg site was to show one Tweet (the latest one) on my site so that anyone visiting had an idea what I was talking about with […]

I’m always coming up against situations where, in the planning process, you give a small consideration for a feature of the site you build, only to actually discover that to achieve this feature will take more work than you anticipated. It is always a good idea, if you succeed in resolving these situations, to document […]

Anyone who builds fully standards compliant sites like Webegg, have come across the problem of changing the cursor on rollover or for some other reason, then tried to validate their code one to find that it fails. The right way to change cursors I wrote a bit of jQuery to get over this hurdle. This […]

Have you ever been frustrated with your Hosting company because they couldn’t or wouldn’t install the PEAR library for you. You can truly make your Web Applications completely independant of any hosting limitations by installing you own copy of PEAR. Thankfully, my kind hosting provider has installed PEAR but I relied on the following method […]

What are we trying to achieve? As soon as we realize that we need to plan a site before even touching the computer we allow ourselves to think freely and give ourselves the chance to produce a quality piece of work. In order for a Website to fulfill it’s requirement, it has to have a […]

For about six months now, I have been to-ing and fro-ing with the whole idea of using png’s in the build process. I am very strict about how I build sites and would never use a method that not ALL browsers supported. Thats where my frustration with png’s started. The reason png’s are so popular […]