Semantic Markup and Semantic Coding Guidelines for SEO

May 15, 2008 | Barry Wise | Search Engine Optimization, Web Design

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

Tags: marketing, optimization, programming, search engines, semantic coding, semantic markup, seo

Similar Posts:

• Why You Should Use SEO Semantic Coding and Semantic Markup
• Google Releases Official SEO Starter Guide
• Top 10 ways to improve your search results in Google
• Useful (and Useless) Meta Tags In SEO and Web Design
• How To Improve Your Search Result Visibility In Google

Comments