HTML Tutorial

Step 3: Basic HTML Tags

Now that we have a basic feel for how HTML elements and tags work, it's time to see the most commonly used elements.

Basic Elements

<html>: Used to enclose all of your HTML code.
<head>: Used to contain information about your webpage that is not directly displayed.
<title>: Used to give the title to your webpage that is displayed in the browser's top window bar.
<body>: Used contain content that is directly displayed within your webpage.
<h1>: The header element used to display text headers of the largest size/importance. There are also 5 other header elements for smaller headings: <h2> through <h6>.
<p>: Used to contain paragraphs of text in your webpage. By default, paragraphs have a line of space above and below them.

Now here's some simple HTML code, and the resulting webpage, using all of these elements.

The Code

<html>
   <head>
      <title> My first webpage </title>
   </head>
   <body>
      <h2>All about HTML</h2>
      <p>
         It's possible to write a webpage in HTML... about HTML!
      </p>

      <p>
         Of course, there are           a lot of topics 
         that are more interesting.
      </p>
   </body>
</html>

The Result

One thing you may have noticed about the code: In the second paragraph the code used two lines, but the resulting webpage will display the text on a single line if it has enough room. This is a demonstration that the web browser will treat all white space the same. For text found inside a single element, the browser will put as much on the first line as it can while putting exactly one space between each distinct word. When it runs out of room it will simply wrap down to a second line below and start over.

You can put in 11 spaces between two words of text and the browser will read it as a single space. You can return once, twice, or 50 times between words and the browser will treat it as a single space. You can put in 1001... well, you get the idea. To put return space between paragraphs in this tutorial, this webpage is using the <p> tag. However, that's not the only way to separate text.

Text Elements

<br>: Used to put in a return line or line break. (A blank line of space.)
<hr>: Used to put in a horizontal line across the page.
<pre>: Used to put in a section of text in exactly the form it has in the code. (White space is represented exactly.)

Style Elements

<b>: Used to contain text that will be displayed with a bold font.
<i>: Used to put in italic text.
<em>: Used to indicate text that logically should be emphasized. The default presentation is to put the text in italics.
<sup>: Displays text as a superscript.
<sub>: Displays text as a subscript.

Once again, we have a code example and the resulting webpage to show off these HTML elements.

The Code

<html>
   <head>
      <title> My first webpage </title>
   </head>
   <body>
      <h2>All about HTML</h2>
      <hr />
         It's <em>possible</em> to write 
         a webpage <i>in</i> HTML... about <b>HTML</b>!
      <br />
      <br />
      <pre>
         Of course, there are           a lot of topics 
         that are more interesting<sup>1</sup>.
      </pre>
      <hr />
      1: Of course, that's just one opinion.
   </body>
</html>

The Result

One last note about these tags. You may have caught that the br and hr elements didn't have a closing tag. Only a single tag was used, but the / symbol was added at the end. These two tags are a special case because the elements didn't need to contain anything. So, this one modified tag was sufficient. Try playing around with the code in your text editor to see what effects different changes have.

<< Step 2 << >> Step 4 >>