Semantic code: What? Why? How?

Web designers like to throw around a lot of jargon. With that in mind, I want to focus on the more popular techno babble and try to dispel some of the mystery. First up: semantic code.

What is semantic code?

Even if you are not a web designer, you are probably aware that your site has been written in HTML. HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing. Semantic code returns to this original concept and encourages web designers to write code that describes the content rather than how that content should look. For example, the title of a page could be coded like this:

<font size="6"><b>This is the page title</b></font>

This would make the title large and bold giving it the appearance of a page title, but there is nothing that describes it as a title in the code. This means a computer is unable to identify this as being the page title.

To write the same title semantically so that a computer understands that this is a title, you would use the following code:

<h1>This is a heading</h1>

The appearance of your heading can then be defined in a separate file called a "cascading style sheet" without interfering with your descriptive (semantic) HTML code.

Why is semantic code important?

I have already hinted at one reason why semantic code is important when I said that without explaining what a piece of content is, a computer has no way of identifying it. The ability for a computer to be able to understand your content is important for a number of reasons:

  • Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless they are clearly explained. In other words semantic code aids accessibility
  • Search engines need to understand what your content is about in order to rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the "search engine spiders" to understand.

However, semantic code has other benefits too:

  • As you can see from the example above, semantic code is shorter and so downloads faster.
  • Semantic code makes site updates easier because you can apply design style to headings across an entire site instead of on a per page basis.
  • Semantic code is easier for people to understand too so if a new web designer picks up the code they can learn it much faster.
  • Because semantic code does not contain design elements it is possible to change the look and feel of your site without recoding all of the HTML.
  • Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the cascading style sheet defines what that content looks like.

How to ensure a site uses semantic code?

