10 Tips for a better built web page
I'm always trying to learn new things and improve the way I build my sites. This is a list of things I feel is very important for web developers. If you think something I've written is incorrect or outdated (already!) please let me know so it can be corrected. :-)
Always include a title tag
This is one of the single most important things in building a web page from a search engine point of view. The title tag is used to put the name of the site or page you are viewing into the title bar of your browser. It's also one of the most important things when it comes to search engines. Your title tag should be less than 80 characters in total, and not contain any particular word more than once where possible. repeating a keyphrase (two or more consecutive key words) is also a no-go. Your title tag should describe what the page is about. Think about what terms people might search for to find your page, and try to incorporate these into your title.
I usually try to incorporate the name of the page, along with the name of the site in my title tags, like so:
<title>incubus: random stuff, web design - 10 Tips for a better built web page>/title>
Remember - always include a title tag and make sure it describes the content of the page in 80 characters or less.
Meta tags
Most search engines don't rely on people filling in the correct meta tag information for every page. For SEO and usability purposes though, you should at least include description and keywords meta tags. The tags go in between <head> and </head> in your HTML code, and will look like this:
<meta name="description" content="10 Tips for a better built web page" />
<meta name="keywords" content="tips,write,headings,links,external,useful,relevant" />
Cascading Style Sheets
If you're building to W3C standards, you should make sure that all content is kept seperate from your layout and styling code. CSS stylesheets should always be external.
Always use the correct DOCTYPE
If you don't include a DOCTYPE in each page you produce, not only will your code not validate - it could look very different in each browser you view it in. Sticking with a Strict DOCTYPE is usually a safe bet, and will give the most consistent look across a broader range of browsers. I usually use XHTML 1.0 Strict for my site builds. The DOCTYPE should come before everything else in your HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use Headings Properly
Search engines give heading elements (h1-h6) a little more "weight" when it crawls your site. Keywords and keyphrases contained withing heading elements are usually "worth" more to them. It is generally considered best practice to ensure you have your heading one as close the <body> tag as possible. Using sub headings further down your content is also useful to search engines as well as human visitors as it will help not only break down your content into usable sections of text, but also tell the search engines which bits of text are important.
Include a Sitemap Link on every page
Sitemaps are extremely useful pages. Search engines can find other pages on your site that may not have been linked to anywhere else, but it can also help readers find what they are looking for much quicker. This is especially useful if you have a lot of pages on your site. I usually place a sitemap link in the footer section of my pages, along with other common useful links such as validate buttons, privacy policies, and ICRA labels. Users will usually expect to find secondary navigation in a footer section of a page.
Avoid tables for layout
HTML Tables are not for laying out a page. They are purely for the display of tabular data. There are many articles about why tables should not be used, but first and foremost the main reasons to avoid them is accessibiliy and speed. Using a table for layout can make it difficult for blind users to access your site using screen reader software. When used for their intended purpose, screen readers will have no issues with a table full of tabular data. Tables also take more time to render on screen than current standards based layout techniques. Avoiding tabled layouts will make your site quicker!
Don't use javascript only menus
Javascript only menus are not very accessible and will not work well for screen readers, text only browsers and mobile devices. Some people even disable javascript completely when browsing, which renders these types of menus completely unusable in some cases. Menus can be very easily built and styled using unordered lists. There are many very good sites with plenty of resources about styling menus with CSS. Text only browsers, screen readers, people browsing without javascript and even search engines love menus built like this. Don't pay any attention to someone who tells you that you ca't do nice rollovers with only css either.
Always use the title attribute on links and images
It can be very annoying to go through every link and image reference in your site adding:
title="some text to describe the item here"
But, to pass accessibiliy testing, keep search engines happy, and not leave out blind users, you should always add a title attribute to each and every link and image on your site. The title attribute should be in the opening tag of the element in question. For example:
<a href="/" title="Back to the home page">Home</a>
Images should always include an alt attribute too. This is used in the same way as the title attribute. If you need to insert tabular data, you should make sure that you include:
summary="description of table here"
to the table element. This serves the same purpose for tables as the title attribute does for images and links.
Validate your code!
Validation is probably the most important factor in building a compliant site. Even after years of experience it's still easy to forget a </p> here or a trailing slash elsewhere. Validating your HTML and CSS will help ensure that your site will appear more identical in more browsers on more platforms for more people. You should validate each and every page you produce. There are some very useful online services which can aid you in your quest for the perfect compliant page.
There are no comments. Be the first!
You must be logged in to post comments