Let's talk about writing clean code. When I'm talking about clean code I'm talking about learning how to write code that's going to work on as many devices as possible. In order to do that, you need to know a little bit about the document object model, also called the DOM. When HTML5 was developed the main kind of driving goal is that they want to stick by the standard. That any new features should be based on HTML, CSS, the DOM, and JavaScript, and you can have a chance to learn about each one of those. But I want to talk about the DOM for just a little bit because it's going to help you understand the HTML a little bit better. One of the things about geeky computer scientists like myself is that we love trees. Not like trees out outside that are green and beautiful in the fall. We like mathematical trees. These tree-like structures that we can prove to be valid or invalid. So, when we talk about HTML as a tree we're talking about this idea that at the very root of the tree we are going to be creating HTML. Then, from that tree when we say, "I'm going to make an HTML document." We want to parts. We want the head over here, and we want the body. In the head we're going to keep all that kind of information that the user isn't going to see for the most part. The one difference is we might talk about the title, but we're going to have all of that kind of hidden stuff nobody really cares about. In the body is where we're going to learn to put all of our HTML five tags. So let's talk about HTML as a tree. In this case I'm showing you this idea that at the root of every HTML page should be what's called the HTML tag. That kind of thing that says, lets the browser know. I'm going to be giving you certain types of tags and here's how I want them to work. If we don't look at it as a picture, I can also kind of just tell you that every tree has three parts to a well-formed document. The Doctype, which is the version of HTML that you're going to be using. The head, which is all of the metadata or kind of extra information, and the body. The body is the displayable content. The thing that most people are going to get back when they do the request response cycle. So let's talk doctype. You are so lucky. When I was creating web pages at first and we were in HTML4, we had to come up with all these different ways to kind of explain whether our HTML4 was very strict standards or whether it was transitional. In HTML5, it's very simple to say, "No there's only one thing and it's called DOCTYPE HTML", and you're all set. For the head which is inside the head tag, we're going to have all this additional information used by the browser. So for instance you might want to say what language you're creating your page in. You could also include, and you really want to include what the title of your pages. When I am talking about the title I'm not talking about big kind of header that you see. I'm talking about the little tiny thing you see in the tab of your browser. Later, you might want to add supporting files as well. You might want to have CSS files that will style your page, or JavaScript that can add on different interaction, or really any type of add-ons that's going to change the way people view and interact with your site. Other than the title, the metadata is not displayed, people will not see it. What people do see is the information that's in your body tag. That body tag is the bulk of your page. So it's very important to write well formatted or tree-like code where you're making sure that every tag has an end. That you're not putting tags in weird orders. So, most of the content in the body is displayed by the browser but every once in a while there's a little bit of metadata in there too. But we're not going to hit that in this class. So let's look at an example. Right here, I have a file called template.html, and I'm displaying the code here on the screen for you. Can you find the three parts of a well-formed document? The first thing you want to look for is the Doctype. We've got that right here. Letting you know that this is an HTML5 document. We then have the HTML tag which was the root of our really scientific tree, and I'm letting people know I'd liked the language that it's displayed in to be English. In the head section we've got that metadata. Where it's telling us things like, "Hey, I know that there's lots of different keyboards and ways across the world to represent letters. I want you to use what's called UTF-8." Don't worry that just use it every time. Then the next part of my metadata is the title where we want to see it saying, "My First Page." That's it. That's two of the three parts. The last part is the body tag and it's displaying the content that we want to see on the screen. So let's look at this in a browser. What do I have? I have my title way up here, and my displayable content right down there. I have written the code, the next step you should always do is validate the code. Say, "I have written code it looks good, but I know that browsers are very nice and they make things display nicely even when I haven't written good code." So if you go to validator, that w3.org, you can check any website to see if the code is valid and you have three choices. You can upload the URL, you can upload a file, or you can actually copy and paste your code and put it right in there. In this case, I've put in the URL to template.HTML run Check, and yay, not surprisingly because I knew I was going to be taping this, it successfully checked. Don't worry about warnings. Warnings are usually in to cover themselves. What if you want to validate your file but your files aren't actually on the Internet yet? Let's walk through really quickly an example of how you can do that. Let's say that I have my file template.HTML and I want to check it. I want to point out to you that I went in and I changed the file and I put in an intentional typo. I spelled the closing tag for title incorrectly. So let's see what happens. And if the browser or the validator can find this. What I'm going to do is I went to validator.w3.org, and I'm now going to select the third option validate by direct input. I go back to my file command A or control A, if you're on a PC Command C, I copied all the code and now I want to put it in the validator. Hit check, up, and if we scroll down here I can make this a lot bigger for you. You can see that I did get two errors. Why did I get two errors when I only typed one error in? Well, validators are never perfect. So what error it found is it said, "I found the end of a file and I was not expecting that." Well the reason that happened is let's check out error number 2, it tells us, "Oh you forgot to close the title tag." So sometimes one error can cause a lot of error messages. So don't worry. I've seen as many as 50 or 60 errors that once I corrected one line of code it fixed more than 80 percent of those errors. So I'm going to go back over to my code, I'm going to fix it and put that title in and save it. Copy it again, put it in and I'm going to check again. This time checking complete no errors. So just to review, you really want to follow DOM structure if you want a well-formed page. Following that structure means you always use beginning and end tags. Also you close inner tags before outer ones. What that means is if you start a title tag You've got to end it before you end the body tag. You also will want to use valid attributes which is one of the things we're going to talk about a little later when we talk about images and basically parts of your page that need extra information. The problem with browsers is that they'll actually fix bad code for you. I always call them the helicopter parents of coding. It's like, "I know what you wanted it to look like so, that's the way I'm going to make it look on the screen." The problem is that doesn't always work for everyone. So, just because your site looks good to you when you're looking at it on your browser, doesn't mean it's right. You have to use a validator to check your code.
