Web Design Tutorials  HTML web site design tutorial
Write Better HTML
Write Better HTML
There's alot of bad HTML around on the internet, even the bigger websites don't even conform to web standards. This tutorial will show you how to start conforming to web standards and hopefully not make the mistakes I did.
Web Standards
Sadly, alot of people design their pages using Microsoft's Internet Explorer. Don't get me wrong, IE is a nice browser and is very friendly (some will disagree with that but... no sweat; I don't care), but it's IE's friendliness that is alot of people's downfall. IE will display less-than-perfect HTML and make allowances for your errors, it's leniant. Test it in IE and you'll think it looks fine, but when your visitors load it up in another browser - such as mozilla or opera, or even text-only browsers such as lynx - it's a different story altogether.
The World Wide Web Consortium is a website that is trying to lay out a set of standards, rules and technologies to lead the web to its full potential. In the past there have been many verions of HTML and different browsers supported different versions making it very difficult to produce cross-browser compliant web pages. W3 is trying to change this and get everyone using a set of rules and standards that all browsers will understand, making it easier for web developers to reach as many viewers as they can.
So what can I do?
First of all, visit the site. To someone wishing to learn HTML all that information could look a little daunting, so I'm going to lay out a few basic rules for you to follow and teach you to validate your pages. Do the following and you'll be creating better pages in no time.
* Use a DOCTYPE definition
* Nest tags correctly
* Know your entities and use them correctly
* Always make sure your document validates
Use a DOCTYPE Definition
There are various doctype definitions depending on your page, if you're using HTML or XHTML, if you're using a frameset, transitional and strict, etc. I'm going to show you the most common DOCTYPE: HTML 4.01 Transitional. At the very top of your page, before the opening tag, just copy.
<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It's as simple as that. Always ensure you use a DOCTYPE definition in your HTML pages, it is the web standard and your pages will not validate without it.
What it means: This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.
So in other words, as CSS support increases various aspects of HTML are becoming obsolete. The web standards are attempting to stop the use of these and move people over to CSS. Not only does this solve cross-browser compatability problems but if you use CSS your pages will load faster, you will be rid of bulky nested table coding and spacing gifs, and your web pages will degrade well (for the most part) in older browsers. Don't get me wrong, tables are still necessary, it's just not as necessary as it once was.
When you use a doctype it allows the validator to know what rules to validate your document under. I don't recommend strict, it takes alot away from your page, but use transitional and your pages will look alot better, in all browsers.
Nest Tags Correctly
This one is simple, when you open tags, close them in the same order!
Incorrect:
<font><b><u>hello</font></b>
Correct:
<font><b><u>hello</u></b></font>
Open and close you tags in the same order, always. It's not so hard to do, is it?
Not only that, but if you open a tag, close it. You must close your tags, with certain exceptions, such as:
* <link>
* <input>
* <hr>
And more, it is not compulsory that you close certain tags, you will learn these as you get deeper into web development.
Know Your Entities
There are various characters that will cause errors in your documents. I'm sure you've all seen query string like this:
http://www.somehost.com/script.php?id=blah&page=blah
See that &? That's one of the characters I'm talking about. You can't just type & into an HTML document. It's a mistake many, many people make.
You use: &
This will display as & when a browser parses the HTML, but in the source, use &! So when typing your query string, remember this, and your pages will validate. If you get an "unknown entity" error, this is why.
This applies to more characters, but aboveis the most common entity mistake I've come across. See this list for reference.
Validate Your HTML
Once you have finished writing your page, it's likely you'll have made some mistakes, some typos or nested tags incorrectly, to ensure your document contains no errors use the validator.
The validator will check your HTML code and, if it contains errors, will tell you what errors and what lines they're on. Fix the errors and then check again, repeat this until your document validates. It really is worth writing valid HTML.
Validate this page here, this site (for the most part) conforms to the basic web standards and as a result is accessible by more users. The site isnt perfect, some older browsers - especially NS 4.x which, incidentally, if you're using you really should consider an upgrade, your browser is way out-of-date - don't show the site how we'd like, but for the most part the site can be accessed. Get into the habit of following these steps.
Points To Remember
* Use a DOCTYPE definition
* Nest tags correctly and remember to close them
* Don't get caught with entity errors.
* Use the validator
Follow these steps and start conforming to the web standards; write correct HTML; get into CSS so not only IE users can view your site, but all users. People with older browsers and text-only browsers are out there.
| Rate This Material: |
Bad |
Excellent |
|
| |
© 2010 www.kagemedia.com
Kelowna web design and development | Kelowna web hosting
Kelowna website marketing | Kelowna database design |
Links
Serving:
Kelowna BC - Penticton BC - Vernon BC - Westbank BC - Winfield BC
|
|
 |
Win a FREE web design!
We are giving away a completely free web design and web hosting package every month.
Click here for details |
|
|
|
