What You Learn in This HTML Lesson
This is an introduction to the new and simplified doctype for HTML5 pages. In the last tutorial you learned what a Doctype is, and how to declare the kind of Doctype your HTML web page is—HTML4, XHTML, or HTML5. This lesson focuses in more detail on the new HTML5 Doctype, and a few other changes in HTML5 that will make your coding life simpler and leaner.
What is a Doctype? (I Slept Through Your Doctype Tutorial)
The <doctype> declaration (DTD) tag defines the standard of HTML is being used. The <doctype> tag appears first in your HTML code, just before the <html> tag. It’s nice to inform the browser what to expect from your code; not only are you using the <html> tag to tell it which language is being used, the <doctype> tag informs it which version of HTML you intend to use.
What Is the New HTML5 Doctype?
The Doctype for an HTML5 Page Is Remarkably Simple:
There isn’t even a number in the Doctype—it’s enough to identify that the page is using html language. Done. Sweet.
Compare that to the Doctype for an XHTML document (oh, that’s so 2008, what a snooze):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
or the Doctype for HTML4:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
The older Doctypes included a path to the HTML specification on the W3C.org website, but since all web browsers know the HTML language, this is unnecessary. The HTML5 doctype eliminates this path, and leaves us with a simple, clean, elegant doctype.
Here are a few other details that are simplified in HTML5.
Simplified Character Encoding Meta TagThe character encoding meta tag (which is used to identify the available character set for your web page display) is now short and simple. HTML5 has made this tag easier to use, with only one attribute needed.
HTML5 Character Encoding Meta Tag
Old XHTML Character Encoding Meta Tag
The old character encoding Meta tag was much longer and included attributes not really needed by your web browser.
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
The new character encoding Meta tag gets right to the point.
What Is Character Encoding, and Why Should I Care?
This is especially needed for pages using multiple languages. The character encoding meta tag controls the available character set available for your web page. Specifying the correct character set means your web page, with symbols, special characters and international languages, will display as you intend.
Why Should I Specify the UTF-8 Character Set?UTF-8 is becoming the dominant international encoding of the web. Many web pages need to support more than one language. Even when writing in one language, you may require special characters not available in your character set.
For example, websites encoded in Latin-1 (ISO-8859-1) which occasionally need a Greek letter could use character codes for those letters, such as θ for ϴ. This approach would be cumbersome for an entire article published in Greek. The Latin-1 (ISO-8859-1) character set includes the Latin-based languages of the world. It includes most Western European languages.
The Unicode character set is universal, including the character set needed by the majority of the languages of the world. Using the UTF-8 character coding makes it much easier to manage multiple languages and character sets. UTF-8 just works. You can use it for almost any language, including pages with multiple languages. Even if your site is just English, it would be a good idea to use UTF-8 encoding in case you need internationalization in the future—plan ahead. Use UTF-8 encoding and you won’t have to change your web pages in the future.
At this time, approximately 81% of all websites specify UTF-8 character encoding, which can represent the widest range of languages.
Forget About the Type Attribute on Your Link Tags
Your <link> tags don’t need the type attribute anymore when linking to CSS stylesheets; it’s redundant. It makes sense we could skip the type attribute, since the rel attribute (relationship) has already indicated it is a CSS stylesheet, therefore the type attribute is unnecessary.
HTML5 Link Tag:
<link rel=”stylesheet” href=”style.css”>
XHTML Link Tag
In the old XHTML or HTML4 sites, the link tag looked like this:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Things are so much simpler in HTML5!