Making sense of semantic HTML: an introduction for clients and new Web designers

Semantic Web Page Example Firefox 3.5 Sample page using semantic mark-up as viewed in Firefox.

NonSemantic Web Page Example Firefox 3.5 Sample page using non-semantic mark-up as viewed in Firefox. Give or take a few pixels these look pretty much the same.

Semantic Web Page Example IE 6 Sample page using semantic mark-up as viewed in Internet Explorer 6. As you can see, the banner breaks in IE 6 but everything else looks pretty much as expected. The page also breaks in IE 7 and IE 8 though the IE 8 version looks different. I've included these samples as a reminder to always check sites in multiple browsers.

NonSemantic Web Page Example IE 6 Sample page using non-semantic mark-up as viewed in Internet Explorer 6. Again it looks almost the same at the semantic version, even breaking in the same manner.

The other day, Aaron Rester posed this question on Twitter: Webbies: any advice on explaining semantic HTML to non-webbies?

I wrote back that I usually show them some source code and walk them through things like using h1 and so forth for headers. That is what I usually do. In fact I'd just done that the other day when I was showing someone the changes I would recommend for search engine optimization (SEO).

But the question made me wonder if my explanations were adequate. If someone doesn't know anything about HTML or other mark-up languages, will such an explanation make sense? Or is there a better way to explain the differences between structural and presentational mark-up to clients and new Web designers?

Why do clients and other non-webbies need to know about semantic HTML?

Typically this topic comes up most often when one is discussing issues related to search optimization and accessibility. If a client needs to enhance their site for SEO, I may be recommending changes to the code that they won't even see when looking at the page in their browser. Understandably they will want to know why they should pay me to do things to their site that they won't notice. The changes we make may not be visually apparent, but they will convey additional information to Web browsers and search engines that can aid accessibility, usability and searchability.

What is semantic HTML?

Semantics is the study of meaning. Merriam-Webster's Online Dictionary provides us with a definition that relates closely to how the term is applied to HTML "3 a : the meaning or relationship of meanings of a sign or set of signs; especially : connotative meaning." HTML uses elements that convey structural meaning to Web browsers and other user agents such as search engine crawlers.

Writing a page in semantic HTML simply means that you are applying the appropriate structural elements to the various bits of content on a page. Huh? Code elements act like labels that tell the Web browser what each section of content is. HTML gives us structural elements to indicate headers, paragraphs, lists, tables and so forth. If I want to tell the browser to start a new paragraph, I'll type <p>. If I want to start a new subhead, I'll type <h5>.

Then isn't all HTML semantic?

You would think so, but no. Web browsers can be both fussy and forgiving. I can code the same content in multiple ways that will each look very similar when viewed, but will actually convey differing amounts of information to user agents.

Instead of using an <h5> I could use <p><strong>in front of my subhead and make it look the same as it would using <h5>. Such usage would be considered presentational mark-up. It can affect how the header looks, but it is not semantically correct because it doesn't let user agents know that this is a subhead. If a Web designer applies the incorrect elements to page content, the site may look perfectly acceptable. But it is not passing on vital information that user agents may need to:

  • Help a visually impaired visitor navigate the page using screen reading software.
  • Tell Google and other search engines what topics are the most important ones on the page.
  • Show that you are citing a reference document such as a book.
  • Indicate that you are presenting computer code, etc.
Same content, different mark-up

Semantic Web Page Example Lynx Sample page using semantic mark-up as viewed in the text-based browser, Lynx. Note how the page retains a sense of order, similar to an outline. This is more apparent when you view the enlarged version of the page.

NonSemantic Web Page Example Lynx Sample page using non-semantic mark-up as viewed in the text-based browser, Lynx. When you view the enlarged version of the page you really see the difference. This version seems more like a plain text file without any obvious formatting.

To illustrate this point I've created 2 very simple Web pages, one uses semantic mark-up and one using non-semantic mark-up. Basically the non-semantic version uses <p> for just about everything. When you view the pages through a regular browser you'll see that the semantic and non-semantic versions look pretty similar. They both look normal in Firefox, Safari and Opera, and they both break in various versions of Internet Explorer. You don't see the difference visually until you look at the pages in the text browser, Lynx.

When viewing the semantic page on Lynx, we can see that there is order to the page; it looks a bit like an outline. The menu looks like a menu and the headers standout to provide an introduction to the other text.

HTML elements in action, offering added information to user agents

Text readers for the visually impaired and search engine spiders are getting even more information than we can see in the Lynx semantic html example. They know that each menu link should be distinguished from the next. The use of an unordered list for the menu tells user agents to separate these links in a way that use of <p> does not, and allows users of screen readers to jump through or skip these elements to proceed to the main text. In the non-semantic version this is not clear, a text reader may speak all of those links together, making it more difficult for the user to navigate.

These user agents can also tell that the first header is more important than the second because it has been coded as an <h3> while the second header is an <h4>. Headers are ranked in order of importance from 1-6. Here we're using an <h1> for the site name, the most important header on the page. Search engine crawlers will see words in an <h1> as being more descriptive of the page as a whole. This is useful for search engine optimization, because we can include our keywords and phrases in our various headers to let the search engines know that core topics we are covering on the page. Thus on this page you'll notice that I've used the phrase "semantic HTML" in both the text and subheads (which in this case are <h5>'s.) That said I've not used it in every subhead because having these headers make sense to you, the reader, is still more important than SEO. People come first, then robots.

In this example I've focused on just a few a few of the many HTML elements that are important to semantic mark-up, but hopefully these will give you a clearer sense of how such usage can help SEO and accessibility. Other elements such as address, cite and blockquote can add additional meaning to a page's code. You can learn more about other elements and related issues in the reference links below.

Semantic mark-up, validation and content

It's always a good practice to validate your code to check for errors and potential problems, but site validation doesn't guarantee that you've used the best mark-up for the site. While the validator can make sure you've used allowed elements, it has no way of knowing if you've them in the most appropriate manner. Both the semantic and non-semantic page samples used in this post were produced using valid W3C standards compliant XHTML and CSS. One is clearly better formed than the other, but both also break in Internet Explorer.

Thus it's also important to check sites in multiple browsers and to simply think carefully about how visitors will read the site. If my samples were for real sites, I'd fix the IE problem, but I used it here to remind us that using valid semantic code is just the beginning. There will always be additional details we must consider.

It's also worth noting that, when it comes to SEO, a semantically well-formed site is not a substitute for good content. Search engines such as Google are designed to help users, like you and me, find the most relevant pages for the information we seek. With that goal in mind they have to accommodate a wide variety of coding differences. If your competitor has great content and plenty of good inbound links, while yours does not, then his/her site will still win out, even if the code is atrocious. But if you can produce great content and present it in the appropriate format you will be off to a good start.

Semantic HTML Resources
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

