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!):

<a href="http://www.webegg.co.uk">
  <img src="images/logo.png" alt="Some vaguely meaningful text that pops up and annoys people" />
</a>

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>
h1 a{
	background: url("../images/logo.png") no-repeat left bottom;
	display: block;
	height: 100px;
	margin: 15px 0 0 0;
	text-indent: -9000em;
	width: 360px;
}

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?

Webegg © 2014