Once you know the basics of structuring an HTML document, it's a whole lot easier to begin writing and editing your own HTML files. In this chapter we're going to strip an HTML document down to its most basic parts. So we can just focus on just the essentials of what makes up an HTML file. So I have my browser, Chrome, open. And I've opened up from the Chapter_2 folder of our exercise files, 02_01, structure.htm. Now this is pretty simple.
As a matter of fact, this is about as simple as an HTML document can get. You can see on the page here, we just have a headline that says, Page content. And below that, we have a little bit of descriptive text that talks about the main page. Content appearing inside the body tag. Other elements that align and properly structure and format your content. Things like that. But it's really hard when we look at a page in the browser visually to determine what the actual structure of the document is. One of the nice things that most browsers give us, are some tools to allow us to inspect these documents.
So in Internet Explorer for example it has the developer tools. And in Firefox we have Firebug. And in Webkit browsers and in Chrome, we have what's known as the Webkit Inspector. So they allow us to sort of get a window into how documents are structured. If I right click this file and I choose inspect element. It opens up the web kit inspector and this gives me access to the actual HTML itself. You can see I can begin to expand this. Now, I notice that we start with just an HTML tag, that's just the topmost or root parent for my file.
And then inside that I have a head element. that has some tags inside of it. And then below that we have. The body tag and some elements inside of that. And I can see by just sort of mousing around. Through these that these visual elements that I'm seeing are indeed inside the body tag. So as I mouse around, I get some information about them. It shows me what element I'm looking at. So these are really handy tools. To allow you to go to a website, inspect that site and take a look at the HTML code. So if you've ever wondered how things like cnn.com are put together or other large websites you can browse to them.
Open up these developer tools and really go through the HTML and see how people are billing things. Now we're interested in just the basic structure of the document. So I'm going to leave the browser and I'm going to switch over to my code editor. And inside my code editor which is in brackets here, I've opened up the exact same file. Now this is just going to give us a cleaner format for going through the structure of the HTML itself. Okay, now whenever I'm teaching people sort of basic HTML document structure, I always reference a sandwich, and that's because.
In a lot of ways you can compare an HTML document to a sandwich. To have a sandwich, you first need two pieces of bread. Well, the same is true for HTML tags. I need an opening HTML tag and it needs a closing HTML tag. Without those, I don't have a sandwich. Without two pieces of bread, I don't have a sandwich, I have a salad. Without those I don't have an HTML document. Now at the very top I have the DOCTYPE declaration. What this does it tells user agents which version of HTML I'm going to be using.
Below that we have the actual HTML itself which again starts and ends with the HTML tag. Now inside that we have two main regions, we have the head. And we have the body. The head, if I go back to my sandwich, you can think about this as the condiments really. Like mayonnaise, mustard, things like that, lettuce, tomatoes. The things that makes you sandwich better, but don't necessarily define it. So within the head of the document in HTML, you have all the things that go into making the document work.
Below that we have the body and you can think of the body region as sort of the meat of the sandwich. This is the roast beef, the provolone, you know all the things that make a sandwich what the sandwich is. Within the body tag, you're going to have all of the visual elements on the page. So in this case a heading one and a paragraph. You're could have your main content, your sidebars, your footers, all the visual content on the page are going to appear within this body tag. That is absolutely as complicated as html documents get.
That's it. You're always going to have in an html document, you're always going to have the html tags. You should have a document type declaration at the very top. But you're always going to have your HTML tags. You're going to have the head region where all of the invisible elements that make the page work are going to go. And below that you're going to have the body region which is where are your visible elements go. Now you could certainly have a lot more in your document and a lot more going on. But the basic structure of your HTML page is going to be this. So now that we've gone over the overall structure of the page. We're going to use the rest of the chapter to focus on each area individually.
We're going to start that in our next exercise when we discuss the document type declaration.
- Why is HTML important?
- Exploring an HTML document
- Formatting content
- Displaying images
- Using nav, article, and div elements
- Linking to pages and downloadable content
- Creating lists
- Controlling styling (fonts, colors, and more)
- Writing basic scripts