197: HTML: The Bigger Picture.

You need to know more than how HTML tags work. There’s a structure that HTML documents should follow. Now that you know how HTML tags work from the previous episode, you can use that to create your own HTML pages. This episode will describe what makes an HTML file and also give you some history of HTML that you’ll need in order to understand how these tags can change. Listen to the full episode or you can also read the full transcript below. Transcript Now that you know how HTML tags work from the previous episode, you can use that to create your own HTML pages. This episode will describe what makes an HTML file. You start out an HTML file with a doctype declaration and this is followed with the html tag. The html tag forms the root of your document and surrounds everything else. You’ll find two main tags inside the html tag and these are head and body tags. Before I can explain the doctype, html, head, and body, you’re going to need some history. HTML has gone through several versions and this affects how you create an HTML document and how you write these four parts. I’m not going to try describing each version of HTML and all the differences between them. Instead, I’ll give you enough information that you can use to explore more details if you want. The major versions have been: • HTML 1.0: This was the original HTML released in 1991 and was just a document describing the tags available. • HTML 2.0: Was the first standard and was released in 1995. Companies wanted more and better websites than the standard could give and the browsers started offering custom tags. This meant that websites would not always work correctly if visitors used a different browser. I remember lots of websites back then that had messages saying “Best viewed with Microsoft Internet Explorer” or sometimes “Best viewed with Netscape Navigator”. Even today, I’ll sometimes try using a website with Safari and run into problems. Usually, switching to Firefox will fix the issue. • HTML 3.0 and HTML 3.2: Tried to fix the problems of too many custom browser tags but HTML 3.0 was too ambitious and could not gain support. HTML 3.2 came out in 1996 and scaled back some of the requirements that were in 3.0. • HTML 4.0 and HTML 4.01: First appeared in 1997 soon after HTML 3.2 and there were some minor changes in 4.0 which resulted in HTML 4.01 releasing in 1999. This version allowed web developers to specify how they wanted to migrate from previous specifications, either strict, transitional, or frameset. The older versions of HTML mixed markup with presentation and HTML 4.0 provided a new way to define how things should look, in other words, the presentation, by using style sheets. This is called cascading style sheets, or CSS, because of the way the presentation rules flow from one definition to another. I’ll explain CSS in a future episode. The migration choices allowed web developers to move into HTML 4.0 slowly. • XHTML 1.0: Came out in 2000 as a way to represent HTML 4.01 in XML. Both HTML and XML share a lot of similarities with HTML traditionally allowing web developers more flexibility and overlooking some sloppy HTML. XHTML tried to fix this by enforcing more rules about what’s valid. • HTML 5: First came out in 2008 because work on a new XHTML 2.0 was taking too long. The new XHTML version was dropped in favor of HTML 5. That brings us up to the present day. Most browsers today will support HTML 4 and HTML 5. Older browsers will have trouble with HTML 5. And now that you have this history in mind, you’ll be able to understand the differences in the four parts of an HTML document that I started explaining, the doctype, the html tag, the head tag, and the body tag. Let’s start with the doctype. This is the first line in an HTML document. It’s purpose is to let the browser know that this really is an HTML document. And for HTML 4, it also lets the browser know h