There was a time when web designers and developers would begin coding by creating their table layout structure using the <table> tag or by ’slicing’ their Photoshop design into slices ready to be imported into a Dreamweaver environment. This approach to coding for the web – though old fashioned – can still be found across web in websites of all caliber. The alternative is an approach which I personally choose to subscribe to. This is that of semantic markup.
What is Semantic Markup
Semantic markup is the use of the HTML markup language to describe the meaning of content. The markup tags are used to describe the content nested within it; very much in a similar way to XML.
Semantic markup and CSS
The semantic markup approach relies on a close relationship with CSS (Cascading Style Sheets). Without CSS, semantic markup web pages would be dull white pages with black Times New Roman text. The use of CSS allows developers to take the design element of a web page and externalize it. This means that the style of a web page is defined externally in a separate CSS file.
Advantages of semantic markup
Externalizing the style of a webpage embraces the basic rule of semantic markup that the contents of the HTML file should be the descriptive markup tags used to define its content. The two main advantages of this approach to web coding are a) accessibility and b) search engine optimization.
Accessibility
For many reasons, semantic markup improves a website’s accessibility.
Firstly, the use of external CSS and table-less layout makes your files much lighter and as we all know light-weight files means the download speed of your website for your users is much reduced.
Secondly, embracing CSS makes your pages much more efficient by the ability to re-use common style elements without the need to redefine them.
Most importantly, semantic markup sees a back to basics kind of approach which uses the W3C agreed standards to ensure the most consistent results when it comes to cross-browser compatibility. All the current versions of web browsers subscribe to this methodology.
Search Engine Optimization
Light weight, table-less layout web pages are much easier to index by search engine spiders/robots. Not only are these pages easier to read from the point of view of size, but as the pages are more efficient – containing only descriptive markup tags – the search engine spiders/robots can ‘understand’ your content quickly and easily without ambiguity.
Example: style versus substance
A great example of semantic markup is the use of the <strong> and <em> tags, instead of the <b> and <i> tags.
On first reflection <strong> and <b> are the same thing. Right? Wrong! The <strong> tag defines its content as having a strong emphasis, whereas the <b> tag tells the browser to style its content with a bold font weight. They may produce the same look, but the two things are not the same. From a search engine’s spider/robot’s point of view, the <strong> tells the spider/robot that its content are keywords to the definition of that particular webpages’ theme and should be given some significance.
The same goes for the <em> tag which states that its contents should be given an emphasis whereas the <i> tag merely states that its contents should be italicized.
How can I convert my website to a table-less layout
Contact me for a free quote today to recode your website using the semantic markup approach.