The Code for Better Website Experience

Robots read the Internet.

Search engines are robots and do nothing but read what's on websites.
Machine readers read websites and say aloud what's on them for the benefit of blind surfers.
Machines are simple and dumb. They don't require much, but what they require, well, they really require.
Here are a few tips to make your site more readable by machines and humans too by learning a few code concepts!

Code

Machines don't know a headline from a picture unless they are told. Html code is what tells what it's reading.

For example, the headline of this article is "The Code for Better Website Experience." Humans see, "The Code for Better Website Experience." Machines need to see, "<h1>The Code for Better Website Experience</h1>". The <h1> tag tells the reader that this is an important headline and contains important information about the subsequent content. A machine reader is going to read it out loud.

Sub-headings are also important. In this article above you see the sub-heading, "Code." The machine sees <h3>Code</h3>. Notice the "3" instead of the "1." This tells the machine that this is an important headline, but not as important as the main headline. <h1> is more important than <h3>.

How you use <h> tags depends on the structure of your content and how you want it to look visually. Just make sure that your most important headlines have lower numbers.

One cautionary note: Never use the headline feature in an html wysiwyg editor to make text bold. Use the Bold feature for that. Using <h> tags to make text bold that is not a headline will make a machine reader and its user crazy.

P for Paragraph

The machine sees ordinary text inside a <p> paragraph tag.
That would look like this: "<p>The machine sees ordinary text inside a <p> paragraph tag.</p>"

Each paragraph of text is wrapped in the "<p></p>" tags.

Picture Smicture

Machines can't see images so you have to tell the machine what's in the picture. That's what <alt> tags are for.

To the left is a picture. Headshot of Harry ChittendenThe machine knows that it's a picture, but without the <alt> tag, it has no idea of what's in the picture.

If I add, "<alt>Headshot of Harry Chittenden</alt>, then the machine tells the visitor, "This is a headshot of Harry Chittenden."

When you are working with images, it's also really great also to get into the habit of filling out the title of the picture too.

Lists

This is the era of bullet points and machines are sensitive to the times. That's why it's worth taking the time to learn the html code that structures lists.

Here is a short list.

Bulleted lists should be coded correctly:

  • So that they look good
  • So that machines can read them
  • So that the visitor has a good experience

Here's what the machine sees:
"<ul>
<li>So that they look good</li>
<li>So that machines can read them</li>
<li>So that the visitor has a good experience</li>
</ul>"
The "<ul></ul>" stands for unordered list. This means the list has no ordering structure like numbers or letters. "<li></li>" incloses each bulleted item.

Glitches in this structure will confound machines and humans alike.

Ordered lists, those that are numbered for example, use the same structure inside "<ol></ol>" tags.

Tag For Machine Use Only

Finally, there is the "<title></title>" tag. This tag is reserved almost exclusively for machines and is very important search engines. Most humans never notice what the tag contains.

What it should contain is a short description of the content of the entire article. Often the title of the article itself is sufficient. But you may want to add more. This article's headline is "The Code for Better Website Experience." But the title tag contains, "The Code for Better Website Experience - simple tips for better html on you pages."

This simple but very important lesson in code can save you and your visitors a lot of grief. Many, many people would improve their user experience and search engine rankings my taking the trouble to get a handle on these concepts. It's an old 80/20 story. About 80 percent of coding issues can be avoided by learning 20 percent (less in this case) of the code.