Structure of a HTML document [#3] 03-02-2013, 05:35 PM
#1
Hello,
This is my third tutorial regarding web development, in this tutorial we will be covering the following topic:
The Structure of a HTML document
By structuring your HTML document it allows you to understand where your text needs to go, and where your images need to go.
So there are 2 main sections to an ordinary HTML document, these are:
- Head
- Body
Both of these sections have there own tags, which are: <head> & <body>
So what are they both for?
The <head> tag is where all of the background stuff will go, such as your styles, and your page title displayed on the window of your web browser. You also put your meta information which is how a search engine finds your webpage.
The <body> tag is where the actual content of your webpage goes within, so this is all of the writing, the images, the boxes, containers. Everything to do with the content of the actual web page goes within the <body> tag.
By understanding the difference between them, and what goes where, it will make your life a lot easier when we come to actual designing the website, with styles and then adding the content to the website.
Below is an image with a slight breakdown of the area's I've also shown you in split mode so that you can see the content.
WARNING LARGE IMAGE
![[Image: 134MW55.png]](http://i.imgur.com/134MW55.png)
Note: The image is for educational purposes, therefore I never updated the content so I could put some quick information on the coding side.
On the left of the image you can see the code, and on the right, you can see what it would look like on a webpage. As you can see, nothing within the <head> tag is displayed on the actual page (Please make sure you read the note so you don't misunderstand).
I hope this tutorial has helped you even if it just refreshes your memory.
This is my third tutorial regarding web development, in this tutorial we will be covering the following topic:
The Structure of a HTML document
By structuring your HTML document it allows you to understand where your text needs to go, and where your images need to go.
So there are 2 main sections to an ordinary HTML document, these are:
- Head
- Body
Both of these sections have there own tags, which are: <head> & <body>
So what are they both for?
The <head> tag is where all of the background stuff will go, such as your styles, and your page title displayed on the window of your web browser. You also put your meta information which is how a search engine finds your webpage.
The <body> tag is where the actual content of your webpage goes within, so this is all of the writing, the images, the boxes, containers. Everything to do with the content of the actual web page goes within the <body> tag.
By understanding the difference between them, and what goes where, it will make your life a lot easier when we come to actual designing the website, with styles and then adding the content to the website.
Below is an image with a slight breakdown of the area's I've also shown you in split mode so that you can see the content.
WARNING LARGE IMAGE
Spoiler:
Note: The image is for educational purposes, therefore I never updated the content so I could put some quick information on the coding side.
On the left of the image you can see the code, and on the right, you can see what it would look like on a webpage. As you can see, nothing within the <head> tag is displayed on the actual page (Please make sure you read the note so you don't misunderstand).
I hope this tutorial has helped you even if it just refreshes your memory.
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
![[Image: 55554992a5841bd20f42c7874078bd07.png]](http://gyazo.com/55554992a5841bd20f42c7874078bd07.png)
