HTML

Updates about HTML – hypertext markup language. With HTML you can create your own Web site.

Do Search Engines Care About Valid HTML?

Do Search Engines Care About Valid HTML?

HTML

Valid HTML

Like most web developers I’ve heard a lot about the importance of valid HTML recently. I’ve read about how it makes it easier for people with disabilities to access your site, how it’s more stable for browsers, and how it will make your site easier to be indexed by the search engines.

So when I set out to design my most recent site, I made sure that I validated each and every page of the site. But then I got to thinking while it may make my site easier to index, does that mean that it will improve my search engine rankings? How many of the top sites have valid HTML?

HTML Validator

To get a feel for how much value the search engines place on being HTML validated, I decided to do a little experiment. I started by downloading the handy Firefox HTML Validator Extension (https://addons.mozilla.org/en-US/firefox/addon/html-5-validator/) that shows in the corner of the browser whether or not the current page you are on is valid HTML. It shows a green check when the page is valid, an exclamation point when there are warnings, and a red x when there are serious errors.

I decided to use Google trends to determine the top 5 most searched terms for the day. I then searched each term in the big three search engines (Google, Bing, and Yahoo) and checked the top 10 results for each with the validator. That gave me 150 of the most important data points on the web for that day.

HTML results

The results were particularly shocking to me only 7 of the 150 resulting pages had valid HTML (4.7%). 97 of the 150 had warnings (64.7%) while 46 of the 150 received the red x (30.7%). The results were pretty much independent of the search engine or term. Google had only 4 out of 50 results validate (8%), Bing had 3 of 50 (6%), and Yahoo! had none. Now I realize that this isn’t a completely exhaustive study, but it at least shows that valid HTML doesn’t seem to be much of a factor for the top searches on the top search engines.

Even more surprising was that none of the three search engines home pages validated! How important is valid HTML if Google, Yahoo!, and Bidon’tont even practice it themselves? It should be noted, however, that MSNs results page was valid HTML. Yahoos homepage had 154 warnings, MSNs had 65, and Googles had 22. Googles search results page not only didnt validate, it had 6 errors!

In perusing the web I also noticed that immensely popular sites like ESPN.com, IMDB, and Facebook don’t validate. So what is one to conclude from all of this?

It’s reasonable to conclude that at this time valid HTML isn’t going to help you improve your search position. If it has any impact on results, it is minimal compared to other factors. The other reasons to use valid HTML are strong and I would still recommend all developers begin validating their sites; just don’t expect that doing it will catapult you up the search rankings right now.

Do Search Engines Care About Valid HTML?

Learn HTML, Or Use A WYSIWYG Editor

HTML

 

Learn the basics of HTML

When I first started designing web pages back in 1998,  it was necessary for me to learn the HTML markup language. At that particular time, there were somewhat you see is what you get editors, but almost everyone that design web pages used raw HTML and understood how it worked. Now, seven or eight years later, we find that be the market is flooded with editors such as Dreamweaver that allow anybody to design web pages as easily as they can create a Microsoft Word document.

Whenever I take someone under my wing, and start teaching them about Internet marketing, and designing web pages, the first thing that I tell them is that they should learn the basics of HTML. While I recommend that they use Dreamweaver for most of their web page designs, it’s always helpful to be able to go into the code view and understand what they are looking at. It also helps whenever viewing the source code of other people’s web pages, to see how they did one thing or another with their code. This would be nearly impossible if you did not understand at least the basics of HTML.

Clean HTML code

Another benefit of knowing HTML is that you can go in and clean up your code. After you design a page in a program like Dreamweaver. A lot of times, there is weird formatting that goes on behind the scenes in it what you see is what you get an editor. It makes it difficult, sometimes even for those of us that know HTML to go into the document, and know where we are at inside the code. However, if you understand HTML, it’s easier to go in, make your code neater and more manageable, and then save it in that format so that it’s easier to go in and edit in the code view in the future.

While there’s no doubt that using programs such as Dreamweaver can make beautiful web pages that function fully without even going into messing with the HTML at all, I still think that it’s a good practice to understand the basics of the HTML markup language and to make sure that you use it on a regular basis so that you keep this skill. Not only does it help you when you’re in a code pinch, but he keeps you from being what I like to call a lazy web designer.

Learn the Super Easy HTML Basics

HTML Basics

HTML

Learn HTML

Are you feeling a bit lost when someone mentions those four letters, “HTML”? Well, it is actually very easy to learn and understand. We will cover how to set up a simple page, how to format text, insert images, and insert links. Let’s start by explaining what it is exactly.

When you visit a page, you see columns, images, links and different colors. This has all been written by someone (or someone used a program to write it). And it is written in HTML. All web pages are sent to your browser (such as “Internet Explorer” or “Firefox”) as HTML.

HTML is the easiest “computer language” to learn. Now, when you write a formal letter to someone, there are things you add at the start and end aren’t there (such as at the start their address, the date, and at the end your name and signature). Between these items, you write the body of the letter. Well, in some ways, the basics of HTML is very similar.

Let me just give you an example of a simple page. This would display the words “Welcome” in the browser (the numbers in bold are not part of the code – they are just line numbers so we know what we are talking about later on).

1]     <html>
2]        <head>
3]            <title>Site Title</title>
4]        </head>
5]
6]        <body>
7]            Welcome
8]        </body>
9]    </html>

