START A COURSE

The HTML and CSS Blog:

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 isHTML4, 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.

HTML5

What Is the New HTML5 Doctype?

The Doctype for an HTML5 Page Is Remarkably Simple:

<!doctype html>

There isn’t even a number in the Doctypeit’s enough to identify that the page is using html language. Done. Sweet.

HTML5 Dinosaur

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.

<!doctype html>

doctype html5

Here are a few other details that are simplified in HTML5.

Simplified Character Encoding Meta Tag

HTML5 future cat

HTML5 cat has the future [image via HappyCog]

The 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

<meta charset=”utf-8”>

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?

bart simpson learns about UTF-8

[image via Tom McFarlin]

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 &theta; 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 futureplan 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.

UTF character encoding

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!

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.