Website development and design blog, tutorials and inspiration

Anatomy of a Web Page

What is a web page?

By , 17th April 2001 in HTML/CSS

Web pages are built using a structured format called HTML. The various tags and attributes affect how the page is displayed in your browser. This article shows you the basic layout of any web page and introduces some of the basic tags to use.

HTML stands for Hyper Text Markup Language, which is system for annotating a document in a way that is syntactically distinguishable from the text

The Semantic Structure

HTML is very similar to XML in that it uses a strict collection of tags, which have both an opening and closing element. Each tag can have an attribute and a value, and each tag starts with a less than symbol and ends with a greater than symbol.

In this example we see an HTML tag which represents small text, text which is shown smaller than the standard font size. This tag is known as the "small tag". It has an attribute called class which has a value of mySmallClass. Classes are used to identify groups of tags, and we'll cover them later on. This first bit is known as the starting tag. Next we have the value of the tag; in this case it is the string "This is small". Finally we have the end tag, or closing tag. Closing tags always start with a less than symbol, followed by a forward slash, then the tag name. Every start tag must have a corresponding end tag.

  1. <small class="mySmallClass">This is small</small>

HTML tags can be nested (one tag can contain many others) to create a structure, or to display certain elements differently. In the next example we see the p tag, which is short for paragraph. This paragraph tag contains a small tag.

  1. <p>This is a paragraph which contains <small>small text</small> and normal text.</p>

Notice how each tag is opened and closed in sequence. First the P tag is opened, then the small tag, then the small tag is closed, finally the P tag is closed. Opening and closing of tags must be done in this order.

The HTML Document

The HTML document is a plain text file which typically has the file extension .html or .htm. It contains the HTML markup. In this example I am going to start from an empty file and add to it to create a basic HTML skeleton which you can copy and paste.

It is good practice to start tags on new lines, and indent with each addition of nested tags. This makes it much easier to read, and also easier to spot missing end tags.

A HTML document starts with a document type declaration, which tells the interpreter (usually an internet browser) what type of HTML, what version and what standards are being used.

A good document type to start off with is the standard HTML version 4 which is now widely supported. This should be the first line in your HTML document. You should note that the doctype does not conform to the standard HTML tag structure.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

After the doctype we tell the interpreter that we have HTML by including the html tag.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. </html>

Next we add in the html header tag called head. This is not shown to the viewer, but is used by the interpreter to control how the content is shown. It is also used to provide additional information to the search engines in order to better describe the page contents.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Your Title</title>
  5. <meta name="description" content="Your description" />
  6. <meta name="keywords" content="Your, comma delimited, keywords" />
  7. </head>
  8. </html>

Within the title tag there are several important tags which are used by search engines and affect how they "see" your web page. These tags should always be present as without them, search engines have to guess.

The tags are - the Title tag - this is used as the page title and is shown on search engine listings as well as the top of the internet browser. This tag is very important, as without it your page could be shown as "Untitled Page".

The next two tags are Meta tags. These are also important as they allow you to give a brief description and some keywords to the page. The description tag is used by the search engines to display a brief summary in the listings, while the keywords are used to help find matches with user searches.

Meta title and description in search engine listings
Meta title and description in search engine listings

All three tags should be used, and all three should be meaningful and relevant to your web page.

After the HTML header, we have the body. This is where all the web page content should go.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Your Title</title>
  5. <meta name="description" content="Your description" />
  6. <meta name="keywords" content="Your, comma delimited, keywords" />
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

Within the body tags we can add in our previous example text.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Your Title</title>
  5. <meta name="description" content="Your description" />
  6. <meta name="keywords" content="Your, comma delimited, keywords" />
  7. </head>
  8. <body>
  9. <p>This is a paragraph which contains <small>small text</small> and normal text.</p>
  10. </body>
  11. </html>

You should save the file and load it from within your internet browser. It should look something like this:

HTML Sample
HTML Sample

Some other tags you can use include:

  • <h1> - A heading tag</h1>
  • <h2> - A smaller heading tag</h2>
  • <i> - Makes text within the open and close tags italic</i>
  • <b> - Makes text within the open and close tags bold</b>

Adding Some Style

At the moment, our page looks a little dull. We can make it look better by adding some images and with the help of Cascading Style Sheets (CSS).

We can add images to the web page by using the img tag. Unlike the previous tags we have seen, the img tag does not have a closing tag. It has the ability to close itself. This is done by adding the forward slash before the final greater than, as shown in this example.

  1. <img src="picture.jpg" width="100" height="100" />

This will use the file called picture.jpg (stored relative to the current document) with a width and height of 100 pixels.

Style Sheets

Sometimes it is nice to add colour, or to change the font or the size of the text. This is done using CSS, or style sheet. A style sheet is another text file which assigns styles such as color, width, height, font, margin and padding, to an HTML tag or group of tags.

A style sheet is applied to a web page using a Meta tag in the header. This should be added anywhere within the section.

  1. <link rel="stylesheet" type="text/css" href="style.css" />

A style can be applied to a class - all the tags assigned to the class will take on the same styles, or to an id - just one tag.

In this example, I have created four paragraph tags. The first has no class or id. The second and fourth have a class of "testClass", the third paragraph has an id of "testId".

  1. <p>The quick brown fox jumped over the lazy dog.</p>
  2. <p class="testClass">The quick brown fox jumped over the lazy dog.</p>
  3. <p id="testId">The quick brown fox jumped over the lazy dog.</p>
  4. <p class="testClass">The quick brown fox jumped over the lazy dog.</p>

At the moment, when viewing this html it looks like this:

We can add different style to the style.css stylesheet to make things look better.

Firstly, we will look at changing the colour of the paragraph having the id of testId. This is done by using a CSS selector for an ID followed by the id we want to select. We then add the style changes between curly braces.

  1. #testId {color:red}

This will change the third paragraph only to be red. This only affects one paragraph as you can only have one paragraph with the same id - duplicate ids are not allowed. To select multiple tags, you should use a class. You can have any number of tags assigned to a class.

  1. #testId {color:red}
  2. .testClass {font-size:150%}

This will now make the two testClass paragraphs much larger font size. Notice how the first paragraph remains unchanged.

Sample HTML 2
Sample HTML 2

Style sheets are cascading, which means that the style cascade down into nested elements. Only the most specific style is used, so if you apply a style to a paragraph with italic text, the italic text will also use the same style as the paragraph. If you also apply a style to the italic tag, that will be used for the italic tag instead of the style for the paragraph.

This is only a brief introduction to HTML and CSS. Future tutorials will cover more specific functions in greater detail.

Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.