The Benefits of Validating HTML

Feb 182010
 

Yesterday I wrote about the benefits a website visitor experience when a site has been done with valid HTML. Now it’s time for the benefits for the person or persons building the website.

Personal Benefits of Validating HTML

It’s the case of hear me now, believe me later. As I mentioned in the first post of this series, many are very defensive about not validating. The only reason I can guess why is because it just means more work, and they have never tried.

I have two things to say about that. First, it’s easier than you think, and second, once you get in the habit, you won’t see it as extra work. Below are the reasons why.

Continue reading »

Why Validating HTML is Important to the User

Feb 172010
 

If you are learning to build websites, or have been already, know that learning how to validate your HTML could be one of the best things you could do. My next post will be about its benefit for website owners and developers, but today it’s about the user.

They Didn’t Even Notice You Validated

Most web users don’t even know if a website has valid HTML or not. Is there a reason for them to? Not really. They just want the site to work. Do you think visitors notice when your site doesn’t work, appears messed up in their browser, or takes forever to load?

Taking the time to use W3C’s method to validate your HTML is an important step to take when building a website because it can have a huge impact on your users. Continue reading »

Reasons Why Validating HTML is Important to You

Feb 162010
 

Occasionally, I offer free advice on forums where webmasters ask for feedback on there website. When doing so, myself or another experienced webmaster will suggest that the owner asking for the review should validate their code.

The common responses:

  • Validating HTML, who cares…
  • I can get my site to look and work the way I want without validating. It’s a waste of time.
  • It won’t help my SEO
  • It takes too long
  • Nobody needs to tell me how to build a site
  • And the list goes on… Continue reading »

HTML and CSS Cheatsheet

Feb 082010
 

The World Wide Web Consortium (W3C) has a new little tool for webmasters. It’s the W3C Cheatsheet. Though the page is lacking in luster when it comes to description (I had to guess what to do when first using it), it packs a fully loaded archive of all your HTML and CSS element attributes.

cheat

To use the tool you simply type in the HTML element you want to know more about, and W3C delivers all of the elements attributes. Knowing how to address those attributes is up to you, but I’m guessing will come in very handy for many of us.

Suggested Methods to Improve Browser Rendering

Dec 102009
 

Obviously, keeping your website pages small is a great way to ensure your site loads quickly. I’m also guessing many of you want to add a little flair to your site, so at some point you will have to say enough is enough. Hands down, you announce you have made your site load as fast as it can. Unfortunately, if you thought you were done speeding up your site by crunching file size, there is still more to do. Download time is one thing, rendering that download into a page the visitor sees is a whole new game.

Google’s advice to improve rendering speeds heavily relies on optimizing your CSS file. They also mention to make sure to specify image sizes as well. You know, with width=”this” and height=”that”. Continue reading »

Heading Tag – A How To

Apr 152009
 

This is a basic tutorial on how to use heading tags on your website. It’s basic, because its use is very basic. The reason I am posting this article  though, is because it has become apparent to me that many web developers, or site owners have no clue on how to use it correctly, see my reasoning why. To top it off, it can often be difficult to position. You should be able to come close to doing it right though, and after reading this, you should have a thorough understanding on its purpose.

What Are Header Tags?

Header tags do two things. They outline the sites content, and they define the value of the content below it. To use the tags you simply wrap the content like this:

<h1>Title of Site</h1>

Using my site as an example you can see it in action:

My logo is in the <h1> position. This is not ideal, text is preferred here. To compensate for this I have made sure the image has a title. Most data extractors will recognize this. So in this particular case my <h1> tag will reflect “Best Web Image – Web Usability and Design”, the image title.

The <h2> wraps around the page title, and the <h3> tags wrap around paragraph titles. It’s a simple outline of a sites content created by heading tags. They are used by most major browsers. They have been around since I’ve been building sites, 1996, and probably before that. It’s basic HTML code.

headings

Below is an example that I think will get you motivated in using header tags correctly though.

By using W3C’s Semantic Data Extractor on my Contact Information Post you can see the outline it makes of my page. It does this by grabbing the header tags. You may have to scroll down a little to find the outline on the extractor page.

H1 [Best Web Image - Web Usability and Design] – My sites title

  • H2 Contact Information – The Page title
    • H3 Contact Information is Your Reflection – Paragraph title
    • H3 Things to Include on Your Contact Page – Paragraph title
    • H3 Related Posts – Paragraph title after the post
    • H3 One Response to Contact Information – Paragraph title for comments of the post
    • H3 Leave a Reply  – Paragraph title for contact form on the post
  • H2 Improve the Usability and Design of Your Website – Post is over, this is in the footer starting new content

You can easily see how the content is nicely organized for search engines. It also is now nicely organized for the visitors. On every page of my site, headings are defined the same way. Visitors can then quickly recognized the level of importance by simply seeing the size difference. This improves scanning, consistency, and a visitors ability to use your site faster.

SEO Land

Now here is a crazy part about heading tags, and I think it’s why so many mess it up. A couple of years ago wild rumors were going around that if you put your important keywords between <h2> tags Google will give them more value. Web developers were suddenly using <h2> tags everywhere. They didn’t know how to use them, they just new Google liked them.

Well the rumors were partially true. The reason Google, and other data mining applications, like the <h2> tag is because of what it represents. If used correctly, it often represents the page title. Obviously a page title is a good indication of its content.

What does your site outline look like when you go straight to a <h2>, and skip using the <h1> tag all together? Well, if you didn’t use an <h1> tag, you don’t have an outline, and data extractors will reflect this. Even if Google gives you a little more credit for that <h2>tag it found, your missing out on the most important keywords, the ones hidden in your sites title, aka <h1>. A <h2>tag is great, but is still bows to the king, <h1>.

How valuable is your content if you just wrapped it all in <h1> or <h2> tags? Well all things being equal, nothing will have an increased value unless it was highlighted somehow. If everything is special, nothing is special.

Time to Test and Improve Your Site

So are you ready to test your site out? Visit W3C’s Semantic Data Extractor, and type in your url. If the extractor fails to show your sites outline, time to get to work. Don’t worry if you do fail though, I’m guessing 90% of you will. Just use the information, fix your site, and get a head start on your competition.

Did you get an outline for your site using the extractor? Sweet! You are are the only one out of ten that do!

© 2012 Best Web Image Suffusion theme by Sayontan Sinha