First steps in semantic web design

So you've taken the plunge and you want to design your first website. Great! You may be overwhelmed and bombarded by all the jargon out there from XHTML, CSS, JavaScript, XML, AJAX just to name a few. These leave many with their heads spinning! The best thing about web design is that you don't have to know everything to create your first website. These steps are incremental and with each one you can build a more and more powerful web presence.

Your First Steps

You are at a crossroads and you need to decide which path you are going to take in creating your website. Many turn to web-services like Yola.com use WYSIWYG editors such as DreamWeaver, Komposer and Frontpagewhich sends chills down my spine or others decide to learn HTML and hand-code their own websites for complete control and flexibility. I don't have anything against using 3rd party services or editors, but I really think if you are going down that road an envision success for your website get it designed professional otherwise if you that way inclined emerse yourself in developing your own websites and becoming a rockstar in the web design world!

Is learning HTML really necessary?

Contrary to what most of people just starting out believe, HTML is very easy to grasp as it is not a programming language, and doesn't have to be left to the perfectionists and control freaks. Knowing HTML can open up your website to a much larger audience!

HTML stands for (Hypertext Markup Language) and is the basic building blocks for your website. You would never have had to deal directly with it if you use Frontpage or something similar to exclusively design your website. These programs allow you to create your website on the screen by simply clicking and dragging, while it generates the code for you by itself. This would be great, except that the code it generates is more then likely bloated and incorrect, increasing the size of your pages. Automatically generated code also isn't very accessible, meaning blind people using screen readers will battle to interpret your site.

What are tables?

Back when the internet was developed it was used as a tool to send documents. These documents stood by semantics (which I will discuss later) as the different aspects of the document such as the heading, paragraphs where all described as such. It was only later on when web designers wanted to do what they did in the print world and move it onto the web that problems cropped up. There was no standard way of adding design to a web page so people started using tables as a way of positioning images that they had sliced up and merging it with the content on the page. Tables were meant only to be used to represent data in columns and rows, they were not meant to be used as structures to create layout. Various other tags such as the tag were also created to allow designers to alter the certain aspects of fonts such as size and color. So what is the problem with these methods? All of the markup used to create the look and feel of the website is embedded in the HTML where only semantic content should be.

What exactly is semantics?

The official meaning for semantics is the study of language meaning, and not it's syntax (grammar or how it is used in context). That doesn't really explain how this applies to web design. In web design you will hear semantics, and accessibility used often now days. Semantics in web design, refers to the meaning of the content and its structures, that is all.

A web page has many elements in it from links, paragraphs and heading, and all of these structures have to be labelled as such. If a heading were to be labelled as:

Example Heading

How would a screen reader for the blind, or a search engine spider crawling your website know that it is meant to be a heading? It can't as there are too many variables. The correct way to define a heading would be:

Example Heading

Simple and sweet, and no confusion, using an H1 tags in the document declares that this is the most important heading. Screen readers, and spiders can easily see that this is a heading and therefore can much more easily place it in context with the page. You would then go edit your CSS which is a separate document defining how the website should look. To make the correct heading look like the incorrect version you would place the following into your CSS documents:

H1 { font-size: 25px; color: blue; }

This will apply these setting to every H1 tag in your website.

What are the advantages of using semantic styled coding?

We've touched on one of the advantages, that being users with screen readers and search engine spiders are much more able to make sense of your website, as the content only consists of semantic markup, describing what each content structure is.

Other advantages include, allowing users using mobile devices to easily view your website, most mobile phones don't apply all of the CSS, so all of your content will be displayed in a linear fashion, very similar to the way the first web page documents were sent when the internet was first created. Viewing your website without the CSS applying the styles, will also give you an idea how search engines and screen readers view your website.

The biggest advantage comes when making changes to your website, this merely means updating one CSS file, before if you wished to change the size and color of your headings, you would have to go and edit each page of your website making it a very tedious task, as all the styles were very redundant placed in each and every web page. Using semantic markup, you would only have to edit your CSS document, and the changes would reflect throughout the entire site. This would also save on the amount of traffic used on your website, as the styles would only be downloaded once in the CSS document and not repeatedly in every web page, making it much faster and responsive, allowing you to serve far more pages at any given time.

Powered By Nikordi