Building a More Efficient Web with Semantic Coding
The actual practice of separating content from presentation is where extensible HTML (XHTML) combined with cascading style sheets (CSS) come in. XHTML is a relative of extensible markup language (XML), and the successor to HTML. It has more types of tags making it easier to semantically markup a wide variety of different content.4 It is also extensible in that it allows for the customization of tags to suit the developer’s needs when no existing tag is appropriate. CSS, on the other hand, is purely a presentation language and the code specifies how text and other elements on a web page should appear. Typically, the XHTML file links to the CSS file. When a visitor to a site calls a web page using his browser, the site’s server retrieves the separate XHTML and CSS files and sends them to the visitor’s computer. The web browser then combines the two files and renders the page.
By using these two separate technologies, the content can be stored in different XHTML files for each page of a site but refer to the same CSS file. When the visitor clicks on a link to a different page on the same web site, only that new page’s XHTML file has to be downloaded. The CSS file has already been downloaded and stored temporarily on the visitor’s computer. The result is pages that download faster in web browsers since less code needs to be processed.
Financial Benefits of the Semantic Web
Semantically marking up content can significantly affect your bottom line if online exposure is important to your business. As previously described, the separation of XHTML content from CSS styling leads to lower bandwidth consumption. Even though it is often only a few bytes of code per page, this can add up quickly if you’re a site like Yahoo getting 400 hits a second.5 According to former Associate Art Director, Mike Davidson, when ESPN.com changed over to semantic markup and CSS for styling, they were able to save 2TB of bandwidth per day. By semantically marking up and defining pieces of content, they are able to load pages full of rich media for visitors in full web browsers while sending only the top stories in text to visitors using mobile devices.6 The power of semantic coding is in its ability to customize and prioritize content. There is no point in sending a huge package to someone only to have her choose a few items from the box and throw away the rest because there is no space in her home. It would be a waste of shipping costs and is equivalent to wasting bandwidth on the Internet.
Search engine optimization (SEO) is another reason for semantic coding. Investing in the development of a web site is pointless if nobody visits it. Semantic markup is critical for letting people find your site on search engines since the programs that crawl the web indexing sites won’t be able to understand your site if it isn’t properly coded. “For example, an article title enclosed in one of the headings (h1 and its hierarchy) would get higher importance and hence visibility.” 7 So if your pages aren’t properly coded with appropriate tags, search engines may not be able to determine the value of your content, resulting in a low ranking.
A Semantic Web Allows for a Dynamic Web
Perhaps the most interesting thing about semantic coding is that it allows web developers to collaborate with each other across organizations. “The semantic web is an implementation of a standard way to describe content so that it’s machine-readable and interchangeable between different software, applications, platforms, and websites,” says Marvin Tam, a Senior Web Developer at Yahoo. He describes how the Yahoo photo-sharing site, Flickr, generates XML files so that photos can be pulled from a Flickr album and dynamically placed on your own web site. Flickeur, an experimental web page by Mario Klingemann8 is an example of some of the possibilities that this opens up. The XML file contains information about photos such as title and caption. The image files themselves can also have embedded information such as date and time of creation. By pulling this semantically coded information from the files, Flickeur arranges this information into an impromptu Flash movie that tells a story using photos from public albums on Flickr.
By combining different web technologies, web sites can become more than static containers for content. They can be dynamic and scalable. When a news story breaks, newswire services can send out semantically marked up text so that all the syndication subscribers can automatically post the story onto their front pages properly formatted. Without semantic coding, each news site would have to have a staff member go through the story and format it by hand before posting it. And that’s just for one form of the many different media channels through which news is delivered.
Conclusion
Semantic coding is inevitably the future of information technology. It requires a larger initial investment because information must first be tagged properly and then separately styled afterwards. However, it allows for sites that are accessible, efficient, and dynamic. If your site happens to go viral one day, you’ll also be glad that it’s more scalable too.
- “XHTML 2.0 W3C Working Draft.” World Wide Web Consortium. 26 July 2006. Eds. Jonny Axelsson et al. 30 Jan 2007. <http://www.w3.org/TR/2006/WD-xhtml2-20060726/>.
- Tam, Marvin. Online interview. 3 Feb 2007.
- Meyer, Eric A. “Interview: The ESPN.com Redesign.” Mike Industries. 10 June 2003. 30 Jan 2007. <http://www.mikeindustries.com/blog/archive/2003/06/espn-interview>.
- Nadgouda, Abhijit. “The Semantic Code.” fadtastic. 19 Oct. 2006. Ed. Andrew Faulkner. 27 Jan 2007. <http://fadtastic.net/2006/10/19/the-semantic-code/>.
- Klingemann, Mario. “Flickeur – Every Picture Tells a Story.” Quasimondo: Incubator. v1.0. 6 Jan 2007. < http://incubator.quasimondo.com/flash/flickeur.php>.
Semantic Coding by Daniel Yang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.