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 how to handle older HTML files. The simplest version is in HTML 5 and is just a left angle bracket, an exclamation mark, the word doctype, a space, the word html, and a right angle bracket. That’s all that’s needed to begin a HTML 5 document. It’s a lot simpler than HTML 4 because HTML 5 decided to no longer base the specification on SGML. The older HTML 4 and earlier doctype declarations are longer because they need to specify an SGML document type declaration. There’s no way that I can read the older doctype lines over this podcast and have you understand what I’m talking about. You’ll know what I mean when you see one. Just know that the doctype gets much simpler in HTML 5. To me though, even the HTML 5 doctype still looks different than anything else in the file. I don’t know why it couldn’t have been simplified even further.
The next tag is html. You can actually leave this out in HTML 5 but I don’t know why you’d want to do that. Just go ahead and include a single html begin tag right after the doctype and make sure to put the ending html tag at the end of your document. Everything else should go inside the html opening and closing tags. Sometimes, I’ll refer to the beginning tag as an opening tag and I’ll refer to the ending tag as a closing tag.
The head tag goes inside the html tag and before the body tag. This is where you can specify things about the document itself such as the title. If you include a title tag, then it goes inside the head and the browser will then know what text to display as the title of the web page. If you want to define any presentation styles or include any CSS files, then you do these things inside the head tag.
And finally, the body tag is what defines everything that the browser displays on the web page. Everything you want to be visible to the user goes inside the opening and closing body tags.