Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!


  • The web is in a huge transition moving from XHTML to HTML5
  • This is a slow process since HTML5 is not yet a standard, not until 2014
  • Only modern versions of browsers support HTML5 features & not all features yet
  • Most existing websites were created using XHTML
  • All new websites should be created using the HTML5 doctype
  • You must have the HTML5 doctype in order to use the new HTML5 tags
  • When working in Dreamweaver we can set the default doctype
  • The doctype tells the browser what rules to use to display the web page
  • You can have strange CSS issues if you do not list a doctype
  • HTML5 has added new tags to the language to better describe the content areas of a web page, new built in features depending upon the browser and version, and also added some built in browser support for elements that used to require additional plugins to run such as movies
  • Here are some examples of new HTML5 tags
    • header
    • footer
    • article
    • section
    • aside
    • nav


Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • XHTML Document Type 0:37
  • Set Default Document Type 2:31
  • HTML 5 Document Type and Comparison 4:21

Transcription: HTML Versions & DOCTYPE

I now want to talk about HTML and HTML versions. 0000

And in the last couple of years there is been a lot of talk in the regular media, even about versions of HTML.0004

I want to go through and give you a discussion or a brief description of prior to HTML5 and also actual HTML5 and what the situation is.0014

Because it is something you are going to have to address when you decide to create webpages.0028

You have to make a decision at this point in time, which route you are going to go.0032

So, let us take a look in Dreamweaver at two different types of pages.0038

The first will be XHTML, which is the standard right now. 0042

The second will be HTML5, which is the upcoming standard that is supposed to be finalized next year, 2014.0047

So, let us take a look at those two pages. 0058

I am going to create a new HTML page in Dreamweaver, and I am actually going to create two of them.0061

This first one, when I created it, it was an XHTML transitional Doctype. 0070

What does mean is, that is the latest standardized version of HTML, and it used to be HTML up to HTML4.1. 0078

Then they decided to incorporate some XML features to the language and that is where the X comes from in the XHTML right here.0089

So, transitional is one of the three types that are available to you to use on your webpages.0102

The other two are strict or Frameset, and nobody does their pages in Frames any longer, that is a very old technology, so you will never use Frameset.0110

Once in a while I encounter people who do have to have it set up as strict.0121

But what I am going to do is show you where this is located. 0127

So, we are looking at the Doctype of an HTML document.0131

Every HTML page needs to start with the Doctype and Dreamweaver creates it for us.0138

But, should Dreamweaver do an XHTML transitional Doctype, or should it do an HTML5 Doctype?0142

So I am going to go to the Edit menu if you are on the Mac side it is in the Dreamweaver menu. 0152

Way down at the very bottom here at Edit, I am going to choose the preferences.0157

So, on the Mac side it is in the Dreamweaver menu for preferences, on the PC side it is in the Edit menu. 0163

And within the preferences area we have a new document category.0170

And what I have done is set this up as basic HTML, as the default document.0177

But notice the default document type also referred to as the DTD, standing for Default Document Type. 0184

And actually the DTD does not stand for what Dreamweaver says here, it stands for Document type definition.0193

Basically, what the Doctype does is tells the browser what rules to use to display the webpage.0203

So, right now it is going to follow the XHTML 1.0 rules, but within the strap down you can see there are some other options.0211

You have the option to set it up for HTML5.0220

Here is the XHTML Strict.0225

You can see Dreamweaver does not even list the Frameset piece because it is such an old technology.0228

What I am going to do is change the Doctype to HTML5.0233

I will click ok and now, when I create a new page, so I can go up to File new.0240

And I will just start at the left and create a new HTML page with no layout on it. 0248

Notice my Doctype over, here is HTML5, I will click create and we have a rather different looking Doctype in HTML5.0254

What I will do is put these side by side and within the window area, I will scroll down little bit here.0267

On the PC side we have tiling either horizontal or vertical, on the Mac side you just have the listing of Tile, 0274

Let me do these vertical and you will see them side by side, notice the difference.0282

First of all, this is such a complicated line 1, and I am referencing that because this is the line number.0289

This entire piece is the Doctype, and yes it is ridiculously long.0296

In order to simplify things when we are working on HTML5, they made it very simple.0303

This is it, does not really get much easier than that.0311

Also, line 2, shows the HTML, let me move this panel, open a little bit so, we can enlarge this. 0316

Notice the HTML tag and the XHTML document.0323

It has this XML name space that is what the XML and S represents, and what it is doing is providing additional information for the browser for this particular format of XHTML.0329

So, you can see this is pretty complicated in the XHTML piece that is why it is great that Dreamweaver creates it for you.0346

I would not have to want to hand code even in my HTML classes, I never make anybody have to type that out, and it is just too complicated.0354

But, this one on the left is much more simplified.0363

So, you need to make a decision if you are going to choose the HTML5 piece.0366

If you have pages that you are creating from scratch brand new website, you should be using HTML5 at this point.0372

It is not a standard yet until 2014, but that way you are prepared and browsers will support that type of Doctype now.0380

So, you can feel free to use it.0390

The other type of Doctype is what every webpage on the web, if the design was done probably less than a year ago or so, everything prior to that.0393

What you are going to end up seeing is this Doctype. 0406

I wanted to familiarize you with both of them and it is up to you when you are creating the page, as to which route you want to go.0409

But that is the difference between an XHTML Doctype and HTML5, notice this one says XHTML in parenthesis in Dreamweaver, the other one is blank.0418

So, if you are starting a new site from scratch and you are going to be building for the future, use the HTML5 Doctype.0432

If it is a website that already exists, more than likely, it is XHTML and it is up to you as you need or use new pages. 0441

You have to decide if you want to stick with that or if you want to make those new pages, HTML5, to prepare for the future.0450

I find most companies I work with are all in XHTML still, so most of the time that is the type of page I want.0460

But, within the preferences area, Dreamweaver makes it very easy to determine what you want.0469

You can set it as a default, or every time you create a new page, by going to File, New and creating a new page, you can set the Doctype on individual documents, as you create the pages.0475

It is totally up to you, Dreamweaver makes it really easy to make that decision in the program.0491

So that is the Doctype for HTML 5 versus XHTML 1.0.0498