HTML Document types and such

Hey all,
There have been a few repeated issues and confusion over the document types that you want to be using for your webpages. Remember, if you are using Dreamweaver, when you create a new page you have have to select HTML5 from the list.
If you don’t, Dreamweaver defaults to XHTML 1.0 Transitional.  What does this mean?  It means you will not be able to use all of the super-cool new html5 tags (like <nav> and <audio> and <video>) and your pages will throw fits with browsers where some may work but most will probably not.
So, this is what you want the top of every page to look like for HTML5:

<!DOCTYPE HTML>  <!--This is declaring an HTML5 page -->
<html>
<head>
<meta charset=”UTF-8″>    <!--Character encoding declaration-->
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here</title>
</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

And what is the difference you may ask.  Here’s what the page looks link in XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>
<!--Character encoding declaration-->
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here!</title>

</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

So there you go.  If you don’t see <!DOCTYPE HTML> at the top of your page you are not working in HTML5.

Advertisements

Posted on 03/07/2012, in making it work, web. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: