Constructing a Web Page Skeleton

HTMLEvery webpage is written in HTML. HTML is what gives the webpage its structure. It has its own rules for communicating and these rules are called syntax.

HTML webpages are described by HTML tags. A tag is a keyword (tag name) surrounded by angle brackets <>. Tags are usually in pairs, with the first tag being the start or opening tag, and the last tag being the end or closing tag.  For example, these are the tags to form a paragraph.

<p>I am watching the World Series.</p> 

Whenever you open a tag, you should close it.

HTML stands for HyperText Markup Language. Hypertext is text with links in it. A markup language is a programming language that can turn text into images, tables, lists, images and more. It is a set of markup tags.

The first thing we do when creating an HTML document is to set up the structure, or skeleton.

On the first line write:

<!DOCTYPE html>

This lets the browser know what language it is reading.

On the next line put:


This begins the HTML document.

On the last line write:

This marks the end of the HTML document.

1 <!DOCTYPE html>
2  <html> 

3      I am watching the World Series
4  </html>

There are two parts to a HTML file, the head and the body.

The contents within the <head></head> tags provide information about the document.

Next we add an opening and closing head tag to the page:

1 <!DOCTYPE html>
2  <html>
3     <head></head>
       I am watching the World Series

5  </html>

Sometimes tags nest. That means you have one set of tags within the other. They need to be kept in order, so the most recently opened tag should be the first one closed. The head will contain the “title” tags. The content between the title tags is what we see in the browser’s title bar or tab.

Title tags look like this: <title></title>
They go within the head tags like this: <head><title></title></head>

Add the title tags to the document:

1  <!DOCTYPE html>
2  <html>
3      <head><title>The World Series</title></head>
4        I am watching the World Series

5  </html>

The contents between the <body></body> tags describe the visual page content. The space between the body tags is where you add the text, images and links. This is the content that will show on the page.

The body tags go right after the head tags, but still in between the HTML tags.

1  <!DOCTYPE html>
2  <html>
3      <head>
4          <title>The World Series</title>
5      </head>
4      <body>
5          I am watching the World Series

7  </html>

So here we have added some of the basic structure of an HTML document.



Leave a Reply