How can you meet the W3C Web Standards?

Web acces­si­bil­ity is the prac­tice of mak­ing sure your web­site con­tent can be accessed and under­stood by as many vis­i­tors as pos­si­ble, regard­less of their phys­i­cal abil­ity or tech­no­log­i­cal barriers.

As a web­mas­ter, you must ensure that your web­site can be viewed by both human vis­i­tors and Search Engine crawlers, and at times it can get a bit tricky to please both types of visitors.

It may not be always be pos­si­ble to make all types of con­tent acces­si­ble to all your vis­i­tors, but as far as pos­si­ble, you should try to make the mean­ing of your con­tent under­stood by everyone.

The W3C Web Standards

The ‘WC3 Web Stan­dards’ are an offi­cial set of stan­dards that bring together com­monly accepted rules by web-masters around the world. If you can make your web­site com­ply to these set of stan­dards, you will greatly ben­e­fit by the fact that the spi­ders can eas­ily nav­i­gate your con­tent and your human read­ers can enjoy a nice-looking website.

What is “Web Standards?”

Web Stan­dards crop up almost every­where on the inter­net. The rea­son is sim­ply that the web stan­dards are incred­i­bly use­ful and impor­tant. They help to ensure com­pat­i­bil­ity between dif­fer­ent com­puter sys­tems and browser ver­sions, as well as aid­ing acces­si­bil­ity and search engine optimization.

Why your favorite tool should be the ‘W3C Markup Validator’?

The place to go for defin­i­tive infor­ma­tion about the web stan­dards is the web­site of the group respon­si­ble for set­ting them, the World Wide Web Con­sor­tium, or W3C for short. You can run your site through their online tool, called the W3C MarkUp Val­ida­tor and pick up any attrib­utes that don’t com­ply with the rules.

You’ll be laugh­ing, ’cause it’s so simple!

The beauty of cod­ing to W3C Web Stan­dards is that you’ll find your sites are already well on the way to being acces­si­ble. In fact, a sim­ple Word­Press site will require little-to-no spe­cial atten­tion to bring it up to the high­est level of acces­si­bil­ity. How­ever, dynamic and com­plex themes can eas­ily alter that.

The Seman­tic Markup

The “Seman­tic Markup” is the tech­nique of writ­ing HTML code that describes the mean­ing of the con­tent, rather than sim­ple describ­ing its lay­out or style. This allows both human read­ers and spi­ders to read and under­stand the con­text of the con­tent. This con­text gives the con­tent an extra layer of mean­ing. The fol­low­ing 9 tips should help you under­stand the sim­ple power behind the Seman­tic Web.

#9) The hum­ble “para­graph” tag

How can any­one for­get the “para­graph” tag? Known as <p>, the para­graph is to a doc­u­ment as a brick is to a wall. So, what­ever you do, don’t just chuck in < br /> tags to cre­ate the visual appear­ance of para­graphs; some­thing that many web design­ers seem to do with alarm­ing fre­quency. That would be like build­ing a wall with­out cement. If you need more space between your para­graphs, look into your CSS file and make the changes there, not in your direct article.

#8) Fine-tuning your tables for SEO

Tables are another area where the mean­ing of HTML markup is often sac­ri­ficed for the designer’s con­ve­nience. Seman­ti­cally, a “table” is a matrix of related data orga­nized into rows and columns, like a list of prod­uct names asso­ci­ated with price and color options for exam­ple. Tales shouldn’t be used for cre­at­ing lay­outs, as the fact that it’s a “table” implies a struc­tured rela­tion­ship between items in rows and columns that doesn’t  exist.

#7) Be strong, don’t be bold

A sub­tle, but instruc­tive, piece of seman­tic markup is the <strong> tag. Most of the time this is used to make the text bold. So why not use the old <b> tag? Well, for one thing, it’s not web-standards com­pli­ant. More per­ti­nently, it’s a “rep­re­sen­ta­tional” tag, mean­ing it only refers to the way the con­tent should look, rather than what it means. <strong> means that the con­tent is “promi­nent”, a con­cept which could be rep­re­sented in any way you wish, but not nec­es­sar­ily bold.

#6) If you can’t stand straight, use <em>

Sim­i­lar to the <strong> tag is the <em> tag. Again, this is mostly used to denote the italic text, which used to be accom­plished with the non­stan­dard <i> tag. The seman­tic mean­ing of <em> is “empha­sis” whereas <i> just means “slopey text.” The fact that some text is “slop­ing” means noth­ing to a blind vis­i­tor like Google Spi­ders, how­ever that it has “empha­sis” means a lot. For the design savvy among us, there are lost of ways to give empha­sized text a visual rep­re­sen­ta­tion other than ital­i­ciz­ing it.

#5) Per­fect­ing your classes

The key to seman­tic markup is to make use of the exist­ing classes pro­vided within the HTML spec­i­fi­ca­tion. The also saves you a lot of time! If you do need to rep­re­sent some­thing in a visu­ally dif­fer­ent man­ner you can still do this by adding a cus­tom “class” to the stan­dard tag, like this <p class=“affiliates-page”>, and cre­at­ing a cor­re­spond­ing style in your CSS.

#4) Alt Text for Images

Use the alt attribute to describe the con­tent of images, for web-crawlers. This can also help visu­ally impaired users that use screen reader soft­ware which reads the text con­tent of we pages using speech syn­the­sis. If your images have no alt text then the mean­ing of such images aren’t avail­able to both the impaired view­ers and Spiders.

#3) Self-closing tags

Remem­ber to “self-close” tags where appro­pri­ate. For exam­ple, to add a new line to a para­graph you could just add an old-style “break” tag: <br> How­ever, the stan­dards com­pli­ant ver­sion of the tag self closes, like this <br />

#2) The sub-ordinate headers

You can assign <h> tags to your con­tent that will assign it value and weight, espe­cially when spi­ders come crawl­ing to your site. If you allow it to iso­late impor­tant key­words by using <h> tags you are mak­ing them more promi­nent and stand out. You can use any­thing from <h1> to <h6>, but I’ve never used any­thing fur­ther than <h4>. Know­ing this allows search engines to view the con­tents of the head­ing accord­ingly, and give those key­words extra weight.

#1) The King header

One of the most impor­tant guide­lines, in my opin­ion, is that of the <h1> tag, which con­tains the main head­ing of the page. Every­thing else on the page is sub­or­di­nate to the main head­ing. Put another, the main head­ing is the most impor­tant part of the page.

That’s it ~ If you can stay true to the above 10 tips and also fol­low some other minor yet impor­tant guide­lines pro­vided by the W3C, you will be rewarded for mak­ing the spider’s job easier.

Go to top