Monday, December 17, 2007

What is a DOCTYPE? Part 1 of 2 - TUTORIAL

Audience: Those with at least a basic understanding of HTML and CSS.

If you view the HTML code of a webpage, there is a good chance you will see the following text (or something similar) at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why is it there, and what does it mean?

To get a clear understanding, we need to go back in time..

When HTML first arrived in 1993, it was in a much simpler form than it is today. For example, the first version of HTML didn’t have as many tags (there was no <div>, no <span>, among others) not even any CSS. HTML’s creator (Tim Berners-Lee) specified what tags could be used in HTML, and what they would mean. For example, he said the <h1> tag could be used in HTML to mean a heading. This list of tags and their meanings became known as the “HTML specification”.

As the internet became more popular, competition between the web browsers to be the most popular was also growing. In order to try and separate themselves from others on the market, some web browsers began introducing new tags that were not part of the original “HTML specification”. This caused a major problem: some web pages were being created with tags that not all web browsers could understand. Eventually, many people agreed that the original “HTML specification” should be updated to a second version, and should include as many of the new tags as possible.

This is exactly what happened. HTML was upgraded to version 2.0, and included many new tags, and the removal of some old ones. This created a new problem for web browsers. If HTML was going to keep getting upgraded to newer versions, it would mean that some (older) web pages would still exist on the internet written in older versions of HTML. How was a web browser supposed to know which version of HTML a web page was written in?

This problem was solved by asking web designers to place some special text at the top of a web page’s HTML code. This special piece of text lets the web browser know which version of HTML the web page is written in. This bit of text is called, in technical terms, a document type declaration, because it is declaring which type (or version) of HTML is being used.

If a tag is found in a particular HTML version, then it is considered to be a “valid” HTML tag (for that version). Each time HTML is upgraded to a new version, the list of “valid” tags for that version is compiled together in a document called a document type definition (or DTD). It has this name because the DTD defines which tags are valid for the type (or version) of HTML being used.

So that special bit of text that you sometimes see at the top of HTML code is a document type declaration, which is letting the web browser know which version of HTML the webpage is written in. In the example below, it's XHTML 1.0 Transitional, one of the latest versions of HTML.



You will also notice a link to the document type definition for XHTML 1.0 Transitional (a list of all valid tags for this version of HTML). See below.



You can even type that web address in to your browser and view the DTD, but please note that figuring out how to properly read it would require a tutorial of its own!

Additional tips:
* DOCTYPE is short for 'Document Type'.

NEXT: Part 2 of the 'What is a DOCTYPE?' tutorial.

---

Please comment on this tutorial, and let me know if there's any way I could have improved it. Most importantly, what could I have done to make it easier to understand?
Posted by at 1 comment:
Labels:

Five simple rules that online tutorials should follow

Although this blog (for now) is going to focus only on web development tutorials, I believe that the qualities that make a tutorial easy to understand are universal. So here we go:

5 Simple Rules that every person who writes online tutorials should follow:

*Always define your audience, and write only with them in mind
Decide who you are writing the tutorial for, and any required skills/knowledge they should already have. When deciding on this, remember that you want your tutorial to appeal to as many people as possible.

*Do not introduce any new concept or idea unless you are certain that the target audience knows precisely what you are talking about
This is the number one failing of almost every online tutorial. You're reading a tutorial on an introduction to HTML, and you're seeing terms like "web standards" and "cross browser support" without any useful idea what these terms actually mean.

*Don't use words that some people may not know the exact meaning of
This is referring to words in the language that the tutorial is being written in (in this case, english). For example, don't use words like "ambiguous" or "ubiquitous". Instead use "confusing" and "everywhere".

*Don't use any unnecessary words or sentences
Keep sentences as short as possible. Eliminate words that don't need to be there.

*Make it clear and obvious what problem is being solved by the new skill that is being taught
Another major common failing of online tutorials is that they begin explaining a concept without giving the reader a clear understanding of what problem it is solving. Every new technology and innovation in the history of mankind was invented to solve a problem. Before teaching the new concept, make sure the reader has a clear and practical idea (use examples) of what the problem is that is being solved. This will almost certainly involve explaining some history or evolution of the concept.

Coming up in my next post - my attempt at writing the beginning of a tutorial that will follow these rules. The tutorial will be on HTML DOCTYPEs, given that I touched on them in my previous post. The intended audience will be those with a basic understanding of HTML and CSS.

Can you help me improve these list of rules that every online tutorial should follow? Please make suggestions in the Comments section of this post.
Posted by at No comments:

Most online tutorials are very poor quality

I work in web development, and am often having to learn about new web technologies. Generally the first thing I do when I want to learn something new is Google for some online tutorials. Over the time I have spent doing this, one thing has become very apparent: Experts in a given field are not necessarily experts at teaching it.

How many times have you started reading a tutorial, and it begins introducing new concepts without explaining them? Or it uses words and terms that you don't understand?

I think it's obvious what the main problem is. The authors of the tutorials assume that the reader knows a lot more about the topic than they actually do.

Some time ago, I wanted to learn about DOCTYPEs (in relation to web sites). If you view the HTML source of a webpage, look right at the top and you'll see something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What is it? Googling around, I found out it had something to do with "XHTML" and "web standards". But what actually is it? What is it doing there? Why is it there? What problem is it solving? Don't bother trying to get your answer from an online tutorial about DOCTYPEs.

Let's take the opening paragraph from this online tutorial about what DOCTYPEs are (from ZVON):

"An XML document is valid if it has an associated document type definition and if the document complies with the constraints expressed in it. The document type definition must appear before the first element in the document. The name following the word DOCTYPE in the document type definition must match the name of root element."

WHAT?!

For someone who knows nothing about DOCTYPEs, how would they read that above paragraph? Probably something like:

What is an XML document? What do you mean "is valid"? I don't know what "document type definition" is, let alone what an "associated" one is. As for the last sentence... no clue.

I should of course be gentle. That sentence obviously made perfect sense to the author who wrote it, because he/she would understand all of the terms used. Perhaps the tutorial is aimed at people who have an existing thorough knowledge of related areas. But to a novice trying to learn about DOCTYPEs from that "explanation", it would be of no help at all.

In my next post, I'll list a simple set of rules that I think every online tutorial should follow (but almost none do). I hope this website/blog can be a reliable place for novices to get quality tutorials, examples of good tutorials, and links to other sites carrying good tutorials!
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)