33 Comments »
  1. Twitter Comment... Excellent explanation of markup's impact on SEO, accessibility RT @hacool Making sense of semantic HTML [link to post] - Posted using Chat Catcher ...

    Trackback by wvpmc (Wendy Van Parys) — August 11, 2009 @3:29 pm

  2. Twitter Comment... @hacool good stuff! - Posted using Chat Catcher ...

    Trackback by aaronrester (Aaron Rester) — August 11, 2009 @4:58 pm

  3. Twitter Comment... great post on markup's impact on SEO, accessibility by @hacool Making sense of semantic HTML [link to post] #smbiz - Posted using Chat Catcher ...

    Trackback by wvpmc (Wendy Van Parys) — August 11, 2009 @8:30 pm

  4. [...] This is where the actual content of your web page goes. In the past, content, layout, and visual styling were done with HTML. For example, if you wanted to specify a certain font for items in a list, you wrapped the list item with a <font…> tag. Those days are gone. Now we use CSS for styling and layout, and the HTML is reserved for the semantic content. [...]

    Pingback by HTML Resources for Blog Templates — August 11, 2009 @8:48 pm

  5. Twitter Comment... If your clients struggle to get what semantic HTML is then this is a good little introduction [link to post] - Posted using Chat Catcher ...

    Trackback by iheni (iheni) — August 12, 2009 @3:51 am

  6. Twitter Comment... RT @iheni: If your clients struggle to get what semantic HTML is then this is a good little introduction [link to post] - Posted using Chat Catcher ...

    Trackback by hugopeixoto (Hugo Peixoto) — August 12, 2009 @3:56 am

  7. Twitter Comment... If your clients struggle to get what semantic #HTML is then this is a good little introduction [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by meeratank (Meera Tank) — August 12, 2009 @4:00 am

  8. Twitter Comment... RT @meeratank: If your clients struggle to get what semantic #HTML is then this is a good little introduction [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by MarlonBoehland (Marlon Böhland) — August 12, 2009 @4:03 am

  9. Twitter Comment... If your clients struggle to get what semantic HTML is then this is a good little introduction [link to post] (via @iheni) - Posted using Chat Catcher ...

    Trackback by alex_gibson (Alex Gibson) — August 12, 2009 @5:32 am

  10. Twitter Comment... If you create web content & don't know about Semantic HTML, please read. [link to post] via @stcaccess, @iheni - Posted using Chat Catcher ...

    Trackback by smiffytech (Matthew Smith) — August 12, 2009 @7:17 am

  11. Twitter Comment... If you create web content & don't know about Semantic HTML, please read. [link to post] via @stcaccess, @iheni (via @smiffytech) - Posted using Chat Catcher ...

    Trackback by raspberryfrog (Nathalie Allard) — August 12, 2009 @7:25 am

  12. Twitter Comment... This really is a good little intro to semantic HTML, and it makes sense! [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by stcaccess (STC AccessAbilitySIG) — August 12, 2009 @7:32 am

  13. Twitter Comment... Clear intro to semantic HTML - important for SEO & accessibility [link to post] RT @pegmulligan via @stcaccess and @iheni - Posted using Chat Catcher ...

    Trackback by dianarailton (Diana Railton) — August 12, 2009 @7:33 am

  14. Twitter Comment... Making sense of semantic HTML - [link to post] - Posted using Chat Catcher ...

    Trackback by RivenDesign (Riven Design) — August 12, 2009 @8:20 am

  15. Twitter Comment... RT @RivenDesign: Making sense of semantic HTML - [link to post] - Posted using Chat Catcher ...

    Trackback by Tschet (Tschet) — August 12, 2009 @8:21 am

  16. Twitter Comment... RT @stcaccess: This really is a good little intro to semantic HTML, and it makes sense! [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by thomlohman (thomas lohman) — August 12, 2009 @8:47 am

  17. Thanks for all the Twitter reTweets everyone, I'm glad you've found it helpful! And special thanks to @aaronrester for inspiring the topic.

    Comment by Heidi Cool — August 12, 2009 @9:16 am

  18. Twitter Comment... RT @raspberryfrog: If you create web content & don't know about Semantic HTML, please read. [link to post] via @stcaccess, @iheni (vi ... - Posted using Chat Catcher ...

    Trackback by juliov27612 (Julio Vazquez) — August 12, 2009 @9:32 am

  19. Twitter Comment... RT @dianarailton: Clear intro to semantic HTML - important for SEO & accessibility [link to post] RT @pegmulligan via @stcaccess and ... - Posted using Chat Catcher ...

    Trackback by juliov27612 (Julio Vazquez) — August 12, 2009 @9:34 am

  20. Twitter Comment... Making sense of semantic HTML: an introduction for clients and new Web designers [link to post] - Posted using Chat Catcher ...

    Trackback by kolapse (kolapse inc.) — August 12, 2009 @10:09 am

  21. Twitter Comment... Making sense of semantic HTML: an introduction for clients and new Web designers [link to post] great explanation by @hacool - Posted using Chat Catcher ...

    Trackback by kylejames (Kyle James) — August 12, 2009 @10:31 am

  22. Twitter Comment... RT @raspberryfrog: If you create web content & don't know about Semantic HTML, Please read. [link to post] (via @smiffytech) - Posted using Chat Catcher ...

    Trackback by MarksHEW (Mark Shipley) — August 12, 2009 @12:34 pm

  23. Twitter Comment... RT @stcaccessThis really is a good little intro to semantic HTML, and it makes sense! [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by stcwdc (STC Washington, DC) — August 12, 2009 @12:35 pm

  24. Twitter Comment... @hacool it's an important subject that people don't really understand and you have a great explanation! - Posted using Chat Catcher ...

    Trackback by kylejames (Kyle James) — August 12, 2009 @1:45 pm

  25. [...] Making sense of semantic html (tags: design webstandards html markup accessibility) Twitter Updates [...]

    Pingback by links for 2009-08-12 « innovations in higher education — August 12, 2009 @11:12 pm

  26. Twitter Comment... RT @stcaccess This really is a good little intro to semantic HTML, and it makes sense! [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by mwrk (MasterWorkConsulting) — August 13, 2009 @1:48 pm

  27. Twitter Comment... RT @mwrk: RT @stcaccess This really is a good little intro to semantic HTML, and it makes sense! [link to post] via @iheni - Posted using Chat Catcher ...

    Trackback by juliov27612 (Julio Vazquez) — August 13, 2009 @3:33 pm

  28. Twitter Comment... rt @iheni If your clients struggle to get what semantic HTML is then this is a good little introduction [link to post] Spot on :) - Posted using Chat Catcher ...

    Trackback by mishu70 (Hamish Mackenzie) — August 13, 2009 @3:34 pm

  29. Must read! So glad you linked me here. I was unaware of the SEO value of proper markup. I've frequently used bullet points and also used bold around sub headers but rarely think of using h5 instead. Never realized it made a difference to Google, etal. Will be sharing this for sure. Todd

    Comment by Todd Jordan — August 16, 2009 @10:35 pm

  30. Todd,
    I'm glad you found it helpful. I think I first started paying attention to semantic mark-up mostly for usability, but it helps on a variety of levels. Thanks for sharing!

    Comment by Heidi Cool — August 16, 2009 @11:41 pm

  31. Excellent post, semantic is very important for optimizing, thanks

    Comment by Meissen — December 1, 2009 @4:32 am

  32. Heidi, thanks for reminding me about this post. I'm going to refer people to it when they get antsy about all my tags.

    Comment by Mark W Schumann — October 27, 2010 @11:11 am

  33. You're welcome Mark! Many clients don't know the impact proper coding can have, simply because they can't see it. But it can make a big difference. (Alas many developers don't know either. I shudder when I have to rework old table formatted code full of deprecated things like font="whatever," or worse yet blink and marquee.)

    Comment by Heidi Cool — November 1, 2010 @11:11 am

Leave a comment

RSS feed for comments on this post. | TrackBack URL