Semantic Code Markup - I Dare You Pulp Fiction Meme

Search Engine Optimization,Web Design

Semantic Markup and Semantic Coding Guidelines for SEO

15 May , 2008  

As a web designer, you want your website design to look good and be aesthetically pleasing to the eye. Think of semantic coding as making the content on your website aesthetically pleasing to search engines like Google and Yahoo.

Semantic markup (or Semantic coding) is the practice of programming your website so that the code used is descriptive and representative of the information it contains. For example, instead of using code like this:

<div id="page-title">Hi, my website is about Semantic markup</div>

You would want to use standardized markup tags which describe the content, like this:

<h1>Hi, my website is about Semantic markup</h1>

What’s the difference? <div> tags (and similarly <span> tags) are generic elements and don’t represent any inherent meaning. <h1> heading tags are used to define page headings, and google and other search engines look for such tags to define the contents on your web page. By using an <h1> tag instead of a generic <div> tag you are telling Google “pay attention to the text inside these tags – it is important.”

OK, so you think you have a lot of important content on your web page so why not start every new paragraph with an <h1> tag? It doesn’t quite work that way. <h1> tags should only be used once on a page, to define the title and/or purpose of the page. It should be very close in meaning to the <title> tag of your page. For subheadings on the page, you should be using <h2> <h3> <h4> <h5> <h6> header tags, in order of descending importance.

Another common pitfall is ordering lists. Instead of just listing items with a <br> tag in between them, use the more appropriate <ul> (Unordered List) tag with <li> elements for each item. If you need to display a list of numbered items (i.e., 1, 2, 3) use the <ol> Ordered List tag with <li> elements.

For bold or emphasized text, use <strong> or <em>, instead of the less descriptive <b> and <i> tags.

Paragraphs, of course, should always be wrapped in <p> tags. By default, <p> paragraph tags will begin a new line, so there is no need to add extra <br> tags to anything for spacing. (Note, never use <p> or <br> tags just for spacing. Use the margin and/or padding attributes of the <p> tag in your CSS code to add visual spacing).

The following is a list of semantic code elements which you can use to better describe your website content:

ABBR and ACRONYM: For Abbreviations and Acronyms. They have an accompanying title tag which you can use to describe the actual meaning of the abbreviated word or acronym.

CITE: Citation, used to cite a source of information.

CODE: Computer or Programming code.

DEL: Deleted word or phrase.

DFN: Definition.

DL: Definition List. Similar to UL and OL, but uses DT (Definition term) and DD (definition description) to show terms and definitions.

EM: Emphasis, displayed as italicized text.

INS: Insert, used to display text you have inserted due to an edit at a later date.

KBD: Keyboard instructions.

OL: Ordered List.

SAMP: Sample output, used to show sample output from programming code.

UL: Unordered List.

VAR: Variable, used to represent a variable in programming code.

STRONG: Strong, or bold, emphasis on a word or phrase.

Read the next Article in this Series: Why You Should Use SEO Semantic Coding and Semantic Markup

, , , , , ,


9 Responses

  1. Jake says:

    Great, informative website. Wondered if anyone could have a look at my website which is in xhtml to see what I can do to improve my rankings. http://www.skylanterns2u.com.

    Regards
    Jake

  2. Barry Wise says:

    Jake;
    Your site is in HTML 4.01, not XHTML, as you can see in your first declaritive statement.

    You have a SEVERE problem with your home page. Your site returns a 200 http status code in the header at http://www.skylanterns2u.com/, but then the page redirects the user to a new URL, http://skylanterns2u.com/home/home.php. This is very bad, use a header code of 301 to do the redirect, not whatever it is you are using (meta refresh or javascript, etc.)

    There are some things you can do to improve on-page SEO factors with semantic coding, but first you have to clean up the code. The W3C HTML validator returns 51 errors in the page markup:
    http://validator.w3.org/

  3. Michael says:

    Great information to know. I never knew that strong was counted more than the b tag. Great place to start and definitely making a site XHTML compliant can only help with your ranking.

  4. Dave says:

    Can one do this in markup?

    content text goes here

  5. Thanks for the info. It always stinks when you make a Web 2.0 site that looks wonderful, but sucks at SEO.

  6. Great article Barry, semantic coding is so often misunderstood by so many SEO firms, I came across one the other day which has 7 h1 tags on their site.

  7. Instead of explaining semantic markup to clients I now link them to this article
    Concise and well written, thanks

  8. Great article Barry, I struggle to see why so many people still have trouble writing clean, semantic code. I will share this article with some friends and hopefully it will help them out. Good to see you agree with the one h1 on a page too.

  9. Hey & thanks for the nice list. Some of those tags are so rarely used that I have never even heard of them, e.g. the “samp”-tag. Oh and while we are talking about semantics, in XHTML all tags have to be spelled in small letter, so “strong” instead of “STRONG”. Using capitals is WRONG.

Comments are closed.