Doctype Made Easy

When you create a new page in Dreamweaver, the first line of code usually looks something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Ever wondered what that means? Understanding the docctype statement, as that line is called, requires a very, very brief history lesson. Don’t worry, I’ll make it brief.
HTML started with a very basic list of tags (and rules on how to use them) back in 1989. Over the years, more tags were added (and some removed), so HTML came out with version 2, version 3, version 3.2, version 4, and finally 4.1. XHTML was then developed. (To make it even more confusing, we have different versions of HTML 4.1 and XHTML — a “strict” version that has very strict rules, a “transitional” version that is a little more loose, and a “frames” version for sites that use frames.)
(Wasn’t that brief?)
These different versions of HTML and XHTML have slightly different rules for how — and which — HTML tags can be used in a document and how to format them. Just to give you a quick example, XHTML has stricter rules than HTML — the tags have to be lowercase and certain tags (<u> for underlining) can’t be used at all. In HTML, tags like <br> and <link> now require a “closing slash” in XHTML, so they must be written like <br /> and <link />.
So for optimized viewing of the site, the browser should be able to tell what version of HTML/XHTML you’re using. That’s when the doctype statement comes in. Compare these different doctype statements below:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
The doctype tag contains the information about which DTD, or document type definition, is being used, and contains a web address that links to the full explanation of that language.
Now, what’s great about Dreamweaver (which was the point of this blog) is that you don’t have to worry about keeping track of which tags you can or can’t use and how your code should be formatted. As soon as you set the doctype of your web site, Dreamweaver handles the code for you automatically. Even if you are used to hand-coding an <img> or a <br> tag in the old-school HTML way, if your doctype is set to XHTML, Dreamweaver automatically adds the closing slash for you.
You can change the docctype by typing Ctrl-J (Command-J for Macs) to access the page properties, then going to TItle/Encoding and changing the Document Type. (You can also right-click on the page itself and choose Page Properties.) Once you do that, Dreamweaver formats your code accordingly!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now: https://hubs.ly/Q01nc9dm0

2

During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!
https://hubs.ly/Q01n4gDJ0

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!

http://ow.ly/nf9250KKYNM

In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.

http://ow.ly/oWpI50KKCr0

Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant

https://hubs.ly/Q01lbPZG0

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch