HTML Tutorial (Håvard's web site)

Introduction

So, you want to make web sites, eh? Well, sit down, relax, have a cup or two of your favorite beverage, and read on. This tutorial is written for the absolute beginner and I will assume nothing from you except basic competency with computers and a willingness to learn.

What is it?

All HTML tutorials start by stating what HTML stands for; this one is no exception. HTML stands for Hypertext Markup Language. The “Hypertext” part means that the text can contain links, or hyperlinks, to other documents (or even portions of another document). This is one of the key features of HTML; the ability to link to other people's documents directly. Compare this to books. If you read a book and that book contains a reference to another book, you'll have to lay down the current book and search your local library for the book that was referenced. Hyperlinks essentially work in the same way, only much faster, of course. The “Markup language” part means that the language contains markup. Don't worry; you'll soon understand what markup actually is.

Requirements

To start writing HTML you need a plain text editor and a browser. These two items are most likely already on your computer. If you're running Microsoft Windows, these two programs are called Notepad and Internet Explorer, respectively. They will work fine for learning HTML, but you may eventually want to use more powerful programs, such as TextPad (text editor) and Opera or Mozilla (web browsers). If you're running any other operating system than Windows, you will probably know where to get decent software yourself.

Memes

Before we go on to actually write any HTML, I want to imprint some memes (read: ideas) in your head. Don't worry, they're perfectly safe. And good for you.

The web is not Microsoft Word

What this means is that you should think about what a chunk of text really is, rather than how it's presented to the user. For example, it's common to use italic to emphasize text, for book titles and for quotations, among other uses. Whereas in Word you'd simply highlight the text and italicize it, HTML offers you many ways to mark up a given piece of text according to what it really is, rather than how it's supposed to be displayed (this is called “semantic markup”). And as a bonus, what's usually displayed in italic in print is also usually displayed in italic by default in the browser.

Internet Explorer is not the Internet

Internet Explorer is the name of one of many programs you can use to browse the Web with. I think this confusion might stem from the fact that on many desktops, the Internet Explorer icon is named “Internet”. And so one naturally assumes this is the only way to browse it.

HTML isn't programming

This point shouldn't be dwelled upon, but just mentioned: HTML isn't programming.

Plain HTML looks plain

I won't lie to you; plain HTML alone doesn't look good. Nonetheless, it's important that you learn it properly and thoroughly. Applying style to your pages using CSS, which stands for Cascading Style Sheet, becomes much easier when you're comfortable with HTML.

Also, note that the examples I show here will most likely not be shown exactly the same as when you make them. This is because of the CSS I use. Don't worry about this; you need to learn how to run before you can do a backflip.

Learning HTML isn't hard

If you know what a paragraph, a list, a heading, a table, and a quote are, you're halfway through already. Employing HTML efficiently, however, can be somewhat hard, at least at first.

Conventions

I use the following conventions in this tutorial:

Good, inline code is rendered like this.

Bad, inline code is rendered like this.

Blocks of good code are rendered like this.

Blocks of bad code are rendered like this.

Example renderings look like this.

So, ready to start writing HTML?

First document and basic document structure

What follows is about as basic a page as you can get:

Code listing 01: First document (view in browser)

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

<html lang="en">
<head>
<title>My first HTML document!</title>
</head>

<body>

<h1>Welcome</h1>

<p>Hello, world!</p>

</body>
</html>

Don't worry if it looks scary. We'll go through each line, step by step. First though, you should copy the code into a text editor, save the file, and view it in your web browser. If you're on Windows, press Start → Run and type “notepad” (without the quotes) and hit return. Now, select the HTML code block above, copy it, and paste it into your editor. Now click File → Save, select a destination (such as C:\html\) and a file name (such as first.html). The extension .html is important; it tells your computer to open the file in your default browser. Also, you should use quotes when adding the extension. Otherwise, the program might append its own default extension (mostly .txt) to it, so that first.html becomes first.html.txt. Now, open the file in the browser you're using.

If you've done everything correctly, you should see this. If that's what you saw, congratulations. If not, back-track and find out what you did wrong, then do it right.

The first line is our DTD, or Document Type Declaration. This tells the browser which version and/or flavor of HTML you're using. Don't pay too much attention to it just now, but make sure you include it at the very top in every document you make.

The next line, <html lang="en">, tells the browser that the HTML code starts here, and what human language it's written in.

Note: See ISO 639 for a full list of language codes you can put in lang="".

The next line contains the <head> element. Here's where information about the document is. For now, there's only one other element in there; <title>. The content of <title> is what will be displayed in the title bar of your browser, at the top.

The next element we bump into is <body>. This is where everything that should be displayed in the browser window, or canvas, should go.

Next up we have <h1>. The h stands for heading, and there are five more elements like it: <h2> through <h6>. <h1> is the most important heading, <h6> is the least important one. You should use these to make a logical outline of your document. They are usually displayed in a bold font, and bigger than normal text.

The next element we see, <p>, is probably the one you'll use most often. It's short for paragraph, and that's simply what it is. You see loads of examples of <p> on this very page.

The next two tags are the closing tags of <body> and <html>, respectively.

Terminology

This would be a good time to explain elements, tags, and attributes. An element is a piece of code wrapped around some text, such as this pseudo-code: <tag>Some text</tag>. <tag> is called the start-tag, and </tag> is called the end-tag. Together, they make up the element. The start-tag is what's between the two angle brackets (< and >). The end-tag is what's between the left-angled bracket and the forward slash (</) and the right-angled bracket (>). Content is what's between the start-tag and the end-tag. This is how most elements work: One tag opens the element, some content follows, and the other tag closes it. Some elements only have a start-tag, and no content; these are called empty elements, which we'll cover later.

Some elements may have attributes. Attributes contain additional information about the content, and are located in the start-tag. We've already seen an example of an attribute, namely lang. This attribute can be used on just about every element to describe which human language the content is written in. Attributes come in pairs; the attribute name and the attribute value. The value is enclosed in either "double" or 'single' quotes. Using our pseudo-code, here are some attributes: <tag first_attribute="first_value" second_attribute='second_value'>Some text</tag>.

Case

In HTML, it doesn't matter if your elements and attributes are in lowercase, uppercase, or even mixed case. <title> is interpreted the same as <TITLE> and <TiTlE>. Personally I like lowercase, but it's a matter of preference. However, versions of HTML that start with an X (that is, XHTML) require lowercase, so that's what I'll be advocating and using in this tutorial.

Mixed case is just horrible. I think you agree.

White space

In HTML, white space matters very little, and is therefor a great way to make readable code. This markup…

<    head    >

<    title    >Hello    and    welcome</    title    >

</    head    >

…should be rendered exactly the same as this:

<head><title>Hello and welcome</title></head>

This example is exaggerated; you normally wouldn't use that much white space. However, contrast the previous example with this:

<head>
<title>Hello and welcome</title>
</head>

Be careful where you use white space. This, for instance, won't work:

<h ead>
<t itle>Hello and welcome</t itle>
</h ead>

I'll leave it as an exercise for you to figure out why that doesn't work.

Diving in

Now it's time to start looking at the meat and bone of HTML; the multitude of elements.

There are two types of elements; block level and inline level elements. So far, we've only seen examples of block level elements. The main difference between the two is that block level elements create line breaks before and after them, while inline elements do not. Actually, that's not entirely true; block level elements, by default, take up 100% of the width they're given, and thereby “push” the content above and below them away. (It's worth mentioning that if you have a block element whose width is 20% and another one with the same width directly below it, the upper element still wouldn't give room for the bottom element.) By contrast, inline elements only take up the width that their contents require.

This implies that block level elements can contain other block level element and other inline elements, while inline elements can contain other inline elements, but not other block level elements. Don't worry if it doesn't make sense; it will, soon.

Linking

One of the key merits of the World Wide Web is the ability to link to other documents (or parts of documents) from your own. This is handled with the <a> element. Here's an example of a hyperlink:

Jones, check out this cool program I found. It's a web browser that has tabbed browsing and something called mouse gestures!

And the code:

Code listing 02: Linking (view in browser)

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

<html lang="en">
<head>
<title>My first link!</title>
</head>

<body>

<p>Jones, check out this <a href="http://www.opera.com/" title="Opera browser">cool program</a> I found. It's a web browser that has tabbed browsing and something called mouse gestures!</p>

</body>
</html>

href means hyperlink reference, and the address for the document you are linking to should go here. You can use absolute or relative URLs, and optionally include a fragment identifier. You'd use absolute URLs when linking to external sites, such as in the example above. But if you're linking to, say, a page in the same directory, you don't have to do <a href="http://example.com/directory/file.html">; you can simply do <a href="file.html">. If the file you're linking to is in the parent directory, you can do <a href="../file.html">. Of course, this works for arbitrary levels; <a href="../../../../file.html"> is perfectly legal.

You can also link to specific parts within a single document, using a fragment identifier. For this to work, the element you're linking to must have an id attribute. For instance, on my pages, all headings have id attributes. The code for the heading of this particular section is <h3 id="links">Linking</h3>. To link to that element, include a hash (#) followed by the id attribute value, after the URL. To link to this chapter about links, you can do <a href="html_tut#links">. Since I'm linking to a part within the same document, I can omit the filename (html_tut.php) and do <a href="#links"> instead. But that doesn't work for linking to other documents, of course. Fragment identifier can, as you might see, be used on both relative and absolute URLs.

Some browsers can extract all the links on a page, and display them to the user as a list. The text for each list item is the contents of the <a> element in question, or, if provided, its title attribute value. Therefore, whenever possible, try to make the link text make sense out of context. If the title attribute wasn't used in the example above, for instance, the user would be presented with “cool program” as the link text, which wouldn't help much. Instead, he's presented with “Opera browser” as the link text.

A very bad mistake that many people do is having “click here!” as the link text. Try to avoid this; not all users actually click when following a link (they might press buttons on their mobile phones, for instance), and those who do most likely already know how to follow links by clicking on them. It is, after all, an integral part of browsing.

A general tip: Indicative verbs, or command verbs, shouldn't be part of the link. Therefore, try to avoid <a href="…">Visit my uncle's web site</a>!. Instead, do Visit <a href="…">my uncle's web site</a>!.

Links can't be nested.

Line breaks

You can manually insert line breaks into your documents using the <br> element. You shouldn't use this too often, if there are other elements that better suit your content. An example of proper use of <br> is that of marking up a poem. Here's an example:

This bridge will only take you halfway there
To those mysterious lands you long to see:
Through gypsy camps and swirling Arab fairs
And moonlit woods where unicorns run free.
So come and walk awhile with me and share
The twisting trails and wondrous worlds I've known.
But this bridge will only take you halfway there —
The last few steps you'll have to take alone.

And the code:

Code listing 03: Line breaks (view in browser)

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

<html lang="en">
<head>
<title>My first line breaks!</title>
</head>

<body>

<p>This bridge will only take you halfway there<br>
To those mysterious lands you long to see:<br>
Through gypsy camps and swirling Arab fairs<br>
And moonlit woods where unicorns run free.<br>
So come and walk awhile with me and share<br>
The twisting trails and wondrous worlds I've known.<br>
But this bridge will only take you halfway there —<br>
The last few steps you'll have to take alone.</p>

</body>
</html>

Preformatted text

If you want to preserve the line breaks and spaces (remember, HTML truncates two or more consecutive white-spaces into one space) in your text, you can use <pre>. You would use this for, say, showing multi-lined computer code (there are other uses too, of course):

<pre>
function abbr($arg) {
  global $abbr_query;
  mysql_data_seek($abbr_query, 0);
  while ($current_row = mysql_fetch_assoc($abbr_query)) {
    if ($current_row['short'] == strtoupper($arg)) {
      break;
    }
  }
  return '<abbr title="' . $current_row['full'] . '">' . $arg . '</abbr>';
}
</pre>

This is how it renders:

function abbr($arg) {
  global $abbr_query;
  mysql_data_seek($abbr_query, 0);
  while ($current_row = mysql_fetch_assoc($abbr_query)) {
    if ($current_row['short'] == strtoupper($arg)) {
      break;
    }
  }
  return '<abbr title="' . $current_row['full'] . '">' . $arg . '</abbr>';
}

Images

You can insert images in your document with the <img> element. You should always include an alt attribute in your images; the value of alt will be displayed if the image isn't loaded into the browser (because the image isn't there, there's a network problem, etc.), and will be read aloud to users of speech synthesizers. You should also specify the dimensions of the image with the height and width attributes. This will force the browser to make room for the images before they're being downloaded. If you don't specify these attributes your layout might shift around a lot while the page is loading, which is annoying. Here's an example of an image:

My computer, seen from the front.

And the code:

Code listing 04: Images (view in browser)

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

<html lang="en">
<head>
<title>My first image!</title>
</head>

<body>

<p><img src="pics/comp/comp01.png" width="221" height="331" alt="My computer, seen from the front."></p>

</body>
</html>

The src attribute is for <img> as href is to <a>; it gives the URL of the image.

A little note on alt: If your images contain pure text, such as the name of your logo, you should avoid alt="Our logo". What good does that do, when you think about it? A better choice is to reproduce the text that's in the image, like this: alt="Shizzle Bar & CO.". If your images are purely decorational, you should provide empty alt attributes: alt="".

Lists

There are three kinds of lists in HTML:

Unordered (or bullet) lists,
ordered lists, and
definition lists.

The last list, used to state which lists exist in HTML, is an example of an ordered list. This is its markup:

Code listing 05: Ordered lists (view in browser)

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

<html lang="en">
<head>
<title>My first list!</title>
</head>

<body>

<ol>
  <li>Unordered (or bullet) lists,</li>
  <li>ordered lists, and</li>
  <li>definition lists.</li>
</ol>

</body>
</html>

Ordered lists are often represented with Arabic numerals (that is, 1, 2, 3, 4…), but this can be changed via CSS (which I'll cover in another tutorial). The <ol> tag, which stands for ordered list, opens the list and <li>, which stands for list item, denotes a list item. This is almost the same for unordered lists:

<ul> opens it,
<li> denotes a list item, and
</ul> closes the list.

Oh joy! That was also a list! Its markup is as follows:

Code listing 06: Unordered lists (view in browser)

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

<html lang="en">
<head>
<title>My second list!</title>
</head>

<body>

<ul>
  <li><code>&lt;ul&gt;</code> opens it,</li>
  <li><code>&lt;li&gt;</code> denotes a list item, and</li>
  <li><code>&lt;/ul&gt;</code> closes the list.</li>
</ul>

</body>
</html>

You'll notice two new things here: First, the <code> element, which is used to mark up a piece of computer code (<code> is an inline element, by the way), and some weird looking text beginning with an ampersand (&) and ending with a semi-colon (;). These are called character entities and are used to escape characters with special meaning to the browser, and to escape special, often “foreign” (depends on where you live, of course), charcters, such as the Scandinavian character “å” (å), the German “ü” (ü), the Spanish “ñ” (ñ), and the Greek lowercased zeta “ζ” (ζ). The characters with special meaning are the angle brackets (< and >), and the ampersand (&). Character entities begin with the ampersand and end in a semi-colon. How did I get the ampersand to be displayed in the browser if it's used to start an escape sequence? I wrote &amp;lt;. But how did I do the last one? I did &amp;amp;lt;. And so on, and so forth.

The last type of list, the definition list, is the most complex of the bunch (but not really that complex). It's a collection of definition terms and definition descriptions. Sounds confusing? Hopefully it'll become clearer with an example:

HTML: A markup language used to structure documents on the World Wide Web.
Elements: Piece of code to describe some content.
Jackie Chan: Kung Fu actor whose fight choreography has stunned the world.
Deus Ex: Computer game, one of the best of all times.

As you see, it can be used to mark up dictionary entries, among other things. Here is the code:

Code listing 07: Definition lists (view in browser)

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

<html lang="en">
<head>
<title>My third list!</title>
</head>

<body>

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to structure documents on the World Wide web.</dd>

  <dt>Elements</dt>
  <dd>Piece of code to describe some content.</dd>

  <dt>Jackie Chan</dt>
  <dd>Kung Fu actor whose fight choreography has stunned the world.</dd>

  <dt>Deus Ex</dt>
  <dd>Computer game, one of the best of all times.</dd>
</dl>

</body>
</html>

<dl> stands for definition list, <dt> stands for definition term, and <dd> stands for definition description. There can, as you may have guessed, be several <dd>s per <dt>. A dictionary is a good example (courtesy of dictionary.com):

Ledge: A horizontal projection forming a narrow shelf on a wall.; A cut or projection forming a shelf on a cliff or rock wall.; An underwater ridge or rock shelf.; A level of rock-bearing ore; a vein.
Marvel: One that evokes surprise, admiration, or wonder. See Synonyms at wonder.; Strong surprise; astonishment.

And its code:

Code listing 08: Definition lists, reloaded (view in browser)

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

<html lang="en">
<head>
<title>My third list, reloaded!</title>
</head>

<body>

<dl>
  <dt>Ledge</dt>
  <dd>A horizontal projection forming a narrow shelf on a wall.</dd>
  <dd>A cut or projection forming a shelf on a cliff or rock wall.</dd>
  <dd>An underwater ridge or rock shelf.</dd>
  <dd>A level of rock-bearing ore; a vein.</dd>

  <dt>Marvel</dt>
  <dd>One that evokes surprise, admiration, or wonder. See Synonyms at wonder.</dd>
  <dd>Strong surprise; astonishment.</dd>
</dl>

</body>
</html>

It should be mentioned that all these lists can be nested arbitrarily and infinitely, but the data in these nested lists must, of course, really belong there. Otherwise, there's not much point in marking them up. An example:

Peter, before we go on that trip, please go through this checklist:

Remember to bring:
- Your jacket
- Clean socks
- Drinks
- Irish coffee:
  - 1 Shot Irish Whiskey
  - 1 Teaspoon raw sugar
  - 1 heaping spoonful whipped cream
  1. Pre-warm a stemmed glass
  2. Pour in the whiskey
  3. Add sugar and coffee
  4. Float the whipped cream on top
Remember to not bring:
- Your mobile phone
- That ugly sweater

The code:

Code listing 09: Mixed lists (view in browser)

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

<html lang="en">
<head>
<title>My first mixed list!</title>
</head>

<body>

<p>Peter, before we go on that trip, please go through this checklist:</p>

<ul>
  <li>Remember to bring:
    <ul>
      <li>Your jacket</li>
      <li>Clean socks</li>
      <li>Drinks</li>
      <li>Irish coffee:
        <ul>
          <li>1 Shot Irish Whiskey</li>
          <li>1 Teaspoon raw sugar</li>
          <li>1 heaping spoonful whipped cream</li>
        </ul>
        <ol>
          <li>Pre-warm a stemmed glass</li>
          <li>Pour in the whiskey</li>
          <li>Add sugar and coffee</li>
          <li>Float the whipped cream on top</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>Remember to <em>not</em> bring:
    <ul>
      <li>Your mobile phone</li>
      <li>That ugly sweater</li>
    </ul>
  </li>
</ul>

</body>
</html>

Notice here that the lists are nested inside the list items, not the lists themselves.

Tables

Tables are a great way to present data that lends itself to rows and columns. Tables usually have one row and one column with header information, and the actual data inbetween. You then have to zero in on the particular cell you wish to extract data from. Here's an example table:

Example table
	Age	Sex	Location	Favorite color
Michael	17	Male	Minnesota, USA	Light green
Håvard	19	Male	Stavanger, Norway	Neon green
Stephen	19	Male	Queensland, Australia	Red
Magnus	17	Male	Skogn, Norway	Blue
Josh	18	Male	Ontario, Canada	Black
Alexander	18	Male	Oslo, Norway	Light blue

Of course, tables can be much more complex than this. And in Norwegian.

The code for the example table:

Code listing 10: Tables (view in browser)

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

<html lang="en">
<head>
<title>My first table!</title>
</head>

<body>

<table summary="A table used to exemplify the use of tables.">
<caption>Example table</caption>
<tr>
  <th></th>
  <th scope="col">Age</th>
  <th scope="col">Sex</th>
  <th scope="col">Location</th>
  <th scope="col" abbr="color">Favorite color</th>
</tr>

<tr>
  <th scope="row">Michael</th>
  <td>17</td>
  <td>Male</td>
  <td>Minnesota, USA</td>
  <td>Light green</td>
</tr>

<tr>
  <th scope="row">Håvard</th>
  <td>19</td>
  <td>Male</td>
  <td>Stavanger, Norway</td>
  <td>Neon green</td>
</tr>

<tr>
  <th scope="row">Stephen</th>
  <td>19</td>
  <td>Male</td>
  <td>Queensland, Australia</td>
  <td>Red</td>
</tr>

<tr>
  <th scope="row">Magnus</th>
  <td>17</td>
  <td>Male</td>
  <td>Skogn, Norway</td>
  <td>Blue</td>
</tr>

<tr>
  <th scope="row">Josh</th>
  <td>18</td>
  <td>Male</td>
  <td>Ontario, Canada</td>
  <td>Black</td>
</tr>

<tr>
  <th scope="row">Alexander</th>
  <td>18</td>
  <td>Male</td>
  <td>Oslo, Norway</td>
  <td>Light blue</td>
</tr>
</table>

</body>
</html>

There are five elements you should always keep in mind when making a table. These are <table>, <caption>, <tr>, <th> and <td>.

<table> opens the table, and </table> closes it. The next element is the <caption>. Here's where the title of the table should go. Notice also that on the <table> element there's a summary attribute. This is used to, well, give a summary of the table (HTML is so logical, isn't it?).

<tr> stands for table row, and all table cells must be inside a row, that is, they can't be directly inside <table>. <th> and <td> stand for table header and table data, respectively. (Collectively, they're called cells.) <th> should contain header information, such as age, sex, location and favorite color, in our example. Notice the scope attribute on the headers. These tell the browser which data cells (that is, <td>s) belong to that particular heading. The possible values for the attribute are row and col (col means column). There's another attribute, abbr, which is only used on the Favorite color header. This attribute is used to give an abbreviated form of the header information; it was only used on Favorite color since the other headers are really short anyway. Screen readers (software that reads content on website out aloud, usually used by blind people) will read out the full form (that is, what's in the <th> element) the first time they see it, and then read the abbreviated form every time they encounter it after that.

One cell can span several rows and/or columns. Here's where the two attributes rowspan and colspan come in. Their value is an integer which tells the cell how many rows and/or columns to span. For instance, we can modify our example table to have names on the left-hand side of the table, and credentials on the top:

Example table
		Credentials
		Age	Sex	Location	Favorite color
Names	Michael	17	Male	Minnesota, USA	Light green
	Håvard	19	Male	Stavanger, Norway	Neon green
	Stephen	19	Male	Queensland, Australia	Red
	Magnus	17	Male	Skogn, Norway	Blue
	Josh	18	Male	Ontario, Canada	Black
	Alexander	18	Male	Oslo, Norway	Light blue

The relevant code:

<table summary="A table used to exemplify the use of tables." class="normal">
<caption>Example table</caption>
<tr>
  <th colspan="2"></th>
  <th colspan="4">Credentials</th>
</tr>

<tr>
  <th colspan="2"></th>
  <th scope="col">Age</th>
  <th scope="col">Sex</th>
  <th scope="col">Location</th>
  <th scope="col" abbr="color">Favorite color</th>
</tr>

<tr>
  <th rowspan="6">Names</th>
  <th scope="row">Michael</th>
  <td>17</td>
  <td>Male</td>
  <td>Minnesota, USA</td>
  <td>Light green</td>
</tr>

<tr>
  <th scope="row">Håvard</th>
  <td>19</td>
  <td>Male</td>
  <td>Stavanger, Norway</td>
  <td>Neon green</td>
</tr>

[…]

<tr>
  <th scope="row">Alexander</th>
  <td>18</td>
  <td>Male</td>
  <td>Oslo, Norway</td>
  <td>Light blue</td>
</tr>
</table>

Admittedly this table becomes a little kludgy, but the point gets across.

Note: A lot of webdesigners misuse tables to lay out their content. Don't fall into this trap; layout is much better handled through CSS. For now, just accept that your pages will look plain.

Quotes

There are two ways to mark up quotes: <q> and <blockquote>. <q> should be used for short, inline quotations, and <blockquote> for longer ones. You shouldn't add quotation marks around the content of <q> (since your browser will do it for you), but you should for <blockquote>.

Code listing 11: Quotations (view in browser)

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

<html lang="en">
<head>
<title>My first quotation!</title>
</head>

<body>

<h1>Quotations</h1>

<h2>Inline quotations</h2>

<p>I remember sunlit days with my Ben. We used to take long walks in the forest, and he used to say to me <q>Charlotte, you look absolutely gorgeous in that dress.</q> That warmed my heart over and over again ...</p>

<h2>Blockquotes</h2>

<blockquote>
<p>"Our products have been awarded Best Product of the Year by several independent sources.</p>

<p>Our own estimates show that sales have increased by approximately 200% during the last two years."</p>
</blockquote>

<p><cite>Gordon Freeman, CEO of Snarks, INC.</cite></p>

</body>
</html>

There are two things that should be mentioned here:

<blockquote> can't contain bare text. That is, you need to include your text in, say, <p>, even if there's only one paragraph.
The <cite> element (which is used here to give information about where the quotation is from) is an inline element, and hence should be contained in a block level element (such as <p>.)

Note: Internet Explorer doesn't add quotation marks around the contents of <q> elements.

Phrase elements

The HTML phrase elements are:

<em>
<strong>
<dfn>
<code>
<samp>
<kbd>
<var>
<cite>
<abbr>
<acronym>

What all these elements have in common is that they are inline elements. There's actually not very much to say about these elements, so I'll just list them and explain the usage with examples.

<em>

Use this when you want to emphasize a piece of text. Note that this isn't really the same as italicizing text; it may render in an italic font in a graphical browser, but other browsers (such as speech synthesizers) might, for instance, raise the pitch and/or volume of the voice to indicate emphasis.

<strong>

Used when you want to indicate important words or when you're really frustrated and just need to vent! If you're really pissed off, you can combine <strong> and <em>, like this!

<dfn>

This is a very rarely-used element. You're supposed to use it when you introduce new words or phrases in your text. Example: <p>I love <dfn title="Famous singer. Used to be black.">Michael Jackson</dfn>'s songs <em>so much</em>!</p>

<code>

Used to mark up pieces of computer code. There are ample examples of this element on this very page.

Note that <code> is an inline element. When I do multi-line code examples, I use <code> in conjunction with <pre> to preserve the line breaks. XHTML 2.0 provides the <blockcode> element, which solves this.

<samp>

Supposed to be used to mark up sample outputs from programs, but is seldomly used. Example: <p>The text <samp>General Protection Fault</samp> is well-known to Windows users.</p>

<kbd>

Used to indicate text to be entered by a user. Example: <p>When in the prompt, enter <kbd>cd..</kdb> to go to the parent directory.</p>

<var>

I have never seen this used, anywhere. You're supposed to use this to mark up variables. Why you would want this in a general-purpose markup language is beyond me, but here is an example of its usage:

<p>This snippet of <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> code will set the variable <var>$foo</var> to bar:…</p>

<cite>

Used to indicate a quotation's source. An example can be found in the Quotes section.

<abbr>

Used to indicate an abbreviation. The title attribute is used to give the full form. Examples:

<abbr title="World Wide Web">WWW</abbr>
<abbr title="Deus Ex">DX</abbr>
<abbr title="What You See Is What You Get">WYSIWYG</abbr>
<abbr title="Trade Mark">TM</abbr>
<abbr title="United Nations">UN</abbr>
<abbr title="United States">US</abbr>
<abbr title="Internet Relay Chat">IRC</abbr>

Note that Internet Explorer currently doesn't support <abbr>.

<acronym>

A lot of confusion has existed over <abbr> and <acronym>, so <acronym> is about to be phased out, and <abbr> is supposed to be used instead. I believe this is the right thing to do considering that an acronym is really an abbreviation and an abbreviation isn't necessarily an acronym. Confused yet? Stay with <abbr> and forget about <acronym>.

Inserted and deleted text

This is fairly easy. Use <ins> to indicate that a piece of text is ~~put in~~ inserted, and <del> to indicate that ~~superfluously redundant~~ text has been deleted.

Generic elements

When all else fails, turn to <div> and <span>. These are generic block and inline elements, respectively. They are generic in that they don't have any semantics (read: meaning) attached to them. When browsers see them, they will acknowledge that they're there and put them in their internal list of the document structure, but won't do anything with them. Among other uses, <div> and <span> can be used to apply styles to text. Say you want to mark up movies you've seen, songs you've heard, and books you've read. HTML doesn't have <movie>, <song> and <book> elements, so you might use <span class="movie">, <span class="song"> and <span class="book"> to accomplish this.

class is used to, well, classify elements, while id is used to uniquely identify an element in a document. That is, no two elements in the same document can have the same id. ids are mostly used on elements that you would need to directly link to (as described in the section about linking), and on elements you want to uniquely style with CSS.

Validation

Like any other language (both human and computer), HTML has rules that authors should follow if they expect their pages to render decently in a given browser. Examples of rules:

Only block level elements can be children of the <body>.

This means that the following is illegal:

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

<html lang="en">
<head>
<title>Naked text on the body</title>
</head>

<body>

The body burns!

</body>
</html>

The <p> element can't contain another <p> element.

Thus, the following is illegal:

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

<html lang="en">
<head>
<title>p inside p</title>
</head>

<body>

<p>Here's another paragraph: <p>Yay!</p> And thus the first paragraph ends.</p>

</body>
</html>

All these rules are unambiguously defined in so-called DTDs. There's one DTD for every version and flavor of HTML. These include:

HTML 2.0
HTML 3.2
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset

So far in all the examples, we've used HTML 4.01 Strict. To tell the browser which version and flavor of HTML you're using you need to paste the following at the very top of your document:

HTML 2.0: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Never, never touch HTML 2.0 or 3.2 for any other reason than curiosity; these are old and archaic. I recommend you choose the Strict flavor of HTML 4.01, but if you need to use deprecated presentational elements or attributes, you can use the Transitional version (which includes these).

To check your documents for validity, you run them through a validator such as the W3C HTML Validator.

Beyond HTML

CSS

So, you've followed my tutorial and you've got some well-structured, yet highly simple and visually unattractive pages. This would be a good time to look into CSS. This is not a CSS tutorial, so instead I'll give a brief explanation of what it is, and then point you on your way to complete CSS tutorials.

CSS stands for Cascading Style Sheet. You use this to suggest styles that the browsers should use, such as borders, background-colors, margins, positioning of elements, font-sizes, and font-families. You can even use it to generate content before or after elements, and even do automatic counting!

westciv.com's Complete CSS guide: One of the few non-bullshit CSS tutorials out there.
htmldog.com's CSS Beginner's Guide: Another very good tutorial.

PHP

PHP, which is a recursive acronym for PHP: Hypertext Preprocessor, is a server-side scripting language which you can use to make your site “dynamic” in the sense that you can include whole files and make stuff appear at random, among other things. For instance, on my site, I include the navigation bar in every page I have with <?php include 'include/footer.php'; ?>. This makes maintaining it a lot easier; one change to the navigation bar means changing one file, compared to potentially having to modify thousands of files (unlike my site, large sites will have that many files). Another example of PHP usage is the random quotes in my header.

To find out more about PHP, head over to php.net.

Håvard's web site — HTML Tutorial

Jump to:

Introduction

What is it?

Requirements

Memes

Conventions

First document and basic document structure

Terminology

Case

White space

Diving in

Linking

Line breaks

Preformatted text

Images

Lists

Tables

Quotes

Phrase elements

Inserted and deleted text

Generic elements

Validation

Further reading

Tutorials

Writings

Useful

Accessibility

CSS zeal

Beyond HTML

CSS

PHP

Site navigation