All tags start and end. A start tag looks like <xxx> and and ending tag for it would look like </xxx>. There are many tags – <u>…</u> for underline, <b>…</b> for bold etc.

If we go back to the letter example, you normally write your address, the date, their address etc at the top. Well, this is what the first four lines are like. The first line, <html> (note, in HTML, it doesn’t normally matter if it is upper or lower case. In some technologies such as XHTML it does, but for now it doesn’t matter) just declares that between that HTML “tag” as it is known, and the ending HTML tag on line 9 (notice the backslash, indicating it has ended) it has HTML within it.

The head contains information that isn’t directly displayed by your browser. The <title> tag contains the title of the page, which is shown at the top of your browser. Other things such as keywords go into your head tag, but that’s a bit more advanced.

You should put all your content on the <body> tag that you want the user to see inside the main part of their browser.

HTML links

A link is something that lets you click on it, and it will request a new page. You use the anchor tag for this:

<a href=”http://www.example.com”>CLICK HERE </a>

Do you see how that would work? It would display the words “CLICK HERE”, and that links to http://www.techneek.co.uk. This tag, the <a … >  tag has an example of an attribute to it – the href.

Almost all attributes have a =” “. It is basically like saying, I have an anchor tag. I want to make it link to something. To tell it to link to something, you need to put href=”your link”. Remember when ending this tag (</a>), you don’t need to put in the href. It is always just </a>.

HTML Bold, Italic, Underline

These are really simple – you probably already know them. <b> bold text </b> for bold, <u> underline </u> or <i> italic </i>

<b>Spaces in HTML</b>
Spaces to some extent don't matter. I could write this line:
<a href=”http://www.example.com”>example.com</a>
as:
<a href=”http://www.example.com”>
example link
</a>

In HTML, any multiplies of a space – ‘ ‘ just show up as one. To display more than one you need to type &nbsp;.

HTML Images

Images are really simple. It is just <img src=”yourimagelink”>. You don’t even need an ending tag (no img> tag!). If you want to specify the height/width, use height=”120” width=”400”;
<img src=”yourimagelink.jpg” height=”99” width=”89”>

In case the image can’t be loaded for your user, you should give an alternative text. This is also good for people who find it hard to see on the screen. To do this, add alt=”a description of your image”. I would personally recommend no more than 6 words.

<img src=”youimagelink.jpg” width=”200” height=”100” alt=”View of a beach”>

It is recommended that the only image types you use are Gifs (.gif), Jpegs (.jpg), or Portable Network Graphic (.png). Try and keep the file sizes down, some users are at very slow speeds.

So there you are, you should be able to make a page now. Open up notepad, paste this template in:

<html>
<head>
<title>Your first webpage</title>
</head> <body> ... Your content goes here, such as <a href="”http://www.example.com">Example</a>! ... </body> </html>

And replace the “…” bits with your content. Save it as a .htm or .html file (it makes no difference what you choose) and open it in your browser.

Here is an example simple web page using everything we have covered so far:


<html>
<head>
<title>Hello!!</title>
</head> <body> <b><i>Hello!</i>Welcome to <u>my</u> page! Click on the image to go to http://www.example.com</b> <a href=””http://www.example.com”> <img src=”exampleimage.jpg” alt=”Example image” height=”400” width=”400”> </a> </body> </html>

Now you are ready to go further. I recommend that you search for things on your favorite search engine, such as:

  • paragraph HTML tag
  • hr HTML tag
  • div HTML tag
  • basic CSS tutorial
  • uploading webpage or website tutorial server

Have fun!