About HTML Validity
If you did the HTML 101 exercises (you did do the exercises, didn't you?) you successfully created some HTML and your browser displayed it happily for you! Bad news though. For the sake of brevity we left out a couple important things, and the HTML you wrote wasn't strictly valid. So, if it displayed OK in the browser, why do we care?
First off, it displayed properly in whatever browser you chose, but that's no guarantee that it'll do the same thing in other browsers, and you'll eventually learn you have absolutely no control over what browsers your visitors will be using. The best way to ensure that your page displays the same (or as similar as possible) in all browsers, is to make sure that the HTML you write is valid.
So, I've used that word valid a couple times. What does it mean when applied to HTML? Simply put, there are a couple general rules you gotta follow when creating HTML:
- Tags must be properly nested
- Attribute quotes must match
- Some characters aren't allowed in your content
- Some tags are only allowed as children of certain other tags
- We need a
Nesting HTML Tags Properly
An elements's closing tag must come before the closing tag of its parent, and after the closing tags of any child tags within it. An example of malformed and invalid HTML might look like this:
<p>Raising <strong>10<sup>3</strong></sup> you'd get 1000.</p>
If it's not immediately obvious to you why this is mistaken, that's OK. Learning to spot these subtle problems is part of learning how to develop on the web. The answer is that the
<strong> element's closing tag came before the closing tag of the
<sup> element that a child of
<strong>. Properly nested HTML would look like this instead:
<p>Raising <strong>10<sup>3</sup></strong> you'd get 1000.</p>
The child tag, in this case
<sup>, should have its closing tag before the closing tag of its parent.
Matching Quotes in Attributes
This one's easy: the quotation marks around the value of a tag's attributes must match. They must either both be single quotes:
', or double quotes:
". So, both of the following are wrong:
<!-- Mis-matched quotes --> <h1 class="mainTitle'>Importantest Title Evar!</h1> <p id='footnote1">The fear of gravity is called Barophobia</p>
The mis-match here even caused my highlighting to get all screwed up!
Forbidden Characters, and How to Display Them Anyway
Certain characters mean special things in HTML. Using them in a paragraph or any other content is liable to confuse the browser. The
> characters are good examples. These are used by HTML to define tags. If you try to use these characters withing your page's content, a browser might mistakenly believe you meant to begin or end an HTML element.
To work around this problem, HTML defines entities to display characters that might otherwise be interpreted as special HTML characters. The most common entities are:
<which denotes the less-than symbol: <
>which marks the greater-than symbol: >
&which will render the ampersand: &
HTML defines many, many more entities. If you find that your page is not displaying correctly, one thing to check for is whether or not you might have inadvertently used a reserved HTML character in your content when its corresponding entity should have been used instead.
Putting Child Tags Where They Belong
Some tags may only exist as children of certain other tags. The simplest example is the
<li> element, which should only be used as the child of a
<ul> or an
An HTML page is considered invalid if it doesn't have a proper
doctype should be the first thing in your HTML file. It tells the browser what version of HTML you've intended to write. There's an obnoxious and long (like, surprisingly long) history that goes along with
doctype, and it used to be that you needed to be extra careful about which one you'd specify. Luckily, those times are gone, and the proper
doctype for HTML 5 (which is what we've been writing all along), is simply:
Just make sure that's the first thing in any HTML you write nowadays, and you should be all set.
Checking HTML Validity
One of the first things to do if you find your page isn't displaying how you expect, is to run it through an HTML validator. The WC3 (the same group who define HTML, have an online validator at http://validator.w3.org/. When run against invalid HTML, it'll output a list of helpful error messages explaining what's wrong. Often correcting these problems has resolved problems I've had.
If you have any questions, please feel free to email me: firstname.lastname@example.org. There are a few more blog posts planned along these lines for complete beginners. Let me know if you'd like me to cover something specific. I'm also writing an eBook with the same audience in mind.