Anatomy of a Web Page
Content
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Home » Affiliate Marketing Lessons » Site Building » Beginner » Anatomy Of A Web Page
Anatomy of a Web Page
In this lesson we're going to look at the Anatomy of a Web Page, a basic look at some of the more common structures that make up a web page. Even if you're not writing your HTML by hand, it's important to be able to recognize some of these things, particularly when you come to do your search engine optimization. Let's start right at the top!
<!doctype html>
1 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
The doctype declaration at the start of a web page is actually an instruction to tell a web browser what version of HTML it's written in. It used to be that you would read something like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Fortunately these days, HTML has been simplified a little, and all you have to write in that doctype declaration is:
<!doctype html>
<html> </html>
When you make a webpage, it will always include these two tags. They wrap around pretty much everything else on your page, to say "this is HTML".
The "header" section: <head> </head>
This part of the page is invisible when you look at the page in a browser, but provides the browser and the search engines with information about your page. Most importantly it houses your title and your meta tags. It might also tell the browser where to find any stylesheet files that you're using to set the colors, fonts and other styles for your site, or any scripts that you might be running on that page.
The page title: <title> </title>
What you put in between your title tags is the text that you want to appear at the top of your window when you look at your webpage; a lot of people neglect this when they build their pages! This is frequently the clickable text that ends up appearing in your search listing in the search engines as well, so it's good to put a couple of your keywords into your title tags. For instance:
<title> Pie Recipes | Key Lime Pie Recipe </title>
Meta tags
2 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
These also go inside your <head> section.They're meant to supply information to the search engines about how you want your page to be indexed: for instance, what the keywords are for your page, what description you want used in the search engine search listing, whether you want your page to be cached, etc.
Meta keywords: The keywords for your site. They are meant to supply information to the search engines about how you want your page to be indexed: For instance, what the keywords are for your page, what description you want used in the search engine search listing, whether you want your page to be cached, etc. The two meta tags that you'll be mostly interested in are the meta keywords and the meta description tags. Meta description: A succinct description for your page of 200 characters or fewer. This occasionally appears in the search engine results, underneath the clickable text, so it's good to write something compelling.
Body section <body> ... </body>
This is the main part of your webpage: the part that houses the stuff that people actually see.
Heading tags: <h1> ... </h1>, <h2> ... </h2>, <h3> ... </h3>
<h> tags denote headers throughout your text; <h1> is your "main header", <h2> is a sub-header, <h3> is a sub-sub-header, and so on, all the way to <h6>. For instance:
<h1> Key Lime Pie Recipe </h1> <h2> Ingredients </h2> <h3> Ingredients for the (Base ingredients go <h3> Ingredients for the (Filling ingredients
base:</h3> here) filling:</h3> go here)
<h2> Method </h2> (How to make the pie goes here!)
Your <h1> headers are particularly important for search engine optimization - you should try to put your
3 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Your <h1> headers are particularly important for search engine optimization - you should try to put your keywords into your <h1> headers (while obviously keeping it looking natural). <h2> headers can also have a little bit of an impact, so don't neglect those.
Links <a href>
Links are the text you click to jump from one page to another. A basic link looks like this:
<a href="http://www.example.com/page2.html"> Click here to go to page 2! </a>
The first part of the link starts with a href= (the 'a' part specifies that the tag is an anchor, while the href specifies that it the anchor contains a hypertext reference) The address of the page or site you want to link to goes in between the "" marks after that (ie, in place of the http://www.example.com/page2.html above) The second part of the link is the text or image that you want your visitors to see. It can be plain text (like we have above) or it could be an image. The third part of the link is what "closes" the link, and always looks like: </a>. If you don't close the link, you may find your entire page turns into one giant link!
Images <img>
The HTML for inserting an image into your page looks like this:
<img src="http://www.example.com/images/image1.jpg">
img (says that this is where you are putting an image) src (short for 'source', tells the browser where the image actually is) ="http://www.example.com/images/image1.jpg" (the actual location of the image) There is some extra information that you can insert into your image tag:
4 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
height and width: these are fairly self explanatory: you can specify the height and the width of the image in pixels.
<img src="/img/someimage.jpg" height="240" width="360">
This is useful because it tells the browser how much space to leave for images when it is rendering the page. This is good if you have lots of images, or really big images that take a while to load - otherwise your readers may find the text they're reading on a page is leaping around all over the place while the images on the page load. You can also resize images using the height and width values, but this isn't recommended - not only will your images end up distorted, but your viewers still have to download the whole image in its full-sized glory, and it will still take just as long to load. It's just made to appear smaller. alt: short for alternative text, this is the text that is displayed if, for some reason, the image doesn't load. The alt text is important for:
Accessibility (eg, for vision-impaired users who surf the web using screen readers). Some people can't actually see your images, so a written description of the image is highly recommended. Anyone surfing the web with images turned off. Alt text also may have a very small impact on on-page SEO factors; however, it's been abused so much in the past that the search engines often don't pay much attention to alt text anymore.
<img src="/img/someimage.jpg" height="240" width="360" alt="Here be my descriptive text">
Lists
Lists are extremely useful and deceptively powerful little things; There are two main types of lists: the ordered list, and the unordered list.
Unordered list
5 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Apples Bananas Pears Oranges
<ul> <li>Apples</li> <li>Bananas</li> <li>Pears</li> <li>Oranges</li> </ul>
The unordered list basically has no order. Each item has the same type of bullet. You can also have indented lists, like so:
Fruit
Apples Bananas Pears Oranges
Vegetables
Carrot Cabbage
6 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Lettuce Potato
<ul> <li>Fruit</li> <ul> <li>Apples</li> <li>Bananas</li> <li>Pears</li> <li>Oranges</li> </ul> <li>Vegetables</li> <ul> <li>Carrot</li> <li>Cabbage</li> <li>Lettuce</li> <li>Potato</li> </ul> </ul>
Ordered list
1. Cut a slice of bread using a big sharp knife 2. Put the bread in the toaster 3. Push down the "toast" lever of the toaster 4. Wait a few minutes until toast pops 5. Spread toast with topping of your choice
<ol> <li>Cut a slice of bread using a big sharp knife</li> <li>Put the bread in the toaster</li> <li>Push down the "toast" lever of the toaster</li> <li>Wait a few minutes until toast pops</li> <li>Spread toast with topping of your choice</li> </ol>
An ordered list will use numbers, letters or roman numerals as the bullet; you can specify the type of ordering in your CSS. Also, as with unordered lists, you can have multiple levels of indentation.
7 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Forms
If you've ever clicked a "submit" button, or sent a support request to a business through their website, you've used a form. Forms are parts of a page where your user can enter information through textboxes, drop-down lists, checkboxes and buttons.
First name:
Last name:
Male Female I have a bike I have a car I have an airplane
<form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="firstname"> <br /> Last name: <input type="text" name="lastname"> <br /> <input type="radio" name="sex" value="male"> Male <br /> <input type="radio" name="sex" value="female"> Female <br /> <input type="checkbox" name="vehicle" value="Bike"> I have a bike <br /> <input type="checkbox" name="vehicle" value="Car"> I have a car <br /> <input type="checkbox" name="vehicle" value="Airplane">I have an airplane <br /> <input type="submit" value="Submit"> </form>
<form>... </form> Opens and closes the form. You also use this tag to specify the file you want to send the information to.
8 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
to send the information to. <input> Creates some sort of input field. There are a few different types of these. The ones you'll be most familiar with are:
Text: This is a standard text field, like the ones you enter your username and password into to log in to a site. Checkbox: Creates a checkbox. Your users can tick as many of these checkboxes as they like. Radio: This one is like a checkbox, but it's round, and users can only choose one option. Not many people are both male and female! Submit: This creates the "submit" button.
Basic text formatting tags
These are some other tags you will encounter inside your HTML <p>...</p> You might have already encountered these tags in previous lessons. They're "paragraph" tags that wrap, unsurprisingly, around paragraphs. <strong>...</strong> Represents text that you want to have strong emphasis, or importance. In most browsers it has the effect of making the text bold. <em>...</em> Means "emphasis", and typically has the effect of making text italic. <br /> Creates a line break, similar to hitting "return" once on your keyboard. It doesn't need a closing twin.
Lesson Summary
9 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
In this lesson we've taken a look at the basic anatomy of a web page and how each section makes up different parts of a web page. The areas we looked at include:
<!doctype html> <html> </html> The "header" section: <head> </head> The page title: <title> </title> Meta tags Body section <body> ... </body> Heading tags: <h1> ... </h1>, <h2> ... </h2>, <h3> ... </h3> Links <a href> Images <img> Lists Forms Basic text formatting tags
10 of 10
9/4/2012 1:07 AM
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Home » Affiliate Marketing Lessons » Site Building » Beginner » Anatomy Of A Web Page
Anatomy of a Web Page
In this lesson we're going to look at the Anatomy of a Web Page, a basic look at some of the more common structures that make up a web page. Even if you're not writing your HTML by hand, it's important to be able to recognize some of these things, particularly when you come to do your search engine optimization. Let's start right at the top!
<!doctype html>
1 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
The doctype declaration at the start of a web page is actually an instruction to tell a web browser what version of HTML it's written in. It used to be that you would read something like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Fortunately these days, HTML has been simplified a little, and all you have to write in that doctype declaration is:
<!doctype html>
<html> </html>
When you make a webpage, it will always include these two tags. They wrap around pretty much everything else on your page, to say "this is HTML".
The "header" section: <head> </head>
This part of the page is invisible when you look at the page in a browser, but provides the browser and the search engines with information about your page. Most importantly it houses your title and your meta tags. It might also tell the browser where to find any stylesheet files that you're using to set the colors, fonts and other styles for your site, or any scripts that you might be running on that page.
The page title: <title> </title>
What you put in between your title tags is the text that you want to appear at the top of your window when you look at your webpage; a lot of people neglect this when they build their pages! This is frequently the clickable text that ends up appearing in your search listing in the search engines as well, so it's good to put a couple of your keywords into your title tags. For instance:
<title> Pie Recipes | Key Lime Pie Recipe </title>
Meta tags
2 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
These also go inside your <head> section.They're meant to supply information to the search engines about how you want your page to be indexed: for instance, what the keywords are for your page, what description you want used in the search engine search listing, whether you want your page to be cached, etc.
Meta keywords: The keywords for your site. They are meant to supply information to the search engines about how you want your page to be indexed: For instance, what the keywords are for your page, what description you want used in the search engine search listing, whether you want your page to be cached, etc. The two meta tags that you'll be mostly interested in are the meta keywords and the meta description tags. Meta description: A succinct description for your page of 200 characters or fewer. This occasionally appears in the search engine results, underneath the clickable text, so it's good to write something compelling.
Body section <body> ... </body>
This is the main part of your webpage: the part that houses the stuff that people actually see.
Heading tags: <h1> ... </h1>, <h2> ... </h2>, <h3> ... </h3>
<h> tags denote headers throughout your text; <h1> is your "main header", <h2> is a sub-header, <h3> is a sub-sub-header, and so on, all the way to <h6>. For instance:
<h1> Key Lime Pie Recipe </h1> <h2> Ingredients </h2> <h3> Ingredients for the (Base ingredients go <h3> Ingredients for the (Filling ingredients
base:</h3> here) filling:</h3> go here)
<h2> Method </h2> (How to make the pie goes here!)
Your <h1> headers are particularly important for search engine optimization - you should try to put your
3 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Your <h1> headers are particularly important for search engine optimization - you should try to put your keywords into your <h1> headers (while obviously keeping it looking natural). <h2> headers can also have a little bit of an impact, so don't neglect those.
Links <a href>
Links are the text you click to jump from one page to another. A basic link looks like this:
<a href="http://www.example.com/page2.html"> Click here to go to page 2! </a>
The first part of the link starts with a href= (the 'a' part specifies that the tag is an anchor, while the href specifies that it the anchor contains a hypertext reference) The address of the page or site you want to link to goes in between the "" marks after that (ie, in place of the http://www.example.com/page2.html above) The second part of the link is the text or image that you want your visitors to see. It can be plain text (like we have above) or it could be an image. The third part of the link is what "closes" the link, and always looks like: </a>. If you don't close the link, you may find your entire page turns into one giant link!
Images <img>
The HTML for inserting an image into your page looks like this:
<img src="http://www.example.com/images/image1.jpg">
img (says that this is where you are putting an image) src (short for 'source', tells the browser where the image actually is) ="http://www.example.com/images/image1.jpg" (the actual location of the image) There is some extra information that you can insert into your image tag:
4 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
height and width: these are fairly self explanatory: you can specify the height and the width of the image in pixels.
<img src="/img/someimage.jpg" height="240" width="360">
This is useful because it tells the browser how much space to leave for images when it is rendering the page. This is good if you have lots of images, or really big images that take a while to load - otherwise your readers may find the text they're reading on a page is leaping around all over the place while the images on the page load. You can also resize images using the height and width values, but this isn't recommended - not only will your images end up distorted, but your viewers still have to download the whole image in its full-sized glory, and it will still take just as long to load. It's just made to appear smaller. alt: short for alternative text, this is the text that is displayed if, for some reason, the image doesn't load. The alt text is important for:
Accessibility (eg, for vision-impaired users who surf the web using screen readers). Some people can't actually see your images, so a written description of the image is highly recommended. Anyone surfing the web with images turned off. Alt text also may have a very small impact on on-page SEO factors; however, it's been abused so much in the past that the search engines often don't pay much attention to alt text anymore.
<img src="/img/someimage.jpg" height="240" width="360" alt="Here be my descriptive text">
Lists
Lists are extremely useful and deceptively powerful little things; There are two main types of lists: the ordered list, and the unordered list.
Unordered list
5 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Apples Bananas Pears Oranges
<ul> <li>Apples</li> <li>Bananas</li> <li>Pears</li> <li>Oranges</li> </ul>
The unordered list basically has no order. Each item has the same type of bullet. You can also have indented lists, like so:
Fruit
Apples Bananas Pears Oranges
Vegetables
Carrot Cabbage
6 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Lettuce Potato
<ul> <li>Fruit</li> <ul> <li>Apples</li> <li>Bananas</li> <li>Pears</li> <li>Oranges</li> </ul> <li>Vegetables</li> <ul> <li>Carrot</li> <li>Cabbage</li> <li>Lettuce</li> <li>Potato</li> </ul> </ul>
Ordered list
1. Cut a slice of bread using a big sharp knife 2. Put the bread in the toaster 3. Push down the "toast" lever of the toaster 4. Wait a few minutes until toast pops 5. Spread toast with topping of your choice
<ol> <li>Cut a slice of bread using a big sharp knife</li> <li>Put the bread in the toaster</li> <li>Push down the "toast" lever of the toaster</li> <li>Wait a few minutes until toast pops</li> <li>Spread toast with topping of your choice</li> </ol>
An ordered list will use numbers, letters or roman numerals as the bullet; you can specify the type of ordering in your CSS. Also, as with unordered lists, you can have multiple levels of indentation.
7 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
Forms
If you've ever clicked a "submit" button, or sent a support request to a business through their website, you've used a form. Forms are parts of a page where your user can enter information through textboxes, drop-down lists, checkboxes and buttons.
First name:
Last name:
Male Female I have a bike I have a car I have an airplane
<form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="firstname"> <br /> Last name: <input type="text" name="lastname"> <br /> <input type="radio" name="sex" value="male"> Male <br /> <input type="radio" name="sex" value="female"> Female <br /> <input type="checkbox" name="vehicle" value="Bike"> I have a bike <br /> <input type="checkbox" name="vehicle" value="Car"> I have a car <br /> <input type="checkbox" name="vehicle" value="Airplane">I have an airplane <br /> <input type="submit" value="Submit"> </form>
<form>... </form> Opens and closes the form. You also use this tag to specify the file you want to send the information to.
8 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
to send the information to. <input> Creates some sort of input field. There are a few different types of these. The ones you'll be most familiar with are:
Text: This is a standard text field, like the ones you enter your username and password into to log in to a site. Checkbox: Creates a checkbox. Your users can tick as many of these checkboxes as they like. Radio: This one is like a checkbox, but it's round, and users can only choose one option. Not many people are both male and female! Submit: This creates the "submit" button.
Basic text formatting tags
These are some other tags you will encounter inside your HTML <p>...</p> You might have already encountered these tags in previous lessons. They're "paragraph" tags that wrap, unsurprisingly, around paragraphs. <strong>...</strong> Represents text that you want to have strong emphasis, or importance. In most browsers it has the effect of making the text bold. <em>...</em> Means "emphasis", and typically has the effect of making text italic. <br /> Creates a line break, similar to hitting "return" once on your keyboard. It doesn't need a closing twin.
Lesson Summary
9 of 10
9/4/2012 1:07 AM
Anatomy of a Web Page | Affilorama
http://www.affilorama.com/site-building/anatomy-of-a-web-page
In this lesson we've taken a look at the basic anatomy of a web page and how each section makes up different parts of a web page. The areas we looked at include:
<!doctype html> <html> </html> The "header" section: <head> </head> The page title: <title> </title> Meta tags Body section <body> ... </body> Heading tags: <h1> ... </h1>, <h2> ... </h2>, <h3> ... </h3> Links <a href> Images <img> Lists Forms Basic text formatting tags
10 of 10
9/4/2012 1:07 AM
