There has been some interesting changes in web design over the years. As the Internet continues to grow and evolve we see that web designers must keep up with this interesting phenomena in the growth of the World Wide Web. One of the areas where changes are quite apparent is with the everyday language of the Internet, HTML.

HTML is basically the standard markup language that is used to write the millions of web pages that we see on the Internet. This language is understood by the many standard web browsers such as Explorer, Firefox, and so forth. It is also understood by other types of user agents including search engine spiders, mobile phones, aural browsers, and others.

There are 2 types of properties with HTML. These 2 properties include Tags and Text Content. There are various types of tags that will have content of their own such as metadata, flash movies, or images. However, the majority of HTML tags will be used to apply structure to content. Semantically correct HTML, or your basic semantic HTML, is a type of HTML that uses tags so as to structure content. These tags are chosen and applied appropriately to the various meanings of the content.

For example, let’s say that you want your HTML to be semantically correct. A paragraph tag pair, <p> </p>, would only be utilized so as to indicate a paragraph. This type of tag is a structural concept and it never should be utilized to indicate space on a web page. A web designer would never use consecutive <p> tags to create space, whether it was a top London web design company or a Miami based web agency, a good design team for your website will know.

Likewise, the HTML italic tags, <i><</i>, and the HTML bold tags, <b></b> should also never be used for the reason that they are to do with formatting and have nothing to do with the structure or meaning of the content. The replacements <em></em> and <strong></strong>, meaning emphasis and strong, would rather be used as a default that would turn the text italic and bold while at the same time adding important meaning to the structure of the content. As a side note, these tags may not do this in all browsers.

Reference Point: Learn more about Meta Tags

The job of the Cascading Style Sheets (CSS) is to apply presentation and HTML tags should never be used for this purpose. There is a lot of additional information on how to learn about the union of JavaScript, CSS, and HTML and how they should fit together on a web page. A perfect production practice will remove all functions of JavaScript. It will also remove from the markup the event handlers as well.

Reference Point: Learn more about CSS

Semantically correct HTML provides a wide range of benefits such as ease of use, accessibility, repurposing, and search engine optimisation. A web design company needs to realise that semantic HTML is clean HTML. It will be a lot easier to read and edit. The edit markup will be easier because it will not be littered with extra in-line styling and tags.

A clean markup will also save money and time for anyone who has to interact with it. For example, a web developer who has a responsibility of implementing a page template for a content management system or other types of web applications will benefit from clean markup. An additional benefit will be that your HTML files will load quicker because they are so much smaller.

You may at times need to interact with HTML through other media forms besides your web browser. It doesn’t take the best web design company to understand the interaction of web pages within a browser window but they may not understand that this interaction can also happen outside the browser window. A web page is often accessed by machines or humans in various ways and therefore there will need to be different types of interactions.

As you separate the style or visual aspects of a web page from the true meaning of the document you will find yourself with a document that continually means the same thing. That way however that it is consumed or presented may vary. A common technique that web designers utilize to choose different style-sheets for different types of media.

You may for example choose a certain style sheet for any document that is on printed paper. On the other hand, you may choose a different style-sheet for a web page that is viewed on a screen. Additionally, you may choose yet another style-sheet if the web page is being accessed by an aural text to speech browser.

The reason for this is that a reader using text to speech will understand the <strong> or <em> tags but it will treat a text output with those type of tags quite differently to the usual way that a visual browser responds. The TTS reader will adjust volume or tone as opposed to textile or contrast. It will convey the meaning the same way but it will be through a different medium.

Another benefit for choosing semantically correct HTML is search engine optimization. Search engine crawlers and spiders, such as Googlebot, will represent a different genus of user agents. They will try to attempt to understand the meaning within as a consumer web page content. As a crawler spider finds a web page it will store the assessment of the web page and what the page is all about. It stores this information on an indexed database that is critical for matching a person’s search engine queries.

You may wonder how a search engine is able to match search terms to various known pages so as to create a prioritized list? Each search engine will do it a little bit differently but the majority use plain old common sense. Think about if you were a search engine and how you would do it? After working through a variety of problems that all search engines face it would become quite clear.

The following example will help to clarify the above questions. Begin by having two web pages that have exactly the same quantity of 10 KB. One of the web pages will have an extra 5 KB of HTML markup. This markup will neatly annotate the semantic meaning that is in the content. The second web page will have 30 KB of extra markup that includes in-line styles and a lot of nested decorative imagery and <div> tags.

The more graphically intense web page may perhaps look better to human eyes. However, if each of the two pages contain a keyword, “Bottleneck”, 5 times, which page would be more relevant for anyone who was searching for that keyword, “Bottleneck”. Try to visualize and judge this problem as if you were the search engine.

The simple answer is the first more lightweight web page. The reasons why this is true is because of a few important key points. First, the keyword (Bottleneck) density of the first lightweight page is greater. It will feature the keyword 5 instances in the 15 KB of markup. The second web page will feature the keyword 5 instances in 40 KB of markup.

Secondly, all instances of the keyword are more likely to be higher up towards the beginning of the document in the 15 KB web page than in the 40 KB web page. If all things are equal then the earlier that you discover a search keyword, that is within a document, the more likely the chance that the document is entirely about that keyword or at least the more likely the chance that that keyword is more prominent in a particular document’s content.

The final advantage for choosing a semantically correct HTML is repurposing. When the content with meaning, or markup, has a separation from the style sheet then it is obvious that the content will be easily understood by all user agents. This understanding will be for both user agents that you do not know about as well as user agents that you do know about.

During the last few years there has been a greater mashing and mixing of content. This mashing and mixing has provided a emergence of interesting and valuable features for many websites and the applications that they use. There are times when this can occur without prior knowledge of the original website designer. However, this new freedom for content to move in and around the web by means of various media is actually a benefit to the original creator.

In these type of situations the content that is taken from the web page will be formatted differently on an entirely new premixed web page. This makes it even more important to eliminate any style content from the actual markup itself. It should be noted that an in-line style that has been applied directly within a HTML tag will override all other styles that are implemented through various separate style-sheets.

This makes it easier to get hold of and to use any content from a source and reapply it to all different forms of media. It can be done when the content contains semantic markup which will assist a computer program/algorithm to understand the true meaning and structure of the content. This can also be done as long as the content does not contain hard coded style information.

Thanks for reading. Please feel free to check out our other content.

Authors
Owl 2 in Action
Errata