HTML Tutorial

Step 2: Learning the Language

Now that you've gotten an example web page to be properly saved and viewed, it's time to understand what that code meant. The basic concept of HTML is that a document is made up of HTML elements defined using HTML tags. An HTML tag is surrounded by those less than and greater than signs: < and >.

HTML Code

<html>
   <head>
      <title> My first webpage </title>
   </head>
   <body>
      I just produced my first webpage.
   </body>
</html>

Above is the code we just used to make a webpage. The difference is that now some white space (in this case, tabs) have been introduced to make the code more human-readable. In either case the code works just the same. In this example code we're making use of 4 basic HTML tags: <html>, <head>, <title> and <body>.

Here's a look at one of those HTML elements:

This particular example element is used, surprisingly enough, to define the title of your webpage. This is usually displayed across the top bar of the browser window. Notice that the element requires an opening and a closing tag. These will always take the form of <tag> and </tag>, with "tag" simply being replaced by the name of the desired tag.

Notice that the tags come in pairs like <tag> and </tag>, with the second tag matching the first except for that extra '/' symbol. The first tag denotes the start of an HTML element while the second tag denotes the end of that element. Using this second tag with the backslash is sometimes referred to as closing your HTML element and is something you should always do.

The largest element in our HTML example is the html element. This makes sense since everything we're writing is HTML code. Within this all-encompassing element, we have the head element and the body element. The body element is used to contain everthing that you will display in your webpage. The head element is used to hold extra information about your webpage that probably won't be directly displayed. An example is the title element which we had in the above example to display a title across the top of a browser's window, but not inside the normal viewing window.

<< Step 1 << >> Step 3 >>