When hand coding HTML, it’s easy to forget the humble <!DOCTYPE> element, which is the first line of HTML on any web page.
If you’re omitting this crucial element, then you need to read this page. You’ll find out what it does, why it’s so important and why it needs to always be included on every page.
What is a doctype declaration?
The doctype declaration is a line of code which you place at the very top of an HTML document, before the <html> tag even. It’s necessary for browsers to know which version of HTML you’re coding in.
HTML5 is the newest version of HTML, so that’s the one you’ll want to go with.
How to write a doctype declaration
In the past, doctype declarations were quite verbose and you would have to state which version of HTML you were coding in. The doctype declaration for XHTML 1.0 (an older version of HTML) looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Pretty ugly right? And hard to memorize. Now that we have HTML5, stating your version is a thing of the past. All you need to write is this:
<!DOCTYPE html>Just write that simple line at the top of your HTML file and you’ll be all set. Because <!DOCTYPE html> isn’t version-specific, that means it’s forward-compatible and will be valid as long as HTML itself is. You won’t need to worry about a new version of HTML coming out and your doctype becoming outdated.
What will happen if you omit your doctype declaration
So why is it so crucial? What will happen if you omit a doctype declaration?
For starters, your code will not pass the W3C validator test. Valid HTML is important for showing the world you’re not sloppy, and for getting a good ranking in Google.
Even worse, it’s likely that your HTML will not render properly in all browsers, because they don’t know which set of standards you want them to adhere to. This is called quirks mode, and was commonplace in the mid-90s before the idea of an HTML standard even existed. You want to stay away from quirks mode at all costs.
Remember the doctype!
All you need to remember is this, at the very top of your code:
<!DOCTYPE html>It’s that simple. Do you tend to forget important elements in your code? Tell us!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
