02/24
Basic HTML Body Structure & Tags
From the past tutorials, we learned about the Head and Meta Tags and we also learned the tags for Images and Hyperlinks. Now we are going to dive into the main part of coding which is Body. The body will contain your content and I’m going to show you the basic markup that’s found in nearly all websites and blogs.
Table of Contents
1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome
Final Result
Basic Body Structure
Every site or blog contains the same HTML basic body structure. All sites roughly contain the following elements to their coding: Header, Navigation, Content, Sidebar, and Footer
Header – Usually comprises of big pictures, graphics, or a logo of your site. This part is what most people like to exaggerate on as it’s usually very appealing.
Navigation – Like its name, it’s the navigation part of your site. Your main links that will help navigate your audience through your site.
Content – The content section is usually where your main area will be that holds your content, posts, galleries, and such forth.
Sidebar – Although not really a necessity (it’s been a popular thing throughout many blogs), it contains additional information that may appeal to the user or even additional navigation items. (i.e Twitter Feed, Subscribe links, Search, etc…)
Footer – And finally, the footer is usually the place where the copyright is held although lately it’s been a trend where footers begin to hold extra information like recent posts, affiliates, short bios, and the list goes on.
If you break down any site to its core, you will begin to see the structure and also see that they are same. It’s the graphics, styling, and implementation of that structure that makes the website/blog all unique.
Let’s start off with some basic DIVs
The most common HTML tag you will see in a site other than a link tag or image tag is a DIV tag. I believe DIV stands for division which means, it makes a division or section on a site. This is true because that’s what it actually does. The DIV tags will take whatever’s inside them and treat them like it’s own section. So why is this useful?
DIVs will help your separate everything on your site and with CSS (Cascading Style Sheet), you can manipulate those sections. Let’s see how we can put it into use with what we know. Open up your HTML document (I’m using the index.html from the last tutorial)
The following is a basic html structure that will be put inside the <body> tags of your html site.
<div id="wrapper"> <div id="header"></div> <div id="navigation"></div> <div id="content"></div> <div id="sidebar"></div> <div id="footer"></div> </div>
You may notice my formatting on the picture is different from the posted code. Every designer have their coding preferences so it’s good to find yours as well. I like to tab in any element that’s a part of another element.
Speaking of that you may notice an additional div tag added in the beginning called “wrapper” and that div actually ends after footer meaning it contains all of those div inside. A “wrapper” is a popular div that most websites use to contain their site in. And with a wrapper you can do many things with CSS such as controlling how wide your site is, whether your site is left align, centered, or right aligned, and more.
To understand this better, I always like to think of the “wrapper” as wrapping paper and whatever is inside the wrapper is the gift. And from that analogy you can understand that all the stuff inside the wrapper is contained by the wrapper and takes the shape of it. In which case if my wrapper is 1200px wide, then all my contents inside is 1200px wide (unless it’s changed specifically with CSS).
In fact that’s how the DIV tag works in general. The DIV wraps all the elements that’s inside together, and these elements will follow the styling of that DIV.
Hopefully, you’re not lost with that. Let’s continue with something else you may have noticed.
What’s ID?
IDs and Classes
For any tags, we can give them a label: id or class
And they can be referenced as follows:
<div id="name"></div> <div class="name"></div>
You may be already asking, what’s the difference? Well, here’s an article that explains well the difference between ids and classes. In short, we use ID for cases where the element is unique and will only be used once per page and we use CLASS for elements that are going to be used frequently.
Examples for ID include: Header and Footer. For the most part, sites only contain one header and one footer on one page.
Examples for CLASS include: Thumbnails and Post Titles. These elements will appear all over your blog if you have posts.
Reminder that you can give an element a class and id. To fully understand the difference and how to use them is one of those things you have to work with and experiment. Again, I recommend that article about ids and classes to help you understand them in more detail.
Other Useful Tags – Paragraph and Span Tags
Some other useful tags that we will be discussing now is the Paragraph Tag and the Span Tag.
The paragraph tag is simply what it says. It’s mainly used to break off paragraphs meaning whenever you have a paragraph of information you would want to include all of that into a paragraph like below:
<p> This is a paragraph of information. P tags work just like a DIV tag whereas anything inside this P tag will take on the CSS styling of P tag. You can even add classes and an id to this so that it becomes unique to other paragraphs. </p>
When to use DIV tag or P tag?
It may be a stupid question but it’s a legit one. The real answer to it is “Yes, you could” but the preferred answer is “No, you shouldn’t”. You want to code your sites so that it’s semantically correct to a point. If you have a paragraph of text, then use <p> otherwise if your section contains a lot of elements in it then use <div>.
It’s up to you to figure out how to use these tags. The more you code the more you’ll understand them better. (Truth be told, as a freelancer, I didn’t know much on what these tags were. I just used them and the more I coded, the more I found out that it made sense to use P tags for blocks of texts and such forth).
And the last tag we’ll learn for today is the <span> tag.
<span> – from what I understand and use it for, is a tag mainly for text. So if you have a certain text or certain texts that require styling then I use <span> tags. Examples would be making certain text on the site a certain size if it’s a special word or something. You’ll see how I use it when we get to the real coding portion with CSS.
An example of using span would be like this:
<span>Red Text</span>
And that’s it.
Let’s put it all together
So we’re basically going to make a site right now. It won’t be styled, but it will be a functional page that has information, and that can link to another page.
We already have our Basic body structure in our <body> tag, so let’s fill in some of those sections.
<div id="wrapper"> <div id="header"> <span class="titles">My site Name</span> </div> <div id="navigation"> <a href="index.html">Home</a> | <a href="about.html">About</a> </div> <div id="content"> <p>This should be a paragraph of text, but I'm too lazy to make a block of them. You can do it on your free time.</p> <p>This is another paragraph of text that will contain more information.</p> </div> <div id="sidebar"> <p class="sidebar-text">Tiny information about this blog can be put here. This will act as a side bar soon.</p> </div> <div id="footer"> <div class="footer-info"> <span class="copyright">Copyright 2010 MySite.Com</span> </div> </div> </div>
And there you have it. The above is what the page actually looks like rendered in Firefox. Copy that code for both your index.html and about.html and you have yourself a site. Don’t just copy and paste and wait for the next tutorial. Play around with it and add more div tags or p tags. You will begin to see how it all matters in the next tutorial.
Conclusion
That’s it for this segment of Basic HTML and CSS. We covered the basic structure that goes into most websites, went through a few tags: DIV, P, and SPAN, and also talked about the difference between IDs and Classes. In our next tutorial we’ll be starting to use CSS. Although the next thing on the list is UL, LI, and OL, I will be covering CSS as well, since the next lesson will be a short post.
Before you head out, comment if you have any questions or even suggestions. I’m open to learning more and also making my tutorials better since I want everyone to understand them. Thank you for viewing my tutorial, and I’ll see you next time.
Download Source Files (.zip)
Additional Resources
Differences of IDs and Classes
Semantic Uses of Tags
6 Responses to "Basic HTML Body Structure & Tags"
-
February 27, 2010 at 6:56 PM
Question: on why did everything move to the right? Is it because you need css to put things where you want them?
-
February 28, 2010 at 3:48 PM
You mean left? Everything is defaulted to top left with just html. You’ll need CSS to move the divs and other tags around. Stay tuned to my next tutorial to learn more about CSS and what it can do.
