Further reading

Quick Introduction to HTML

What is HTML?

Why learn HTML?

Many web page authors build their web sites using commercial software packages, called web site builders. These packages shield the author from the HTML code they produce. This is a good thing, by and large, allowing authors to produce very elaborate and beautiful pages conveniently. So why bother with HTML?

Web page builders ultimately produce HTML. To make full use of a web page builder, and to understand its limitations, you should understand the HTML that it produces.

Often, you may want to alter a site, but don’t have access to the software with which it was produced. In this case, some knowledge of HTML is indispensible.

HTML files

An HTML file...

Tags and attributes

All commands in HTML are tags, which consist of a special keyword between angle brackets. For instance, the tag
indicates to emphasize the following text.

Most HTML tags require an end tag which looks just like the tag except the keyword starts with a slash, like this one:
which indicates to stop emphasizing the text.

So the HTML code
This is <em>emphasized</em> text.
is rendered in a web browser as

This is emphasized text.

A few tags, notably line break <br>, horizontal rule <hr> and <img> for images, are self-terminating, meaning they don’t take an end tag. The preferred way to code them is to end the tag with a slash, like so:
<br />, <hr />, <img.../> .

Any tag can also contain attributes, which provide further description for the element.

For example, the tag img which loads an image file into the document, requires a path to the image file, specified by the src attribute, and can take an alt attribute that gives an alternative textual version of the image. Such a tag might look like this:

	<img src="/path-to-imagefile" 
		alt="my image description" />

The attribute consists of attribute name, followed by an equals sign, then by the value, which is a character string in quotes.


There is a provision in HTML for code comments, which is text you can put in the code but does not show up in the web page.

You can use comments to make a memo to yourself about why you coded something in some particular way, or to “comment out” a chunk of HTML code that you want to disable temporarily.

Any text between the “begin comment” marker
and the “end comment” marker
is completely ignored by web browsers.

For instance, if your HTML document contains the code
<!-- This is just a comment. -->
the browser will not display the code.

Document structure

All HTML documents should contain at least the html start and end tags, to indicate where the HTML begins and ends. These html tags should enclose a single head block, followed by a single body block:

		The title and other coding information
		goes in this head block
		The part of your document that will show
		in the browser goes in this body block

Most of the content of the web page goes in the body block. Some information about the web page goes in the head block.

The title

The only head block tag we will discuss here is <title>. Typically, a web browser will display the title of the document in the top of the browser window. Also, in browsers that have a “bookmarks” or “favorites” list, the title is the name given to the document in the list.

For example, if you put the code
<title>My Web Page</title>
in the head block of your HTML document, the browser should put the text “My Web Page” at the top of the window when you look at your web page.


The information content of a typical HTML document is its text. Any text in your document should be enclosed in some kind of tag.

In most tags, white space such as consecutive space characters, tab characters, and line endings, are replaced by a single space. Line-breaking within a tag is handled automatically by the browser. (The <pre> tag is the one exception; see below.) To specify how the page text appears in the web browser, you must use HTML tags or styles.

To make a vertical break between sections of text, such as paragraphs or section headers, put the sections between separate pairs of block tags. There are several types of block tags.

To specify the formatting of the text (the font size, shape, etc) within a single line, use inline markup tags.

Paragraphs and lines

The simplest block tag is the paragraph tag, <p> which delimits paragraphs of text. Usually text in two separate paragraphs is rendered with extra vertical space between the paragraphs. So this code

		My first paragraph.
		My second paragraph.

is rendered

My first paragraph.

My second paragraph.

To force a line break within a paragraph, use the line break tag, <br /> (note that the line break tag is self-terminating, so it doesn’t require an end tag).

The one exception to the rule about white space is the case of text between the “pre-formatted” tags <pre>, within which the white space of the text is rendered as-is. For example, the code

		line   1
		line 2

is rendered

line   1
line 2 


There are six levels of headings, with tags <h1> through <h6>. Several such headings are used in this document to label the sections and subsections. The <h1> tag is usually reserved for the document title at the top of the page, and higher-numbered headings are used for the titles of different levels of subsections of the document.

It would mess up the formatting of this document to actually render an example heading here. But the code might look like:

<h1>My Document Heading </h1>

Each heading forms its own vertical block, and is usually rendered in a large font, or boldface or italic, according to the depth of its subsection.

Typically, a single <h1> heading is used at the top of a web page to display its title (so the <title> and the <h1> heading should have similar content).

Content markup

The following tags are used to mark up inline text. The browser is free to format such markup as it chooses.

stronger emphasis.
a citation or a reference to other sources.
definition of a term.
a fragment of computer code.
sample output from programs, scripts, etc.
text to be entered on a keyboard.
a computer program code variable or argument.
abbreviation (e.g., WWW, HTTP, URI, Mass., etc.).
deleted text
inserted text
marked (or hilighted) text
did somebody say: quote? (Note: this tag is ignored by some browsers.)

This is a whole passage inset from the text.

Formatting markup

italic text style.
bold text weight.
smaller font size.

Special characters

You can type most English text directly into HTML, and it will be rendered by a browser as it is typed. However, there are a few exceptions. Then there is the question of how to handle letters and symbols that aren’t in the English alphabet.

HTML defines a large number of special character entities. They are coded with an ampersand (“&”) followed by a keyword, then a semicolon (“;”). We list some of the most common here.

&lt;<less than
&gt;>greater than
&nbsp; non-breaking space
&copy;©copyright sign
&reg;®registered sign
&trade;trademark sign

Notice that the first three are necessary in HTML code because the ampersand is used to code character entities, and the angle brackets are used to code tags.

