Why Write Valid HTML?

Across this site, I try to keep everything as accurate and compliant with web standards as possible, from my own markup down to what I teach you. You might ask yourself at some point: "Why is any of this important? Why does it need to be "valid" HTML? If it looks fine, isn't that all that matters?"

A good question, but no, that's not all that matters. Valid HTML is important, for a variety of reasons—and I'll try to explain why here.

Benefits to valid HTML

There's a number of positives associated with writing valid markup, from accessibility to the way different browsers handle your page.

Faster load times

Improper, messy markup can slow down performance and rendering of your page. This has to do internally with the way browsers try to compensate for bad markup (see what's called "quirks mode" rendering for details). Not closing tags can ruin the page DOM, for instance, meaning the browser spends time parsing and applying the effects of tags that should've stopped applying lines ago.

Futureproofing

Going off of browser quirks, if you rely too much on them, you're likely to end up with a broken page in the future. This was true in the days of Netscape, and it'll continue to be true in the future. Valid HTML is futureproof HTML. Even as standards change, if you meet the standards now, browsers into the future will know exactly what to do with it.

Differences in browser rendering

Different browsers can and do render pages differently. Sticking to the standard means you'll be less responsible for a browser breaking your page.

Less drastically, different browsers have different feature sets. Sites like Can I Use tell you exactly what will and won't work in different browsers, meaning you won't be stuck trying to figure out whether it's your fault something won't show up.

Easier to maintain

If you know what you want out of a page, writing it out becomes second nature. If there's an issue, writing good markup means the errors will stick out, especially with the help of programs and HTML validators. Valid HTML is easier to fix and troubleshoot. Keeping styling only to the stylesheet means your pages will be smaller, less dense, and easier to troubleshoot as well.

Plus, if you're collaborating on a site, valid HTML means things stay more consistent, more cohesive. You won't use two different tags for the same purpose, for example.

More accessible

HTML has a number of accessibility features for screen readers, alternative clients, web spiders, and other use cases where the page can't be used as normal. Making use of these, and not misusing other features so as to confuse these clients, means your site will be accessible to the largest number of people and machines possible.

Valid HTML is nicer to look at

It's true! There's something very pleasing about nicely-indented, valid markup with tags closed and nested properly, and everything neatly organized. It looks better on you as the author, because it shows you care. You're either building a site for fun or for your projects—why not make it look official?

Common mistakes

It's pretty easy to write invalid HTML if you're not careful, so here's some basic things to look out for:

Not closing tags

Early HTML pages and lazily authored ones alike both have a tendency to have unclosed tags. This can result in poor performance. Remember to close your tags.

<ul>
	<li>One list
	<li>Two list
	<li>Red list
	<li>Blue list	
</ul>

Improper tag nesting

On the flipside, remember to close tags in the opposite order in which you opened them. Improper nesting looks messy and can affect performance.

<p>Closing the paragraph while the <strong>strong tag is still active</p></strong>

Misusing doctypes

Every page needs an HTML doctype as the first line of the document. No doctype means you get quirks mode rendering, causing slower performance and broken page rendering for more complex pages. The wrong doctype means you're likely to confuse the browser.

The HTML5 doctype looks like this:

<!DOCTYPE html>

There are plenty of others, like these for HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"">

And even older, for HTML3.2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

If you do resort to using tags like  and <center>, it's not an HTML5 document. Use the HTML3.2 or HTML4 transitional doctypes instead—or better yet, use a stylesheet.

Not using a third-party text editor

Windows and MacOS both come with text editors, and while these are useful, they're not ideal. You're best off going with a third-party text editor or IDE with more features. Multiple file support, syntax highlighting, and auto-indenting are very useful things to have, and neither Notepad nor TextEdit have these. Better yet, most text editors are free, so you can try a bunch and find one that fits you best.

Windows users are best going with either Notepad++ or Sublime Text. For Mac users, BBEdit is second-to-none. I used BBEdit for writing the vast majority of this site. Very, very useful.

Not using an HTML validator

You can find special web applications that'll check over your page for standards-compliance. These are very helpful, and they'll catch things you might miss. Be sure to use one.

The big HTML validator is the W3C Official Markup Validation Service, but they also maintain a separate validator called the W3C Nu-HTML Validator, which is only for HTML5 and features cleaner, more experimental page validation techniques. Use either one, but use it and use it often.

Not reading documentation

The web is full of informative content and debate about the standards and best practices of building a web page. There's no reason not to brush up on at least some of it. Seek it out on your own. Google things. Have reference guides handy. The aforementioned quirksmode.org, Can I Use, and Mozilla Web Docs are all invaluable resources, among others.

Tesserae features links to reading material, documentation, and writeups at the end of each guide, in the "Further reading" section. I've personally used these sources, and they're very helpful and informative, and I can vouch for their accuracy in most cases. Please, don't just take my word for these things—go read for yourself.

Summary:

Valid HTML has a myriad of benefits:
- Pages written correctly load faster.
- Valid HTML is futureproof. Rely too much on quirks, and you might find your pages broken in the future.
- Not all browsers load pages the same. The more you keep to the standard, the less culpable you are for a browser misbehaving.
- Valid HTML is easier to maintain, especially if you're collaborating on a site.
- Good practices make your site more accessible to more people, including the disabled and those using alternative clients.
- Valid HTML is just nicer to look at. Outdated tags, messy (or lack of) indentations, not closing tags, writing outright mangled markup—it doesn't reflect well on you, and it's harder to read and uglier to look at.
Easy mistakes can prevent you from writing valid HTML:
- Close your tags. Not closing tags ruins the internal workings of the page and slows down performance.
- Nest your tags properly. If you open a  and then a , make sure you close the  before the .
- Use an external IDE. A program like BBEdit or Notepad++ will color-code your markup and handle closing tags for you.
- Use the right doctype. You should have exactly one doctype a page. If you do resort to using tags like  and <center>, it's not HTML5. Use a different doctype.
- Check religiously with an HTML validator. A few are linked below.
- Read documentation. As a hobbyist, you should take pride in what you're building. Tesserae features additional reading links at the bottom of each guide for you to learn more about the topic at hand.