3.2 Making Our Document Valid

In the previous lesson, we marked up a very simple document using heading into paragraph elements. And when we viewed it in the browser, we saw how drastic of a difference it is between a document that is not marked up with a document that is marked up. Now, the interesting thing is that our HTML document is what we call invalid. It's missing some very important things and this is interesting. Because even though it is an invalid, the documents, we see that the browser is still renders it. Now there's a whole history as to why this takes place, but all you need to know is that the browser is going to take your HTML be it a valid or an invalid document and it is going to try to render that document. Now we should always strive to create valid documents, because valid documents means that our document is going to work or at least it should work the same in any browser and that is what we want to achieve. So in this lesson, we are going to take our invalid document and we are going to make it valid. The first thing we need is a document type declaration. This essentially tells any machine or program that's going to load, or read our HTML document that it is an HTML document. So on the first line, we're going to add an open angle bracket or a less than sign, whatever you want to call it. Followed by an exclamation point and then the term doctype, D-O-C-T-Y-P-E and then a space and then html and then a closing angle bracket. So we have what looks like an opening tag for an element, but it is not. This is a processing instruction that says that the doctype or rather the document type is HTML. So we have our doctype. The next thing we need is the HTML element. This is what we call the root element. This is what is going to contain everything else within the document and an HTML document has a root element called HTML. So eventually we're going to take all of our content here and we are going to put it inside of the HTML element, but there's a couple of other things that we need to do. First, we need to add an element called head. This is inside of the HTML document, because an HTML document is divided into two parts. We have the head and then we have the body. Now the head is not the header, at least as you would think visually. If we go to a website, let's try amazon.com. Usually the header of a website is here at the top. So what we see in this dark, grey area would be considered the header. This is not what I am talking about with this head element. What is contained inside of the head element is header information about the document. So we would have a title for our document. And in this case, we could use what we have for this h1 element, Introduction to Web Development. So this could be the title of the document. And so anything that opens up this HTML document for rendering or for other purposes, you would know that the title is what we have specified here. We can also add other metadata. In fact, there is an element called meta and you can add a variety of other pieces of information. We can also add our styles here. We can also add JavaScript here as well, but we're going to refrain from doing that. We are just going to have a title inside of the head element. So we have head and then the body. Now, the body is where the content of the document is going to be contained. So that is everything else that we have. So we want to take all of this. Let's cut it and let's paste it inside of the body element. So we have essentially said that to all of this is the body of our document. And so we end up with the document that is highly structured. An HTML document is a document made up of multiple elements and those elements can be contained inside of other elements. So I'm just going to structure all of this, at least visually. So that if we were to open up this document in some other editor, then based upon the white space, we could tell what is contained inside of other elements. So for example, the head element is very noticeably inside of the HTML elements. Now, we can get rid of the tabs and it's not going to affect how it is viewed within the browser. But from a code standpoint, we want all of this whitespace it just makes things a little easier to read. So as we scroll down, we can see that all of these p elements and the h3 elements, they are all contained inside of body. Now if they were not inside of body, then we would have an invalid document. Because the body is where all of this stuff is contained while you can put this h1 inside of the head element that is invalid. Now if we go to the browser and refresh, we're not going to notice really anything different here. Now, we see this document does look different. In fact, we see that we have essentially two of the same document that we have before. The reason is because it is updating as we update our documents in brackets. So if we refresh, then we see what we saw before, but it looks almost the same. There's a slight little difference as far as the styling is concerned, but that's not very noticeable. Because it's padding and margins, and things like that. And we will talk about all of that whenever we start talking about styling. So now that we have a valid document, we can start adding more elements to it. Because for right now, we've just used h1, h3 and p elements. But there are a lot of other elements that we can use in an HTML document and we will look at some of those in the next lesson.