Home / Internet / Benefits of using Semantic Html in Web Design

Benefits of using Semantic Html in Web Design

The Benefits of Semantic HTML

Sometimes small changes can lead to larger changes in the future. Semantic HTML is an example of this maxim. It not only has immediate benefits to those who use it, but it also will effect the nature of the Web in the future. This article will briefly explain what semantic HTML is and then it will turn towards what semantic HTML can do both now and in the future.

Plain-Old-Semantic HTML, or POSH for short, uses basic HTML formats and consistency to achieve a website that emphasizes content over style. This may ostensibly appear strange at first but when you consider that HTML consists of tags and content (Hunt, 2008), it begins to make far more sense. For example, there will be one main title using the

tag and then one or more subtitles that range from

down to

, although it is very rare to go below the

tagline. All of these tags will contain one word that is unique to the web page itself (North). The immediate effect of this method is to create a page structure of a title, some headings, and content (de Vooke, 2007). That alone creates a usable method for writing a web page that is both easy to read and pleasantly organized. However there are more benefits than standardization alone. Presentational tags, such as (italics), and , are now discouraged in favor of other tags, such as (emphasis) and (Dingley, 2011, Hunt, 2008). The former emphasize presentation, which HTML does not include in its basic definition.

The immediate benefits of Semantic HTML include the following (Hunt, 2008): 1) Semantic HTML is cleaner when the designer only uses tags to emphasize content; 2) The application of different style that are different for for different media, even speech tools 3) Optimization of search engines through consistency of style; 4) The separation of markup from style, thus enabling all user agents to quickly weigh the value of your page.

Finally, the use of semantic HTML machines to understand the content in specific parts of your web page, If you write

, for example, to your style sheet, the machine, such as browsers and web search engines will be able to process it using their series of binary numbers for processing. (Lewis, 2010). This is a simple definition of microformatting, a corollary benefit of semantic HTML.

POSH is a powerful tool that has many benefits both large and small. If you remember to simply use HTML tags and to emphasize content, you will be creating a standardization in your web pages that will enable machines, such as search engines, to find your website faster and easier.


North, D.(no date of posting) plain-old-semantic-html.mp4. Youtube.com Retrieved August 31, 2011 from the World Wide Web: http://www.youtube.com/watch?v=pQAIa9b3-_Y.

de Vooke, Joost (2007, October 25) Semantic HTML and Search Engine Optimization. Dev.Opera: Follow the Standards, Break the Rules. Retrieved August 30, 2011 from the World Wide Web:http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/

Lewis, Emily (2010) Voices that Matter Conference. Youtube.com Retrieved August 31, 2011 from the World Wide Web:http://www.youtube.com/watch?v=Fp_fv7umtHw&feature=related.

O’Reilly, Tim (2006) Bill Gates: “We need microformats”. Youtube.com Retrieved August 31, 2011 from the World Wide Web: http://www.youtube.com/watch?v=Z9X-vHJ_Z-I.

Dingley, Andy (2011, August 10) Semantic HTML. Wikipedia, the Free Encyclopedia. Retrieved on 2011, August 29 from the World Wide Web: http://en.wikipedia.org/wiki/Semantic_HTML.

Hunt, Ben (2008, January 10) Introduction to Semantic HTML. Web Design from scratch. Retrieved August 31, 2011 from the World Wide Web:


About User Lin