There is no tool that can check for semantic code. It is a matter of looking at the code and seeing if it refers to colours, fonts or layout instead of describing what the content is. If looking at code all sounds a bit too scary then a good place to start is by asking your web designer if he codes semantically. If he looks at you blankly or starts waffling, you can be sure he does not. At that point you need to decide if you wish to pressure him into getting up to speed or if you want to find yourself a new designer!

  • http://webaxe.blogspot.com Dennis

    Excellent article and reasons to use semantic code, Paul. Also note that semantic code is the underlying theme of XHTML, which if used correctly, future-proofs your site, and makes it more accessible to other devices.

  • http://overallpack.com Nemanja

    Yes, this is very simple explanation , which even clients can understand.
    Great article !

  • http://www.csd.uoc.gr/~gconst konou

    I have a question that has been in my head for a couple of weeks. The question is related to XHTML and semantics of course. Why XHTML 1.0 Reference contains tags like <b> and <i> while <u> is deprecated? From what i understand <b> and <i> should be deprecated too since they define the look and they do not have semantic content (?) . Can you please, explain to me what am I missing here?

  • http://www.aalaap.com Aalaap

    @konou I’ve been wondering about similar things myself. It’s true that and are depracated in favor of and , but I’ve been wondering if it makes any sense to even include those, since they are also presentational. Am I wrong? I would think that this…
    I am not that good at this!
    could rather be..
    I am not that good at this!
    with the CSS defining emphasis as { font-style: italic; }
    Is there something I haven’t understood?

  • rlively

    Aalaap -
    <p>I am not <em>that</em> good at this!</p>
    <p>could rather be..</p>
    <p>I am not that good at this!</p>
    <p>with the CSS defining emphasis as { font-style: italic; }</p>
    Your change would not give you the ability to style only the word “that” italics the way the original example does.
    Besides, emphasis is semantic! You are emphasising a certain word or phrase as especially important. Visual browsers simply indicate those emphasised words with italics. Aural browsers could change the voice inflection, textual browsers could indicate emphasis another way. My point is that emphasis (<em>>)by itself does not connote display, while italics (<i>) does. You could always put in emphasis tags and then style emphasised text with bold small-caps if you wanted.

  • http://www.nellen.co.za Adriaan

    Really great article, thanks for sharing it. I have written a similar article and linked to yours on: http://www.nellen.co.za/Articles/The-web-and-Usability-also-known-as-User-Friendliness/

  • http://www.mekanikturk.com Gökhan Besen

    I have recently found a W3C tool named “Semantic Data Extractor” which I think you might be interested. This tool checks your document and creates an outline. You can see most of your mistakes (I had many!) Here is the link: http://www.w3.org/2003/12/semantic-extractor.html

  • http://BsAs Michel

    Thank you for publishing this informative article.
    Another related article:
    http://www.analoga.com.uy/en/articles/html-based-copywriting.html

  • http://surajnaikin.blogspot.com/ suraj

    this is an amazing article, answered all my doubts i ever had regarding semantic html…the word & the explanation throws a crystal clear meaning about it..i have saved this page on my local & will refer to it again & again.. great efforts

  • http://www.mohdkashif.com Mohd Kashif

    Very nice, good artical of semantic code.

  • http://www.csd.uoc.gr/~gconst konou
    Dear all,
    I’m coming back with an answer to my own question. I think that rlively already explained it.
    The question was why and are not deprecated while is?
    The answer is: because and both define semantic meaning while doesn’t.
    defines a piece of text which is of some importance (like ).
    defines a piece of text of some emphasis (like ).

    However, I still think that and define feel and look since they refer to bold and italics which is clearly a font attribute and not a semantic reference. The semantic meaning is clearly defined by and . Bold () defines the font type while strong defines that the text is of some importance (and the browser renders it as bold – what if tomorrow this rendering changed to red/bold, then and would not have an equal result).
    So, wouldn’t it be much more clear if and become deprecated and let only and ?

  • http://www.csd.uoc.gr/~gconst konou

    CORRECTED:
    Dear all,
    I’m coming back with an answer to my own question. I think that rlively already explained it.
    The question was why <b> and <i> are not deprecated while <u> is?
    The answer is: because <b> and <i> both define semantic meaning while <u> doesn’t.
    <b> : defines a piece of text which is of some importance (like <strong>).
    <i> : defines a piece of text of some emphasis (like <em>).


    However, I still think that <b> and <i> define feel and look since they refer to bold and italics which is clearly a font attribute and not a semantic reference. The semantic meaning is clearly defined by <strong> and <em>. Bold (<b>) defines the font type while <strong> defines that the text is of some importance (and the browser renders it as bold – what if tomorrow this rendering changed to red/bold, then <b> and <i> would not have an equal result).
    So, wouldn’t it be much more clear if <b> and <i> become deprecated and let only and ?

  • http://www.webdesignfront.com/rants/ Lex Fitz

    A client sent me to this article, just now. “Uhuh, that’s what it means to code semantically!” Thank you Paul, you have raised my stocks.

    I’m somewhat of a “semantic code Evangelist” and it can be a pain to always have to explain why semantic code is so important. I will to link this article in an upcoming post on my blog.

    When looking at source code for reference to colors and fonts etc, remember to search for “table” too. Tables are fine for tabular data, but if they’re used for anything else, it is not semantic. It is still possible, and even likely, there is other non-semantic code on your site, despite having passed this test. But it is a great acid test nonetheless.

    It is still fairly common for web developers to fall back on tables, because they’re easy to use for otherwise complex layout problems. Though it’s not always out of laziness, sometimes they just don’t realize what is and isn’t tabular data. And after a decade where all web data was widely viewed as tabular, that’s not really surprising.

    A few days ago I published a related article on my blog at http://www.webdesignfront.com/rants/tableless-css-image-gallery-bulletproof-ie6-browser-support/ about semantically coded image galleries. It reminded me of what I think are the two biggest barriers to writing semantic code. One is how to properly clear floats, and the other being how to deal with Internet Explorer bugs.

    I wrote it because when I recently built a gallery for a client’s new site, I actually caught myself thinking, “Aren’t gallery images really just tabular data anyway?” Of course I laughed at the notion, but it was a reminder how insidious that 1998 coder mentality can be, even years after having crossed to the bright side. So as usual, I coded the gallery semantically as a list, because image galleries are just a list of images. Then I styled the list to look like a gallery. Remembering there are a couple of major “gotchas” when doing this properly, and having resolved them, I figured I’d write and share an article on how to do it right.

    I hope this will help somebody keep up the good fight. Thanks again for the article, Paul.

    Best regards,
    Lex Fitz

    P.S I have subscribed by RSS and will stop by again.

  • http://www.fitzgeraldstrategies.com.au Mike Fitz Gerald

    It all sounds like semantics to me!!

  • http://www.mdostudio.com m a r c o

    Thank you Paul for de-mystifying the concept of Semantic Code… As it turns out, I’ve been writing semantic code for a number of years, I just didn’t know it was called semantic code… I thought it was Web Standards. Is there a difference? Are they both the same?

  • kishore

    very simple explanation about Semantic
    code………I like that.

  • sonali

    I am searching the URL for semantic code

    it means proper web site code ,how to write html and css header to footer (top to bottom)

  • http://twitter.com/rwbennet Rob Bennet

    It’s important to note for any newbies that presentational classes are fine within markup, just not at the expense of the semantic-ness of your HTML.  So, utilizing grid systems and things of this nature are good for speed and modularity, just make sure you’re placing classes like “span3″ or “grid4″ on an element that also explains the content, such as an element.

  • http://www.facebook.com/people/John-Campbell/716000308 John Campbell

    Hmm, what if you said <strong><em><b>What is semantic code really?</b></em></strong> ?

    And what if your CSS specifies that all those tags are: font-style:normal; font-weight:normal; font-variant: normal; ?? Or even as far as display:none;

    Would SEO still be good…? I’d love to know if Google checks the CSS properly.

    • edricnavarro

      the tag <b> is deprecated use <strong> instead, strong and em, are tags used to give different kinds of emphasis to pieces of content. The way you style them does not matter for web crawlers, what matters is the semantics and format you give to the code, basically if your code have proper semantic and is well structured it will be accessible in most of the cases, that means that a robot that reads the page to blind people can have access to your content, they don’t care how the page looks because they can’t see and this is the same case for the web crawlers they don’t care about the page styles they do care about the content coherence that helps them give sense to the stuff they are crawling and storing in a database. The way you style things is up to you and only have a visual importance. You can use a custom tag like <test> and style it as bold text and use it to bold pieces of text instead using the <strong> tag, people will see it as a bold piece of text that is empathized for some reason but is transparent for them if you use the tag <strong> or <test> as said before it only matters for accessibility tools and web crawlers.

  • http://twitter.com/jm_kumaresh Kumaresh

    Clear explanation about semantics..Thanks!!!

  • edricnavarro

    “you want to find yourself a new designer!” It cant be more wrong, web designers are meant to do web designing Not web development, the web developers are the ones that should care about things like semantic and accessibility. You may need to rethink and amend that last serious sentence before some one lose it job because this misunderstanding of roles.

    • http://boagworld.com/ Paul Boag

      Sorry but I disagree. I strongly believe a designer needs to be able to code. They don’t need to do it all the time (as you say that is a web developers role) but they need to know and understand semantic code.

      • edricnavarro

        You don’t have to sorry is ok to disagree, but try to understand that a designer is a creative artist or creative producer, it main roles is not coding, server configuration, accessibility, system testing, compatibility and so on, I’m not saying a designer should never try to code, a person can learn as many things as he/she wants and also be good doing all of them, my concern is that last part of the article that literally makes coding and semantic understanding a “must” requirement for all the designers.

        • http://boagworld.com/ Paul Boag

          I trained as a designer so I know where you are coming from. But imagine an artist who didn’t understand the properties and limitations of the medium he or she is working in. A painter trying to paint a water colour using oil paint for example. You need to understand the medium with which you work. That is all I am saying.

          • dkallem

            I’ll second that, and as a designer who’s learned how to code HTML and CSS, I don’t believe you can claim to be a Professional Web Designer worthy of the title without knowing, or at least understanding very well, these two technologies (at a minimum). You can become a great designer of pictures of the UI, but until you begin to master these languages, you will not IMO be a master web designer.

        • Lucretius Carus
  • anantmendiratta

    awesome explanation, paul. concise, precise and clear just like semantic coding ;) :D
    thank you once again.

  • Paul Duncan

    Giving people a small taste of information, then telling them to go off and harass their web designer with it and if they don’t say YES to just fire them, is about the most foolish narrow minded suggestion I have ever seen on one of these articles. Web design is about a HELL of a lot more than this.

Headscape

Boagworld