Many letters from Western European alphabets are also among the HTML character entities. For a complete list, see HTML 4 Character Entities.

Note that, while it is acceptable to include any particular character in a document this way, you should not not use the character entities for typing text, say, French or Greek. That is not what they are for. This is a job for a character encoding. By specifying the document’s encoding, one can accommodate (almost) any of the world’s writing systems.

Careful! A few punctuation marks used in English often cause problems. The most common are the “curley quotes” and “dashes”:

&lsquo;left single quote
&rsquo;right single quote; apostrophe
&ldquo;left double quote
&rdquo;right double quote
&mdash;“m” (long) dash
&ndash;“n” (short) dash

You probably don’t want to use HTML character entities to make curley quotes. But if you type these characters directly into your document, be sure that the character encoding makes it plain how they are to be interpreted. See Internationalization: Curley quotes and dashes.


HTML is especially well suited for outline-style documentation, such as this document. It provides several flexible types of lists, which may be nested.

Ordered lists

Numbered lists can be coded using the ordered list tag <ol>. Items in the list are indicated with the list item <li> tag.

The numbering style can be specified with the type attribute, which can take values "1" indicating to number with Arabic numbers, "a" indicating lowercase alphabetic style, "A" indicating uppercase alphabetic style, "i" indicating lowercase Roman numerals, "I" indicating uppercase Roman numerals.

For example, the code

	<ol type="I">

is rendered as

  1. first
  2. second
  3. third

Unordered lists

Unordered lists, whose items optionally marked by bullets, can be coded using the unordered list tag <ul>. Items in the list are indicated with the list item <li> tag.

For example, the code


is rendered as

  • first
  • second
  • third

The kind of bullets used to mark list items (for example, discs, circles, squares or none at all) can be specified by style properties.

Definition lists

A list of items, with definitions, can be coded with the definition list tag <dl>. The items are indicated with the definition term <dt> tag. The definition of each item follows the definition description <dd> tag.

For example, the code

	<dd>first definition</dd>
	<dd>second definition</dd>

is rendered as

first definition
second definition


Tables are one of the most powerful things in HTML. Beyond allowing for neatly organized table data, they are the only means in pure HTML to arrange material into columns.

The data in the table is placed between <table> start and end tags. Each row of the table is indicated by a table row <tr> tag. Each item in a row is indicated by either a table data <td> or a table heading <th> tag.

For example this code

	<tr> <th>header one</th> <th>header two</th> </tr>
	<tr> <td>data one</td> <td>data two</td> </tr>
	<tr> <td>data three</td> <td>data four</td> </tr>

is rendered as

header oneheader two
data onedata two
data threedata four

A single cell in a table can be made to cross multiple rows and columns by specifying its rowspan and colspan attributes.

For example this code

	<tr> <th colspan="2">headers</th> </tr>
	<tr> <th>header one</th> <th>header two</th> </tr>
	<tr> <td>data one</td> <td>data two</td> </tr>
	<tr> <td>data three</td> <td>data four</td> </tr>

is rendered as

data onedata two
data threedata four

The visual presentation of the table, including

are all dealt with by styling, which is the topic of another section.

For more thorough information on HTML tables, see Quick HTML—Tables.

Horizontal Rule

The horizontal rule tag makes a horizontal line across the page. It is self-terminating, so is coded as <hr />.

The visual appearance of the horizontal rule can also be specified by means of styling.

URLs—Uniform Resource Locators

Web pages are best when they contain references to other documents on the Internet, such as pictures and other web pages. A picture in a web page is a separate file from the HTML file, and when you click on a link in a web page, that might take you to another HTML file altogether.

All outside documents are referred to within a HTML document in the same way, using a URL, or Uniform Resource Locator. A URL indicates the means by which to get a file, which Internet site the file is on, and a path to that file.

A typical URL looks like this:


The protocol is the network communications protocol to use to get the file. It is often http, which stands for “hypertext transfer protocol”, which is the main protocol of the World Wide Web. The server is the Internet address of the server the file is on, for instance “”. The rest of the URL is the directory path and filename of the file.

The protocol and server address can be left off to indicate that the file is on the same server as the current web page. If the URL begins with a slash, the directory path is assumed to be relative to the default directory of the server:
If the URL doesn’t begin with a slash, the directory path is assumed to be relative to the current HTML document


An image can be included in a web page by means of the image tag <img>. The image itself is contained in a separate file, usually either a GIF or a JPEG file. Generally, code like
<img src="URL-to-imagefile" alt="my image description" />
where URL-to-imagefile describes the location of the image file to be displayed.

The size of the image isn’t known until the image is successfully loaded. You can leave space in the page for the image by specifying the width and height attributes of the image tag.

If your image contains any information that might be lost if the image doesn’t load, you can specify this in the text of the alt attribute. This text is also displayed by text-only web browsers, such as lynx.


A web page can contain links to other web pages, and also links to other parts of the same page. These links put the hyper into hypertext.

To make a link to another web page, use the anchor tag <a> with the href attribute specifying the URL of the other page.

For example, the code

	<a href="">
		The W3 Organization</a>

is rendered as

The W3 Organization

If you click on it with your mouse, the browser will take you to the web page specified by the href attribute value, "".

For more information on URLs, see “What is a URL?” We will show a few simple cases here.

The path can be a complete URL, like
or a path relative to the current HTML document
or a path relative to the root directory of the server of the current page

To make a link to another part of the current page, use the anchor tag with the id attribute to label a place to go in the document. For instance, I put the code
<a id="WHAT"></a>
at the beginning of this document. The following code
<a href="#WHAT">Back to --&gt;What is HTML</a>
is rendered as

Back to --> What is HTML

Click on it to see what it does.