HTML Tag Reference

HTML Tag Reference
by Ross Shannon
There are quite a lot of tags in HTML, and these tags are constantly
being jostled about when new versions are released. Below is a current
list of all the HTML 4.01-compliant tags. If you want to learn more
about any one of these tags, try clicking on it and you'll be whisked
away to a tutorial in one of HTML Source's darker corners.
Page Navigation:
Basic Structure | Links | Lists | Multimedia | Tables | Frames | Forms |
Text Formatting
This page was last updated on 2010-01-08
Basic Structure
<!DOCTYPE>
The DTD (Document Type Declaration), this tells your browser which version of
HTML you're using. Make sure you use the right DTD, or your page may display
incorrectly.
<html>...</html>
Standard opening and closing tags for any HTML page. Enclose everything else
in these. Container tag.

A comment — whatever you put here will be skipped over by the browser.
<head>...</head>
Starts the header part of your document. Everything between these is mainly used
to help your browser and search engines classify your page. Using this is optional,
but recommended. Container tag.
<title>...</title>
Whatever is between these tags will appear in the blue bar at the top of the screen.
<meta>
A group of tags that give page and creator information specifically to the search
engines.
<base>
Changes the default link target or relative link URL, useful if the page is read on
another server.
<link>
Allows you to associate stylesheets and a favorites icon to your page.
<body>...</body>
Everything visible on your page goes between these tags. Everything. Container
tag.
Links
<a>...</a>
Makes the enclosed text or image a hyperlink to another file.
Lists
<ol>...</ol>
Creates an ordered list, where each item is numbered in order. Container Tag.
<ul>...</ul>
Creates an unordered list, with each item bulleted. Container Tag.
<li>
Each list item begins with an li, and they are all placed in either an ol or ul.
<dl>...</dl>
Creates a definition list.
<dt>
Creates a definition term.
<dd>
Creates a definition, which appears below its parent term and indented from the
left.
Multimedia
<img>
Places an image on your page
<embed>
Adds a multimedia element directly into your page, allowing your browser to play
it with a plug-in.
<script>...</script>
Adds a script, usually a JavaScript into your page.
<noscript>...</noscript>
Enclose anything you want displayed by browsers that do not support scripts.
Tables
<table>...</table>
Places a table on your page. Container Tag.
<caption>...</caption>
contains the caption of the table, the title of sorts. It will appear across the top
unless specified otherwise. This tag should not be contained in a tr or td.
<tr>...</tr>
starts a new table row. Cells go inside this. Attributes are the same as td's.
<td>...</td>
encloses a table cell. Content goes in these.
<th>...</th>
same as table cells, but with all contents bold and aligned to the centre.
<thead>...</thead>
Defines the header part of a large table. Wrap the tags around the rows/cells you
wish to define as the header.
<tbody>...</tbody>
Defines the main body of a complex table.
<tfoot>...</tfoot>
Wrap this around the footer part of your table.
<colgroup>
Allows you to set attributes for the entire column. Each column has to be defined
sequentially.
Frames
<frameset>...< /frameset>
Starts a new frame layout. When constructing a frame page, no body is used.
Container Tag.
<frame>
Defines a single frame within a frameset.
<noframes>...< /noframes>
If a visitor has an old browser which doesn't support frames you can leave a
message or some content between these tags.
<iframe>...</iframe>
Places an inline or 'floating' frame. This can be placed anywhere on a normal
page, i.e. it doesn't need to be part of a frameset.
Forms
<form>...</form>
Begins a form area. Add in any form elements you want to use between these
tags. Container Tag.
<input>
Allows you to add various user input fields, like text-boxes, checkboxes, radio
buttons, submit and reset buttons, depending on how you set the type attribute.
<textarea>...</textarea>
Adds a multi-lined text area, suitable for input of a larger amount of information
than the single-line text box. Any text added between the tags is placed in the area
when the page loads.
<select>...</select>
Sets up an empty drop-down selection box. You can add choices with the
<option>...</option> tag.
<fieldset>...</fieldset>
Allows you to group form elements together into logical arrangements.
<legend>...</legend>
You can title your fieldsets with this tag.
<label>...</label>
You can make the explanatory text next to a form element into part of the
clickable area with this tag, which makes selecting elements much easier.
Text Formatting
<address>...</address>
Encloses the signature and address of the author, displayed in italics.
<b>...</b>
Makes the enclosed text into bold text.
<big>...</big>
Makes the enclosed text one size bigger.
<blockquote>...</blockquote>
Indents the text in from both sides.
<br>
Stops the current line and goes on to the next.
<center>...</center>
Aligns the surrounded objects (anything from text or images to forms etc.) to the
center.
<cite>...</cite>
Includes a citation, and is usually rendered as italics.
<code>...</code>
If you are including either computer or HTML code into your documents wrap
these around it. It is rendered in small text.
<dfn>...</dfn>
A definition. As usual with these things, rendered in italics.
<div>...</div>
Surround distinct sections of your page in divs, primarily to align them, but many
other attributes are supported and divs can be used to set up layers too.
<em>...</em>
Emphasises the surrounded text, changing it to italics.
<font>...</font>
Sets the font properties for the selected text.
<hx>...</hx>
Sets the text as a heading, with values of h1 (the biggest) to h6 (the smallest).
<hr>
Inserts a grey horizontal line across the page.
<i>...</i>
The default tag for italics.
<kbd>...</kbd>
Implies that the text should be entered on the keyboard. It is rendered mono-
spaced and small.
<nobr>...</nobr>
Tells the enclosed text not to wrap at the edge of the screen, but continue on as
long as it needs.
<wbr>
If you need a line break in a block of text you have set in nobr, add this.
<p>...</p>
Makes the enclosed text a paragraph, with lines skipped at the top and bottom.
<pre>...</pre>
Displays text in fixed-width font and retains the formatting of the original text
(i.e. spaces and line-breaks).
<q>...</q>
Used to mark up short, inline quotations. Some browsers will add quotation marks
around the text.
<s>...</s> (or <strike>...</strike>)
Displays the text with a strike-through.
<samp>...</samp>
Indicates sample output from a form or program. Text is rendered in small font.
<small>...</small>
Makes the enclosed text one size smaller.
<strong>...</strong>
Creates emphasis for the selected text, rendered in bold.
<sub>...</sub>
Renders the text in subscript, which is words under the normal text. For example:
this
<sup>...</sup>
The sister tag to <sub> above, this renders text in superscript. Like this
<tt>...</tt>
Renders text in fixed-width, mono-spaced font; like an old typewriter.
<u>...</u>
Displays the surrounded text underlined.
The History of HTML

Version
by Ross Shannon
HTML is an evolving language. It doesn’t stay the same for long before
a revised set of standards and specifications are brought in to allow
easier creation of prettier and more efficient sites. Let’s start at the
beginning...
Page Navigation:
HTML 1.0 | HTML 2.0 | HTML 3.0 | HTML 3.2 | HTML 4.01 | XHTML 1.0 |
HTML5
HTML 1.0
HTML 1.0 was the first release of HTML to the world. Not many people
were involved in website creation at the time, and the language was
very limiting. There really wasn’t much you could do with it bar getting
some simple text onto the web. But then, just that got the beardos a-
foamin’ back in the day.
HTML 2.0
HTML 2.0 included everything from the original 1.0 specifications but
added a few new features to the mix. » HTML 2.0 was the standard for
website design until January 1997 and defined many core HTML
features for the first time.
HTML 3.0
More and more people were getting into the HTML game around now,
and while the previous standards offered some decent abilities to
webmasters (as they became known), they thirsted for more abilities
and tags. They wanted to enhance the look of their sites.
This is where trouble started. A company called Netscape was the clear
leader in the browser market at the time, with a browser called
Netscape Navigator. To appease the cries of the HTML authors, they
introduced new proprietary tags and attributes into their Netscape
Navigator browser. These new abilities were called Netscape
extension tags. This caused big problems as other browsers tried to
replicate the effects of these tags so as not to be left behind but could
not get their browsers to display things the same way. This meant that
if you designed a page with Netscape ETs, the page would look bad in
other browsers. This caused confusion and irritation for the markup
pioneers.
At this time, a HTML working group, led by a man named » Dave
Raggett introduced a new HTML draft, HTML 3.0. It included many new
and improved abilities for HTML, and promised far more powerful
opportunities for webmasters to design their pages. Sadly, the
browsers were awfully slow in implementing any of the new
improvements, only adding in a few and leaving out the rest. Partly,
this failure can be attributed to the size of the overhaul; and so the
HTML 3.0 spec was abandoned.
Thankfully, the people in charge noted this and so future
improvements were always designed to be modular. This meant they
could be added in stages, which makes it easier on the browser
companies.
HTML 3.2
The browser-specific tags kept coming, and it became increasingly
apparent that a standard needed to be found. To this end, the » World
Wide Web Consortium (abbreviated to the W3C) was founded in 1994
to standardise the language and keep it evolving in the right direction.
Their first work was code-named WILBUR, and later became known as
» HTML 3.2. This was a toned-down change to the existing standards,
leaving many of the big steps forward for later versions. Most of the
extensions tags that had been introduced by Netscape (and to a
lesser-extent, Microsoft) did not make it into these new standards. It
soon caught on and became the official standard in January ’97, and
today practically all browsers support it fully.
HTML 4.01
HTML 4.0 was a large evolution of the HTML standards, and the last
iteration of classic HTML. Early in development it had the code-name
COUGAR. Most of the new functionality brought in this time is from the
ill-fated HTML 3.0 spec, as well as a host of trimmings on old tags, a
focus on internationalisation, and support for HTML’s new supporting
presentational language, cascading stylesheets.
HTML 4.0 was recommended by the W3C in December ’97 and became
the official standard in April 1998. Browser support was undertaken
surprisingly earnestly by Microsoft in their Internet Explorer browser,
and the market-leading IE5 (and current successor IE6) have excellent
support for almost all of the new tags and attributes. In comparison,
Netscape’s terribly flawed Navigator 4.7 was inept when it came to
HTML 4.0 and even basic CSS. Modern browsers however, are a vast
improvement.
Once HTML 4.0 had been out for a little while, the documentation was
revised and corrected in a few minor ways and was entitled HTML 4.01;
the final version of the specification.
Head on over to the W3C site for the » official documentation; and to
read more about the new tags, attributes and redundancies brought
about by this new standard, read our article, HTML 4 Explained.
XHTML 1.0
Close to the beginning of the 21st century the W3C issued their »
specifications of XHTML 1.0 as a recommendation. Since January 26,
2000 it stands as the joint-standard with HTML 4.01. XHTML marks a
departure from the way new specs have worked — it is an entirely new
branch of HTML, incorporating the rigours of » XML, so that code must
be properly written if it is to work once it reaches the reader’s browser.
There weren’t many new or deprecated tags and attributes in XHTML,
but some things changed with a view of increased accessibility and
functionality. It’s mainly just a new set of coding rules. Read all about it
properly in XHTML Explained.
HTML5
After HTML 4.01 and XHTML 1.0, the guys who were in control of
HTML’s direction got sidetracked working on a new proposal for XHTML
2. At the same time, clever web developers were innovating
constantly, hacking new functionality into websites and browsers. The
path that XHTML 2 was taking started to look both boring and
unrealistic, and it became pretty clear that a new approach was
needed.
It was around this time that a bunch of pragmatic web technology fans,
browser programmers and specification writers started building
something of their own, outside of the usual W3C procedures. They
called themselves the Web Hypertext Application Technology Working
Group (WHATWG), and developed a new spec. After some soul-
searching, the W3C decided that HTML was still the future of the web.
XHTML 2 was discontinued and HTML5 became the new specification
that everyone’s effort should be poured into.
HTML5 is designed for the web, both now and in the future. This is the
specification that we will be working with for the next decade at least,
so the process of its development is relatively slow and considered.
Many parts will be familiar, but there’s also plenty of new elements,
attributes and abilities to get excited about. You can check the latest
version of the spec if you want all the detail. A full tutorial on HTML
Source about the changes in HTML5 is forthcoming.
Throughout HTML Source I will be teaching using the HTML 4.01
standard. The percentage of people using recently released browsers is
high enough now for it to be safe to design sites using new HTML 4.01
elements and stylesheets. I’ll make sure that those who won’t see the
optimum version of your site will still be able to use it, and wherever a
relatively new piece of code is taught in a tutorial I will always make
reference to that in a browser compatibility box.
My First Page
by Ross Shannon
So we’re set? You have your text-editor at the ready (preferably
NotePad or TextEdit), you know what all the acronyms stand for, and
you want to write something? Great, let’s get going.
Let’s just go through the steps involved before I actually introduce the
code. Today,
• you will write out the basic format, or skeleton, of a HTML page
• you will save it as a HTML file
• you will view it in your web browser
• you will smile at the fact that it actually worked
Page Navigation:
A Basic Page Format · Tags, eh? · Structure of HTML Elements · So let’s
make a page | Saving your Masterpiece | Having a look
A Basic Page Format

All pages follow this basic structure. Let’s start with the first tags
you’re going to learn.
Tags, eh?
Yeah. They are the things between the <> brackets. I’m sure you’ve
seen them in someone’s code before, but if you haven’t, right-click this
page and select “View Source”. The code that makes this page will
appear. Have a quick glance through it. Yes, it probably makes little
sense yet, but that doesn’t matter at the moment. See how, later on,
there’s some text? It’s the words you’re reading now. Surrounding all
that is a load of stuff, all being encased by <>s. That’s all the HTML
that goes into making this page.
Structure of HTML Elements
Tags follow a common structure too. Some of those tags you can see
are ”start tags”, like <b>, and others are paired with them and called
“end tags”. They look like </b>. Together, a start tag and an end tag
form a HTML element. A start tag opens an element and an end tag
closes it again.
For example, to make text bold, you use the b element. So, at the
point in your text that you want the bold to start, you just stick the
angle-brackets around that and put <b>, and when you want it to stop,
you put </b>. An end tag is simply the start tag with a forward slash
in front of the element name. Some tags won’t need that end tag, but
most do, so don’t forget it.
So let’s make a page
Oh yeah. Ok, first step. Open Notepad, or any other text editor. Type
this:
<html>
</html>
These are the standard start and end tags on any page. Note that
when I say “standard”, that means “you must put it there”. HTML
elements can contain text and other HTML elements inside them, and
these two tags will contain the rest of the HTML that makes your page.
Now we’ll add in the rest of the structure. Modify your page to this:
Very Important <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
My text goes here.
</body>
</html>
That complicated looking bit at the top isn’t something you need to
worry about just yet. It basically tells your browser which version of
HTML you’re using in your page. You are going to be using HTML 4.01,
the most recent version of HTML. Later you may move to a newer
version, but HTML 4.01 will be perfect for most of your sites.
HTML pages are made up of two distinct parts — the head part, and the
body part. The head part contains things that won’t appear on your
page. Most of the elements that go in the head part are advanced stuff
for search engines and the like, so the only one you need to know for
now is title.
The text you put into the title element is the text that appears at the
very top of your browser window when you view the page. You can
type whatever you want in that. No other HTML will work in here,
although special characters will. Don’t forget to add the title, because
without it, that bar will have the URL of your page in it, and that’s just
nasty. This text will also be used if a reader bookmarks your page, and
in search engine listings, so take the time to write a unique title for
each page.
The body section is the main part of your page. Everything between
those two tags will be visible on your page. So type something there
now. Whatever you want, I don’t care. Be spontaneous.
Now your page looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<b>Hello!</b>
I hope you’re having as much fun reading this as I had writing it!
</body>
</html>
That’s about as complicated as I’m going to make this tutorial. If you
want to format your text, check the next page where you will find all
the tags needed to make your page more presentable. For now, stick
with saving your page and checking how it looks...
Saving your masterpiece

Now that you have your first page written, you need to save it to your
computer’s hard disk, and then open it up in a different program (your
web browser). This part can be a little tricky, so please follow along
closely.
When you double-click a file on your computer’s desktop, the computer
knows what program to open the file in by checking the file’s
“extension”. This is the characters that come after the name of the file.
So, for example, .mp3 files will open in a program that can play music,
and .txt files will open in a text editor.
You need to give your document a file extension of ”.html”, which will
tell it to open the file in your web browser, such as Internet Explorer,
Firefox or Safari (at least one of these programs will have come with
your computer — in fact, you’re reading this in one of them right
now!).
Right now you should be editing your HTML page in a text editor, which
normally saves files with the extension “.txt”. We want to make it save
in “.html” instead, so, in your text editor click File → Save As…. Find
the place on your hard drive where you want to keep all your pages (I
would recommend you create a new folder on your desktop and
keep all of your documents together). If you use Microsoft Windows,
there will be a box labelled “save as type”; change it to “all files *.*”.
This means that you can save the data (in this case, some text) into
any format. Now type in the name index.html for your file and click
save. Finito.
sourcetip: After you have done this once, the next time you change
your code, you will only need to press Save, not Save As…, because
the computer now knows this is a HTML file.
Your page’s filename can consist of any combination of letters,
numbers or _ (underscore) and - (hyphen) characters. It is a good
practice to start the filename with a letter and use lowercase letters
at all times. This will make sure that you won’t get any capitalisation
errors when people try to type your page’s address into their web
browser. You should always call your homepage index.html — this will
be important later on.
Question: how come I sometimes see some pages named “something.htm”?
Well, a long time ago back in the 1990s, file extensions were
limited to only three letters, hence “.htm”. You could name all
your files using .htm as the suffix, but there are so few people
with operating systems that old that you’re better off just
using .html and being done with it.
Note to users of word processors
If you’re trying to use something like Microsoft Word to make
your pages (which is a really bad idea), you don’t want to be
saving all of the editor’s values for margins and formatting etc.
when you save your html file, as they can’t be read by your
browser. So when saving your file, make sure to save it as text-
only, and only the things useful to your browser will get saved.
Again, I implore you all to use just a simple text editor while you
are learning HTML. It will mean that much fewer things can go
wrong, and you will learn so much quicker!
Having a look
Well, you’ve been toiling away on this page for hours, has it paid off?
Let’s check. Create a new web browser window to open it in (so that
you can keep this page open when you do it) — press Ctrl + N. Now, in
that new one that should have opened, go to File → Open. Click
Browse… and find the file you just saved (“index.html”, unless you
were cheeky and called it something else). Click the Open button. Your
page will appear in all it’s glory. You did it! Huzzah!
Ok, now smile. ☺
Basic Formatting
by Ross Shannon
Ok, so you have written a short page to prove you can write HTML. It's
wonderful and all, but it lacks that certain something doesn't it? You
want things to stand out more, want to skip lines and use italics.
You want to format.
Page Navigation:
Formatting the Text | Tag Questions | Skipping Lines | Attributes |
Headings · So let’s see them! | Lines | Comments | Spaced Out | First
Validate
Note:
You should have both your editor and your browser open at the same time while
you're coding. Whenever you make changes to your html code, save it, switch to
your browser and press refresh and the page will update itself to the newest
version.
Formatting the Text
Well, you remember from the last tutorial how you needed a start tag
and an end tag right? Start with the start tag, end with the end tag.
Simple. You already know that <b> means bold. Let's refresh.
Hi, my name is Ross and I'm brilliant. Yeah, that's right I'm brilliant!
Ah...now I feel good. Plus, I cunningly disguised that as a lesson in
HTML. To make the bold text, here's what I did:
<b>brilliant</b>
That's all there is to it. Just surround the text you want in those tags.
Hoping it'll get more exciting soon, eh? Alrighty, want to learn italics?
That's just as easy. The code for that is i. So, in the same fashion:
<i>superb stuff</i> becomes superb stuff.
Underlining is laughably easy too — just use <u>
<u>Just hit me with the underline, maaan</u>
Harking back to the days of ration cards, you can even make your text
look like it was bashed out on a typewriter — use tt.
<tt>Day twelve. The Germans have surrounded our farm</tt>
becomes... that in this sort of text.
The examples above all use presentational tags. You may want to use
logical tags instead, which make your content more accessible.
Your browser only displays one space between words. If you add in
more spaces in the source code, they will be ignored. If you want to
forcefully add in extra blank spaces, you can use the special character
, which stands for 'non-breaking space'. With this you can create
indents for your text.
<p> This text will be indented</p>
Tag Questions
Do the tags have to be in CAPITALISED text?
Nope, they don't. You can use <b> or <B>. I prefer to make all of mine
lowercase because it looks much neater when you're reading and
editing your code, and suits the version of HTML I code in, but it
doesn't change how they work. It's up to you.
Can I mix them together?
You really are getting adventurous aren't you? Yes, you can. Simply
surround the text you want with both sets of tags — <b><i>like
this</i></b>
Something to note however, is the order you put them in. If you
start with b, you end with b. In the example above, <i> was the last tag
opened, so it is the first one closed. This is something you should
remember, because the importance of your tag syntax becomes
critical later on. This style of opening and closing is called LIFO — Last
In, First Out.
Putting tags inside each other like this is called nesting.
Skipping Lines
You've probably noticed by now that when displayed in a browser your
page seems to have lost all its paragraphs and whatnot. Your browser
ignores any returns and indents. So what do you do? You use <br>,
which stands for 'line BReak'. This is known as an 'empty element' — a
tag which doesn't need an end tag — just type that and the text will
start on a new line.
Or how about skipping a line and creating paragraphs? To do that, use
<p>, which stands for 'Paragraph'. There are two ways to go about
using p. You can just put it at the end of a paragraph to skip a line on
to the next; or you can put a <p> at the start of the paragraph and a
</p> at the end. I prefer the latter, because it looks neater, and allows
you more flexibility. You should use it too.
<p>Welcome to my page.<br>
I hope you enjoy your visit.</p>
Attributes
Now I'm going to get slightly more advanced. To center text, the basic
tag is <center>. But, this is being replaced, so a better way of doing this
is to align a paragraph. This involves giving the tag an attribute. The
tag on its own does something, but then you can add attributes to
further define what the tag does. You will see many other tags having
attributes later on — they are a very important part of HTML. The
structure of an attribute is:
Very Important <tag attribute="value">Affected Text</tag>
All tags can have several attributes at a time, but only some attributes
work for certain tags. It's just a matter of learning them off. Also, don't
forget to encase the value in quotation marks.
So, to add the center value to the p tag, the structure is:
<p align="center">Centered Text</p>
Compare that to the example above to see what's what. p is the tag,
align is the attribute, and center is the attribute's value.
Note that when closing the original tag (p), all its attributes are taken
with it, and all you need is the normal closing tag (i.e. don't start
putting attributes into it).
Obviously, if it can be aligned to the center, it can be aligned in other
ways too. You can align left and right. But there's no point in writing <p
align="left">, because all text aligns to the left anyway. This is known as
a default.
Headings
In the beginning, heading tags were invented as a graded method of
information layout and division. You used big headings for the main
points in a page and go down through the numbers. There are 6
gradings or levels of HTML headings: <h1> to <h6>. Graphically, these
create decreasingly large text, with h1 being the biggest, and h6 being
the smallest of the group.
So let’s see them!
Oh, that's my cue. Ok: here are the examples:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
You just wrap the preferred heading tag around the text, like so:
<h3>Heading 3</h3>
The text will then appear bold and big. One thing to note is that
headings are always apart from the rest of your text, like a paragraph.
This is a property of block-level tags. You cannot flow headings and
normal text together. If you want text to follow straight away, you
should just change the font size and not use a heading.
The title of your page should be made into a level-one heading. The
rest of your page should be divided into sections with further heading
tags, getting progressively smaller for points and sub-points. Try not to
skip levels (like going from a <h2> to a <h4>).
sourcetip: Headings take on the color and font face of the
surrounding text, so you can change a headings color, say, by
wrapping a font color around the h tag. Read this tutorial on font and
color for more.
Headings can also be aligned. Values are center, justify, left or right.
Lines
Some other very simple stuff is using lines across the page. To make
them, use <hr>, which stands for 'Horizontal Rule'.
Just put that anywhere on your page (no end tag is needed) and the
text will stop and a big
will appear and then your text will continue on. Nice, eh?
These can be manipulated through attributes too. They can be aligned
left and right, like p above. They also have two other attributes that
relate to the size of the line.
<hr width="100"> would create
a little guy like that. You are specifying the width in pixels here, or you
could use a percentage, like <hr width="80%">, which will create a line
that is 80% as wide as the available screen width.
To make stronger lines, <hr size="4" noshade> would create a big, beefy
Did you see that noshade bit there? That is a special attribute unique to
hr, and it doesn't need a value. It stops the hr having two shades of
gray in it.
It also shows that many different attributes can be used on the same
tag at the same time. Experiment with them a bit.
Comments
Once your documents start getting filled with confusing tags and
sections you're going to need to know which part is which. You use
HTML comments to add notes to your code so that you can read it
easily the next time you come back to edit it. The code for a comment
is a little different than for other tags:

Anything you put between the  lines will be completely skipped
by your browser. You can add in some hash marks (#) to make your
comments stand out. When scrolling through the HTML code of a page
you want your structure comments to jump out. Comments will be
used later on in HTML to hide things from old browsers. They're very
useful — use them and help yourself out.
Spaced Out
How you lay out your source code is a matter of taste in most regards.
You can indent some tags off the left margin so they're easy to see,
and skip lines after each paragraph. It doesn't matter much to your
browser, which usually disregards spaces, tabs, blank lines and other
'white space' characters when it is displaying your pages. I should warn
you that sometimes however, extra spacing characters will mess up
something on you. It's not serious, but a line like the one below should
be fixed:
<p><u>Some underlined text. </u></p>
The space character before the closing </u> tag will make the
underline effect run on for longer than the sentence, which looks
sloppy. Later on, with table tags especially, leaving in spaces like this
can ruin a layout by adding gaps between your elements. So, code
tightly, with no spaces between text and end tags.
First Validate
You've probably introduced quite a lot of new tags into your page now.
Validation is the process by which you make sure that in all of your
tinkering, you haven't introduced any nasty mistakes into your lovely
simple code. To check if a HTML file is valid, you can use an online
validator like the » W3C validator. It's a free service that scans your file
(either online or any page on your computer) and returns a list of
errors, if it finds any. It's easy to use — enter the address of a webpage
into the form and it will go off and do the necessary tests.
When an error is diagnosed it is usually a simple process to track it
down and eliminate it with great prejudice. Don't take the validator's
warnings lightly; this is an important process, and one that many
careless coders disregard. Later on, they regret it. Oh yes they do.
If your code is valid, it has a much better chance of working in
every browser, which means more people can read your stuff. While
the chances of having many critical errors in your code are small at the
moment, once you have an entire site to maintain the gremlins can
often sneak into your code, threatening the accessibility of your pages.
So, validate often. Whenever any more major work is done on your
site, run it through the machine again just to make sure everything's
hunky-dory. It'll keep me happy.
Basic Links
by Ross Shannon
Once you have the ability to create HTML pages, you’ll want to learn
how to create links between them, so that you can start building a site.
Links are the essence of HTML — they are what makes it unique.
While you learn links I’ll also teach you the fundamentals of site
organisation and structure.
Page Navigation:
First Links · Link Structure · Linking to email addresses · Linking to
pictures · Linking to files | Absolute and Relative Links · Linkal
Gymnastics · Outward Links | Site Structure
First Links
Ok, you have a page that you learned how to write in the first lesson.
Now, you’re going to need another page. It doesn’t have to be
anything great, just a very basic page will do. You can copy the first
page and just save it as a different name if you want. Just make sure
you know the names of the two files and that they are in the same
folder. Don’t forget to call your homepage index.html.
sourcetip: Always use lowercase letters when naming html files,
images and folders. Most web servers (the computers you’ll eventually
be putting your site onto) are case-sensitive, which means it matters to
them whether your files use capital letters or not. When linking to
pages or typing in URLs, you don’t want to have to remember the case
of each letter, so if everyone uses small letters the problem goes away.
Link Structure
Like all tags, links follow a structure, and have start tags and end tags.
Put this line of code on one of your pages.
Very Important <a href="theotherpage.html">The Link</a>
Explanation:
• a: a stands for Anchor, which means Link. This is the tag that makes it all
happen.
• href: Means Hypertext REFerence. The href part is another attribute, with the
location of the other page as its value. Just change theotherpage.html to the name
of the second file. Don’t forget the quotation marks!
Whatever you put inside the link tags will become a link, coloured blue
and underlined. When you rest your mouse on it your cursor will turn
into a hand and the URL of the page will appear in your browser’s
status bar (at the bottom of the window). If you want to make links to
other parts of your page (for example a link to the top of the page), set
up some internal links. Changing the default colours of the links is
dealt with in body attributes.
Linking to email addresses
If you want to let people email you by clicking a link, you use this code:
<a href="mailto:bruce@example.com">mail me</a>
to create this — mail me — which will open the users email program
with your address in the To: box.
Linking to pictures
Linking to a picture file is practically the same as to a html file. Just
include the name of the file, and do not forget the correct suffix — i.e.
if it is a gif or a jpg. For a rundown on the file formats for images on
the web, read this. If you want to use a picture as a link, read the next
tutorial.
Linking to files
You link to a file just like a picture. The only difference is that it won’t
open in a browser, but instead will download onto a specified place on
the reader’s hard drive. An example:
<a href="ambient.mp3">download the song (2.6MB mp3)</a>
Embedding a file directly into a page is a different process. We have a
page on Internet file formats too.
Absolute and Relative Links

Internet addresses closely follow the established hierarchy structure
you’re probably familiar with on your computer’s file system. First
comes the Internet domain, like www.example.com. Next comes the
directories (folders) that contain the file and finally the file’s name,
with the appropriate file type extension. Each segment of an url is
separated with a forward slash. Always remember: on the Internet,
all slashes go forwards.
There are two different ways to point your links to a file. “Absolute
links” include the full website address, including the http:// and www.
bits. “Relative links” are much shorter and more manageable, and
can only be used to point to other pages on the same website.
For instance, say you have a page called page1.html in the “links”
directory of your site. The absolute href to this page is
http://www.example.com/links/page1.html. So, you put that link
anywhere on any page, on any site and it will always go to that page
on the web.
Relative links can only link to a page from the same site. The
address is always relative to the position of the second file. If you
were linking to that same page from a page in the same directory, the
href would be just page1.html. If you were linking from your homepage,
i.e., in the root directory, the link would read <a href="links/page1.html">,
as you would have to go down into the directory first, and then get the
file.
sourcetip: If you name files index.html in your directories, you can
make links to these pages by just linking to the directory name. Your
browser will always pick up index as the main page for that folder. This
means you can condense href="folder/index.html" into href="folder/". The
slash tells the browser it should look for a folder, and not a file. Don’t
forget it!
Linkal Gymnastics
If you need to go up a directory, and then back down into another one,
you’ll have to understand how your site is laid out. Using HTML Source
as an example, we are now in the “myfirstsite” section. Have a look at
your address bar to see. If we wanted to link relatively to the
“images” section, we’d have to go upwards one directory and then
down into the images directory. So the full relative href would be
"../images/index.html"
See the two dots? They mean “go up a directory”, towards your root.
So no matter how deep into your site you are, you can always come all
the way back with a couple of ../../’s. Just count the directories until
you’re at the right level.
sourcetip: If you want to link to a page that is near the top of your
site (not deep in directories), you can start the link with a slash. This
means “start at the root directory”. So, the href above could just be
/images/. This saves you having to put in loads of ../../s. A link back to
your homepage is always href="/"
Outward Links
On outward links (links to other sites), you must always remember to

prefix the address with http://. Otherwise, the link won’t work, the
browser will look for a file called www.yourhtmlsource.com in your site.
You will be linking to us, right? You’ll be my new best friend if you do,
cheeky.
To do this correctly, you’re basically just offering an absolute link, like
above. So, the correct address to link to would be
http://www.yourhtmlsource.com/. Notice the ending slash? That only
goes there for directories (i.e. folders) or domain names, as in this
example. Don’t put a slash after a .html link, just for directories like
a .com or an address without a suffix.
Site Structure
Without a simple game plan, your site could soon be very hard to find
stuff in for you, what with all the files you keep piling into it. Thus, you
should group pages of similar theme into folders (directories). Keep all
your images in one folder too, away from your html files (call the
folder “images” or “media” or something like that).
I would also advise you to work on a template of your design. It may
not be important now, as your site may not have a distinctive design,
but later having this file will save you hours of time. What you do is
save a file with no content, just the layout of your pages as
TEMPLATE.html in each directory of your site (capitals so it stands out),
with the links all correct. Then when you’re adding a page to a folder,
you just open this file and add your content into it, and save under a
different name, leaving template.html empty, ready for another use.
To see our template for this directory, see this. Check, we have one in
each directory.
Say you had a site about the solar system (just say). Keep all the files
about mars in a folder called “mars”, with all the pictures of mars in a
directory called “images” in the directory called “mars”. And keep the
pictures of Uran— ...no. I am above that.
Speaking of pictures....
Basic Images
by Ross Shannon
Now, you’ve got some stuff written, and a couple of linked pages. Your
site is looking far more convincing now. But there’s still something
missing, isn’t there? You probably can’t help but want to fill your pages
with images. The beauty of it is that it’s really easy. In fact, if you’ve
been paying attention so far, you should have no problem at all. Let’s
get busy.
Page Navigation:
Inserting an Image | Linking Images | Basic Attributes
Inserting an Image
This is the basic stuff — just getting the image on your page. The code
for inline images is img. You use the same type of attribute as the href
attribute from the last article, so having used that before will help you
get your head around this quicker.
To keep it simple, place the image you want to use in the same
directory as the HTML file it is going to be in. Say your image is
called ’go.gif’, the code to insert that image into your document is:
Very Important <img src="go.gif" alt="Go">
The image will appear on your page like this.
1. src stands for “SouRCe”, so what you’re saying is the image source is go.gif.
Make sure you’ve gotten the image file type right. If you’re linking to a
photograph, it is more than likely a .jpg. The src bit is mandatory in an img tag,
which means you have to put it in. Obvious really, otherwise there’d be nothing
there.
2. alt stands for “Alternate text”. You should use this attribute to describe the image
for people who browse with images turned off, or for visitors who aren’t able to
see your images. The alt attribute is also required, so you must write one for every
image you use.
You can put in the url of any image on the web into the src, but really
you should only use relative addresses to put images onto your
pages. Adding external images means a reader has to connect to
multiple servers when they load your page, and that adds lots of extra
time to your page’s download. Not a good thing. You can save images
from other web pages into your own directory and use them from there
if you want, as long as the images are free (you should always check
with the site owner).
Once you have entered the src for your image and saved your HTML
file, you can open it in your browser and test if it worked. If your image
doesn’t appear, and you get an empty frame or a rectangle with a little
red ‘x’, there is a problem with the src value you have provided. Check
that you have set the address correctly and that the image is where
you say it is.
Linking Images
If you want to link to another file, by clicking on an image to get to it,
all you do is use the same tag from the earlier lesson, and wrap the a
around the image code, so that the image is in place of the text you’d
normally have. So, to make go.gif a link to fullindex.html, you’d write:
<a href="fullindex.html"><img src="go.gif" alt="Go to the full index."></a>
This would create:
...which, as you can see, doesn’t look quite the same as the image
above. This is because the browser puts a border around the
image to show that it is a link, coloured the same as your link
colours, which we’ll be getting into in the next tutorial. Of course, it’s
not always welcome, so to get rid of the border, add this attribute to
your img tag:
<img src="go.gif" alt="Go to the full index." border="0">
The default border thickness is 2, so you can set it to
1 if you want a
thinner border, or to anything higher for a big bad-ass border. You can
even add borders to images that aren’t links, which will be the colour
of your text.
Basic Attributes
Since you already know how to align stuff like paragraphs, I may as well
add aligning images to this page. img aligning is done in much the same
way, except now you have 3 new values you can use (only for images,
mind): top, middle and bottom. They are used in a similar fashion, as
attributes to the tag like so:
<img src="monkey.gif" alt="A monkey" align="left">
Here are some examples
Aligned left. Notice how the text hugs the image, instead of starting
under it.
Aligned right. The image hops over to the side, and if the text reaches
it, it just drops down beside it and continues.
Aligned top. That means the text will align to the top of the
image and then go under. Note that with these last three, you only get
one line before it drops under the image.
Aligned middle. Are you getting this yet?
Aligned bottom, keeping everything all straight.
<body> Attributes
by Ross Shannon
Now that you are a bit of a genius at HTML, you will want your site to
start looking more presentable. That means good use of colour, and an
attractive design. Up until now, the only colours on your page have
been white in the background, black for text, and blue for links.
Wouldn't you like to change them for something far more stylish?
Page Navigation:
The <body> tag · bgcolor · text · link · vlink · alink · background ·
margins | Step into Style | A word on colour schemes · Pick your
background well
The <body> tag

Now that you have the gist of using attributes in tags, this should make
perfect sense. Remember the <body> tag from the first page, which
everything visible on your page goes into? That is the tag we'll be
adding to in this, as it's been left untouched up until now. There are 7
attributes to be added here, and they all change how your page looks.
bgcolor
This is the colour of the BG, or BackGround, of your page. You need to
put the colour in as a HEX code, like the rest of these colours. What
are HEX codes? Glad you asked. Because it means you have to read
this definition! If you want to see a list of HEX codes for 216 different
colours, look at this chart. The code is:
bgcolor="#FFFFFF"
Note that, even though the default BG is white, you should still code in
#FFFFFF, because older browser's default BG is a nasty grey.
text
This will change the colour of all the text on your whole page, unless
you have changed the colour manually (find out how in the text
section). Your best bet here is to leave it black, because that's the
easiest to read. Code!
text="#000000"
link
Instead of the normal blue, you can now change the colour of all your
links to something a bit more classy.
link="#FF00FF"
vlink
Links change colour once you have clicked on them, from blue to
purple. The V stands for 'Visited'. You can change this too, but make
sure it is visibly different to the link colour, otherwise people will get
confused.
vlink="#660066"
alink
When you click on a link, it changes colour momentarily, to show you

that you've clicked it I guess. If you click the 'Back' button, it is
highlighted as being Active so you don't click through on it again. The
default is usually red. Make sure you highlight it right; it's a nice
feature.
alink="#FF0000"
background
If you want to put an image as your background, use this attribute, and
set the value to the same as you would for an image src (don't know
how? Read the preceding lesson on images). You can also link to an
image from another site, by giving the entire URL.
background="http://www.yoursite.com/media/BACKGROUND.gif"
Whatever image you choose to use, it will be tiled across your page,
filling it up. That means it will repeat itself across your page, so choose
one that doesn't look too obvious.
If you want your background to be set in place and not scroll, add the
attribute bgproperties="fixed" into the body. This will leave the image as a
watermark.
margins
There are two sets of margins on a page, the ones at the sides and the
ones at the top and bottom. The two main browsers use different
attributes to put in these margins, so when you change one, change
the other as well.
• For Internet Explorer: topmargin="0" and leftmargin="0"

• For Netscape: marginheight="0" and marginwidth="0"
Despite this, the units of measurement are the same — pixels, so to

make your margins the same in both browsers just set them both to
the same value.
Show me the code
So now, a complete body tag would look something like this:
<body bgcolor="#ffffff" background="bubbles.gif" text="#000000" link="#3399ff"
vlink="#9966ff" alink="#000000" bgproperties="fixed" topmargin="0"
marginheight="0">
Step into Style

During the time you've spent learning HTML so far, you may have
heard mention of CSS, or Cascading StyleSheets, and wondered what
they were. I'm going to explain the whole thing now, and hope that
you're ready for it. I do have an entire stylesheets section, and a
dedicated introduction to CSS here, but think of this as an induction to
the introduction.
There are many tags in HTML that exist purely to create a certain look
on your pages. There are also techniques, like using transparent
images to space your page out. This was all well and good a few years
ago (and is why you'll see practices like these mentioned in older HTML
tutorials...), but they are not at all suitable for the web that exists
today. These techniques create accessibility problems, add to the bulk
of your HTML files, and are generally awkward to work with. Nowadays,
we have a better method of styling our pages.
Style Sheets are the best way to define how your page looks.
Everyone should use them. You create a simple text file, styles.css for
example, with a number of rules defining the colours and spacing of
certain HTML elements. Let's say, in your stylesheet, you command all
of your headings (<h1>) to be red. You then put a line of code into your
HTML that shows your web browser where its CSS file is. When it loads
up the page, it looks for the CSS file, reads it and sees that all h1
elements should be red and then displays red headings, without any
extra code.
In this way you can apply all of the presentational stuff through simple
CSS, and keep your HTML relatively clean and simple. So, open a
new document and add this to it:
body {margin: 0px; }
h1 {color: red; }
That's all that needs to be in the file. Save it as styles.css (or
whatever). Now add this line into the head of all your pages:
<link rel="stylesheet" type="text/css" href="styles.css">
This tells your browser where to look for the CSS file. These two
lines of code will make all the headings on your site red, and will set
the page margins to zero pixels without all of that laborious
topmargin/marginheight/etc. attribute tomfoolery. It's actually probably
best if you take out those attributes.
Already you should be seeing some of the benefits of using CSS — that
one line will take care of the margins on every one of your pages that
use this stylesheet. Once you have a CSS file, you can continue adding
new rules to it to pretty up your pages. There is some amazing power
in stylesheets, and you have loads of options for designing the look of
your site. Head on over to the CSS section for more.
A word on colour schemes

Avoid a shocking colour scheme at all costs. It is no coincidence that
the best sites have subdued, light colours, and the worst sites have
brash, painful ones. Luminous yellows, reds, pinks and greens are just
a big no-no. The more easy it is to read, the more professional it will
look. Keep the contrast high between bgcolors and text colours, so no
text disappears because it is too close in shade.
If you think people might want to print parts of your site out, don't use
a black background and white text. No one will print it if it takes up all
their ink. It is also not as easy to read as the normal black on white.
The colour-scheme you use and the subject of your site will often have
a lot in common. They will also create a different mood. Visit sites like
your own and see which colours they use, and criticise whether they
work or not. A site about say, the game Quake, can get away with
dark, foreboding colours because they fit in well with the atmosphere
of the subject. However, if you were designing a tourism site the same
colours couldn't be used because you want to generate a happy,
welcoming mood. Think about your audience.
Pick your background well
If you do use a background (remember, you don't have to), pick out the
main colour in the image. Then set that colour as your bgcolor. The
reason for this is that some people don't have images turned on, and
won't see your image. Therefore, the colour has to be close to the
images colour so the text remains readable.
Try and avoid using those God-awful free background tiles you can find
on the net, or those painfully dull ones that come with Microsoft Office
programs. Your site will look horribly cheap. Clever use of a simple
background tile can work wonders on the visual impact of your site.
Look at our own simplistic bubbles to see what I mean.
Basic Web Design

by Ross Shannon
Simply learning all the HTML tags is no way to become a good web-
designer. Anyone can do that, and they still output rubbish. In this
advice tutorial, I’ll be giving you the most important tips in general
areas to start you off on the right track towards creating great sites.
There are loads of links to further tutorials throughout.
Page Navigation:
Check the Source | Hand Code | Learn CSS | Presentation | Colours |
Exercise Restraint | Basic Promotion | Fundamental Optimisation | The
Golden Rule
Check the Source
Looking through the source code of other sites is an excellent way
to pick up HTML methods and tricks. In your browser click View |
Source on any page and the code which created it will be opened
(make it open in Notepad for the best way to read it) for your viewing
pleasure. Find the corresponding section in the code for what you liked
and see how it was created. You can then cut and paste code
snippets out of the page’s code and into your own. You can teach
yourself a lot this way, although it’s never as easy as just sitting down
with a Coke and having a good read of HTML Source...
And now the necessary warnings: be careful about learning from badly-
written code. There are plenty of awfully-coded sites that you may be
reading, so try not to pick up any of their bad habits. Getting code
segments and things like that is fine, but do not take designs, scripts,
graphics or anything that looks like it took a lot of work. I’ve seen
people rip off HTML Source’s design and it’s hugely irritating. Just no.
Once you’ve gotten your code together, the next essential step is to
validate it to make sure it’ll work in all browsers without problems.
You may be surprised. There’s a good (if harsh) » online HTML
validator over at the W3C’s site.
Hand Code
Unless you break out of the WYSIWYG-user’s mentality, you will always
be restricted in what you can create. Too many beginners go straight
to FrontPage or DreamWeaver and never really learn how to code and
design. When things go wrong they don’t have the skills needed to fix
the mistakes their editors have left them with, and give up.
Hand coding in a text-editor (like HomeSite or even trusty NotePad)
means you know your code much better and so can find problems and
edit smaller things. You have much better control over your design.
You’re closer to your code and are able to incorporate things like CSS
more easily. Visual editors also output very bloated code with lots of
unnecessary font tags and paragraphs etc. Your pages will download
faster if you code efficiently in a text-editor.
It’s never something anyone who has used a WYSIWYG editor wants to
do, as at first it looks like a much slower, laborious way to design
pages. You’re going to have to get past this barrier — you’ll eventually
come to love the advantages hand-coding gives you.
Learn CSS
CSS, or Cascading Style Sheets, are the most important development
in the webmaster’s world in the last few years. They allow you to
change the look of your entire site by editing one file, and allow you to
format and design your pages to look much, much better.
If you can use HTML well, CSS shouldn’t be much of a step-up. Not only
are stylesheets a great extra skill for you to have, but they’re going to
be essential for creating pages in the next few years. Get a handle on
them as soon as possible; have a look at the introduction to
stylesheets.
Presentation
You need to structure your page into blocks, by using either tables,
layers or frames. Have some clearly defined navigation, content and
supplementary boxes — people will know where to look for specific
parts of your page. Don’t stack page elements on top of each other all
the way down the page — this makes a lot of scrolling necessary,
something that the Internet audience do not enjoy. To lessen this,
make use of horizontal screen space as best you can by aligning
navigation links and inset pictures to the side so that the content flows
alongside it.
Limit your font choices to two or three for your entire site. Reference
is always made by typographers to the horrific mistakes made early on
when word-processors came into mainstream use a few years ago.
Magazines and other publications were printed with dozens of fonts
used on every page, just because the designers could. This led to the
pages looking like a big mess. You should use very few fonts to avoid
the same fate.
Stick with a sans-serif font for your main content, as text in this family
of fonts is easier to read from a computer screen than serif fonts. Keep
your main body text between sizes 2 and 3 (10 and 12 point). Also
remember that you should use the common fonts that everyone will
have on their computer (found in the font face tutorial), so they see the
same page you do.
Colours
I’ve already gone over the importance of using light colours in the
<body> tutorial, but I’d like to re-iterate it here. Bright, primary
colours are highly uncomfortable to look at, and on the Internet where
you’re looking at a lit monitor the whole time, this is very important to
avoid. Pastel shades do not strain your eyes, and generally look more
stylish anyway.
Have a look at sites like » Yahoo and » Amazon, two of the most
popular sites on the Internet, and see what they do. Large blocks of
colour are drawn with soft shades. There’s plenty of white-space left
as places for visual relief. These sites have been designed following
extensive surveys of web users, so they know what they’re doing.
When choosing your colour-scheme, pick one or two main colours.
These will be used to fill in the main blocks of your page. Along with
these, choose three or four more colours that go well with your core
colours — experiment a lot with these. Apart from any once-off
elements or graphics, these should be the only colours you use in your
layout. They should all be from the web-safe palette.
Make sure there is a good contrast between your background and
text colours. Keep your main text black in most places. The areas of
most interest on your page should be highlighted with a small
instance of bright colour, but make sure it never takes over.
Exercise Restraint
You may get a little excited about the glitzy special effects achievable
with things like Java Applets, JavaScript and Flash, but something
you’re going to have to realise is that readers are rarely impressed
with a dazzling but difficult-to-use system.
Simplicity works best. A basic text-based navigation system is
preferable to one constructed with image rollovers. Going straight to a
content-rich homepage is preferable to a pointless and showy Flash
intro or splash page. Background sounds and the like get annoying
after one instance. Scrolling text and multiple gif animations are the
hallmark of an amateur designer, and they’re terrible. If there’s one
thing that many usability studies show, it’s that readers find many
special effects to be quite obnoxious and annoying. The simpler sites
always prosper.
Basic Promotion
When your site is ready for the Internet, you can start submitting your
pages to the search engines. This causes great confusion and anguish
for most beginners — the poor guys can’t figure out why the search
engines won’t add their site. Read this: it usually takes at least 4
weeks for your site to appear, if only that. You might get lucky, you
might get very unlucky, but that’s all it really comes down to. If you
still haven’t appeared in their index after 2 months, you should re-
submit your site. It’s a horrifically tedious waiting time, but until the
engines are able to work faster it will stay this way.
While you wait, look out for other opportunities to start drawing in
readers. Find directories of sites similar to your own. They usually
accept submissions and add the sites within a few days.They’re a great
place to pick up targeted visitors. Learn how to write promotional,
keyword-rich text for descriptions. If you’re feeling really confident
about your site’s quality, submit to » Dmoz (the Open Directory), and
— lordy — » Yahoo. Remember for the two latter sites however, that
your site’s content is the most important thing, so make sure you have
lots of it. Getting into either of these is usually a fast-track into most
search engines.
Stay away from things like Free-for-all pages and submission websites
that promise to get your site listed in hundreds of directories. It’s all a
sham.
Add in <meta> tags before you submit to the search engines. Read
over Promotion 101 for the fundamentals of choosing keywords. The
most important is » Google. Google indexes new sites quite reliably,
while you could be waiting forever on others and still get no visitors
from them.
Now, another mistake beginners make is that their expectations are
too high. Sites that are starting out should be lucky to get, on average,
30 or 40 hits a day; and even then it depends on the popularity of your
subject matter. Don’t be disheartened by small viewing figures at the
start, websites ’appreciate’ over time. Happy visitors will link to your
site, and people will follow these links and become returning visitors.
That is, if your site is good.
Also: link to HTML Source! There, that’s my promotion done...
Fundamental Optimisation
I’m sure you’re all aware of the need for optimisation — the Internet is
often very slow. A website that does not load quickly is a website that
rarely gets read. People are getting more impatient, and now that
there is so much choice, if your site doesn’t give a reader what they’re
looking for quickly, you’ll never be heard. You can find out all about
this in the optimisation section, but for now, here are some of the most
basic ideas that you should adhere to when coding webpages:
• Use only a few small images on each page. If you’re going to have large images,
only have one or two per page, or use thumbnails. Always use the height, width
and alt attributes.
• Don’t use animated GIFs when a static one would have done the same job.
Animations are often distracting page elements.
• Optimise your graphics as much as you can. It’s a less advanced process than you
probably think.
• Leave out most multimedia effects.
• Split long pages into a few smaller ones.
The Golden Rule

And the one notion that will sum up the attitude you’re going to need
to become a good web-designer?
Be willing to learn and improve.
You’ll never produce a perfect site design, much like you can never
produce a perfect painting — your work can always improve. Accept
criticism of your work (however hard it may be), and work to sort out
the problems you and others see. Update your site as much as you
can, and redesign it every few months. Care about the quality of your
work. Continue to learn new techniques and keep on top of new
developments in the world of web-design; look at well-designed sites
and pick out elements that you like from them; answer your email;
listen to good music; sketch down ideas; and above all have fun at it.
So what’s next?
Ok, you want more? Well continue on through HTML Source then! Have
a squint through the Full Index, and here are a couple of other basic
tutorials for you:
• text > Lists

• text > Internal Links
• images > Further Attributes
• tables > Basic Tables
• stylesheets > Introduction to CSS
• accessibility > Website Navigation
• accessibility > Non-dithering Colours
• accessibility > 10 Bad Things
• accessibility > Logical Style
Keep Learning // HTML Tag Reference → Go! Go!

Other My First Site Articles // My First Page · Basic Formatting ·
Basic Links · Basic Images · <body> Attributes · Basic Web Design ·
HTML Tag Reference · Uploading your Site ·
What’s Related //
Homepage · Full Index · Section Index
bookmark this on Delicious
Starting Off
Start Here ·
My First Site ·
Lessons
Text ·
Images ·
Tables ·
Frames ·
Forms ·
Stylesheets ·
Scripting
JavaScript ·
CGI Scripting ·
Advanced
Accessibility ·
Promotion ·
Optimisation ·
Site Management ·
Reviews
Web Hosting ·
Books ·
New!→
Recommendations ·
HTML Source Toolbox ¤
Love us?
Add HTML Source to your bookmarks!
Printable pages
Just print pages normally, our stylesheet will automatically reformat the page for you.
Translations ¤
Translate automatically into:
Valid code, naturally

We use (and teach!) only the finest valid HTML and CSS, for your comfort and safety.
HTML Source is by me, Ross Shannon. I’m a web designer from

Ireland, and am currently finishing my PhD in Computer Science.
You can support HTML Source by making a small donation.
Thanks to our wonderful supporters!

Having fun? Getting lost? Got some comments?
Lists
by Ross Shannon
Lists are a great way of laying out information in web pages, because
they are simple to read and look good. Lots of people seem to think
that the bullet points are little images, but in reality they are all
generated through some rather simple HTML code. There are a couple
of different types of lists too — check it out below.
Page Navigation:
Unordered Lists · Different Bullets | Ordered Lists · Different types of
numbers · Changing the start-point | Definition Lists
Unordered Lists
Lists follow a common skeleton every time — an outer container tag,
and a new tag for each bullet. Observe:
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
</ul>
Which would create:
• Bullet 1
• Bullet 2
• Bullet 3
Let’s explain:
<ul>
stands for Unordered List, which means that the bullets are not ranked or
numbered in any way, they’re all the same.
<li>
means List Item, each one corresponding to a bullet.
Closing </li> tags are not strictly necessary in HTML 4, but I
recommend that you always use them. They’ll help your
stylesheets work better and will make a future transition to
XHTML much easier. Leaving them out now may leave you with a
tonne of work in the future.
You also don’t need to add in line breaks to go on to the next
point, it will all be taken care of for you. Once a block of text is
made into a bullet you can continue on formatting the text
normally, and adding in paragraphs, images and the like.
Different bullets
It’s a simple matter of adding an attribute to change the nature of your

bullets. For square ones, add type="square", and for empty circles, add
type="circle" to the ul tag. They can also be added to lis to affect
individual points. Examples:
 Is it a square? Oh, good.
o And this is a circle. Joy.
If you nest your lists (put one inside another), they will be indented
underneath and the bullet type will change to show the transition, from
disc (the default, full circle) to circle to square. Of course you can step in
and change this order manually if you want. Note that these values
must all be in lowercase.
Ordered Lists
If you want your list to be ordered instead of unordered, it’s a simple
matter of just substituting the <ul> elements with <ol>s, which of
course stand for Ordered Lists.
<ol>
<li>List Item 1</li>
</ol>
This will create:
1. List Item 1
2. List Item 2
3. List Item 3
See? All that was changed was that one letter. Beyond that, the rest of
the structure remains intact, meaning you still use lis the same you did
already. Your browser will keep adding numbers if you keep adding list
items. You can add or take away any of the items and the list will
renumber itself into order.
You can nest different types of lists into each other if you want, just
remember to close them correctly. The progression of bullet-types that
happens when you nest still occurs if you put it under an ol.
Different types of numbers
You can change the stylings of your ordered lists too, with the same
attribute syntax as before, just using different values. You can do
Roman numerals, letters, and both of the above in small characters.
The full list:
A. type="A"
a. type="a"
I. type="I"
i. type="i"
Note that even if the list was to be labelled ’b’ or ’iv’, the attribute
value is still set as the first number — i.e. ‘a’ and ‘i’.
Changing the start-point
If you need to start the count at a number other than 1, you just add
another attribute, like so:
<ol start="5">
You can also step in the middle of a list and change the number of an
item (and therefore all of the items that follow). Add value="9" to an
item and the list will skip its numbering to 9 and then continue on to
ten and onwards from there.
Definition Lists
There is this third list type, useful for information that comes in pairs.
The tag for a definition list is, predictably <dl>. A one-term list would
look like this:
<dl>
<dt>Ross Shannon</dt>
<dd><em>noun</em>; Red-haired rascal.</dd>
</dl>
And that’ll create:
Ross Shannon
noun; Red-haired rascal.
<dt>
stands for Definition Term. It is not indented.
<dd>
stands for Definition Description. It appears indented. You don’t have to keep
these tags in pairs, many dds are allowed under the same dt. Also, don’t worry —
you can use these lists for any purpose without compromising their logical
meaning. ‘Definition’ lists was just a misleading name they were given. Once
again, the end tags aren’t strictly necessary, but take it from someone who knows:
use them.
And that's the lot.
Internal Links
by Ross Shannon
Instead of having to resort to the arduous task of scrolling down long
pages, you can make your readers very happy by offering them page
jumps as an alternative mode of transport around your site. As people
have become lazier, page jumps have risen in popularity, so to avoid
having your site unliked by the youth of today, implement these simple
navigational aids.
Page Navigation:
Section Names · Linking to parts of other documents | What to use it
for | Naming Sections with id
Section Names
Basically, page jumps are just links (they use the same <a> element
as all links), but links that point to a certain part of a document. This is
done by assigning names to parts of your page, and then making
the link by referring to that section.
Page jumps are done by using the name attribute of the a element. So,
say you wanted a link to the top of your page, you would add an
anchor like this near the top of your document (inside the <body>
element, of course):
<a name="top"></a>
There doesn’t need to be anything between the opening and closing
tags. Then, in the place you want to place the link, put
<a href="#top">link to top</a>
Notice the hash mark (#). That tells the browser that it’s a section of
a page it’s looking for, and not a separate page or folder. So just make
a link to the section you named earlier (you can name the link to the
top anything you want, but keeping it memorable and simple always
works out best) by putting a # in front of whatever name you gave it.
Always remember, the # goes in the href attribute’s value, not in the
name.
Linking to parts of other documents
This is excellent. You can target specific sections of other pages by

adding the #name bit on to the end of the href. The part after the hash
mark is known as a “fragment identifier.” For instance, to link to the
first section of this tutorial from somewhere else, you would write
<a href="http://www.yourhtmlsource.com/
text/internallinks.html#section-names">
Of course, the sections you can link to are restricted by which sections
actually exist on the page you’re linking to. View the HTML source code
(go to View > Source) of a page you want to link to and see if they
have any sections named.
What to use it for
The obvious favourite to use this for is to link back to the top of the
page from the bottom. This is because once you have scrolled down a
bit, all the navigation links that are usually placed at the top of the
page are lost. So if you link the person back up, they once again have
links to the rest of your site in front of them.
Another popular implementation is to eliminate scrolling completely on
long pages by splitting it up and having a row of links to the main
headlines on the page, like we’ve done with our page navigation boxes
near the top of each tutorial.
Naming Sections with id

A slightly more modern way of allowing links to be pointed at arbitrary
parts of your page is to use the id attribute, which can be applied to
any HTML element. This means you don’t need to keep setting up new
empty a elements throughout your page; you can simply add a unique
id value to an existing element.
For example, here’s how you set up a link using the charming old
ways:
<a name="original"></a>
<h2>Original style, using named links.</h2>
Instead of introducing that superfluous a element, the new ways allow
us to simply add an id attribute to our pre-existing heading element.
Observe:
<h2 id="modern">Modern style, using id values.</h2>
You’ll note that throughout this site, I use the older style of internal
links. That’s because this site has been going for a long time. Sanity
requires that I don’t attempt to go back and update them all as it
would take many moons, but if you’re making the decision on which
style of internal links to use on a younger site, take the opportunity to
use id attributes.
Further Attributes
by Ross Shannon
Now that you know the basics of adding an image to a webpage, you'll
want to learn these most basic of attributes for making your images
accessible and presentable.
Page Navigation:
height and width · Where are the numbers? | The alt attribute | Image
Margins
( Note: if you're looking for how to align images, that's over here )
height and width

Before an image has downloaded, a box will appear showing where on
the page it will be. This box may be any size, and often the wrong size.
Then, when the image finally begins to download, it is suddenly found
to be too big for the space your browser has given it, and so
everything has to be shifted around to make room, messing up
whatever you were reading at the time and generally causing a
disturbance. You can prevent this with the height and width image
attributes.
The concept is simple: you input the dimensions of your image in
pixels into your HTML code. This tells the browser how much space to
leave empty, ready for your image, ensuring that no post-load shifting
goes on, and keeping your layout correct all the way through the
download process. Example:
<img src="line.gif" height="3" width="500">
Giving the correct size has many advantages:
• It stops the loading mess-ups

• Your page appears to be loading faster, as everything is in place
• If people have images turned off, they still get the same page layout
You can also change the size of the images displayed in the browser.
Note that this does not change the filesize of the image. Nor will it
make any permanent changes to the image. It is just twiddling the
image in the browser, nothing more. All you do is put in whatever height
and width you want. See those horizontal blue lines I use further up the
page there? They are actually 1x1 pixel images made to their shape by
this sort of manipulation.
Some images resize better than others. Photographs and the like will
look terrible if you start resizing them with these attributes. Simple
blocky images will be fine, and in fact you can make these small in
your image editor and then multiply their size in your browser, which
makes the image load faster as the filesize will be smaller.
Where are the numbers?
If you don't know the dimensions of your images you can find it out in
a number of places. When you have the image open in your graphics
editor, it should have the dimensions somewhere on the screen, in the
form 120 x 80 x 16. These numbers correspond to the width, height,
and number of colours.
Otherwise, in your browser right-click on the image and select
'properties'. Beware, however, that this shows the display size, so if the
image you're checking has already been resized, you're going to get
that size. Some of the better HTML editors will add in the heights and
widths for you, saving you the hassle.
And never, EVER downsize the image with these attributes — do it in
your image editor. You'll be showing a small image and downloading
big ones. Nasty.
The alt attribute

You know the way when you leave your mouse pointer over an image
for a while a little box pops up with text in it? That is the alt attribute at
work. It was invented so that people who can't view images, or have
them turned off, get an ALTernative, so that they at least know what
would have been there. Use it like this:
<img src="tree.gif" alt="A lovely tree">
This text will appear in the box waiting for the image to download too,
so the reader knows what's coming. This is yet another reason to use
height and width, as the text you input as an alt will stretch these boxes.
With the attributes in place this won't mess anything up. Also, for any
blind readers that you may have, the alt text is read out to them by
their computer.
You can use the alt attribute to offer further information about an
image, but it's proper usage is to function as a replacement for the
image, so try not to leave anything too ambiguous. The alt attribute is
the centre of much discussion — have a read of some » guidelines on
alt texts.
If you need to include characters like quotation marks in your alt tag,
you have to use the " entity reference, so you don't end the
attribute by accident. You could also substitute single quotes in for the
double quotes.
Image Margins
You can give your images some breathing space by using two more
attributes — hspace and vspace — which stand for Horizontal and
Vertical space. These are great — they will add some padding to the
sides of your images and push any text near the image away. A typical
line of code goes like this:
<img src="go.gif" hspace="10" vspace="10">
As you can see from the image's border, the text is 10 pixels away
from it (and the image is 10 pixels from the right border of the table
cell too).
And that's that. Make sure you use the three top attributes, and you
can use the other two spacing ones whenever they're needed. They
improve the usability of your site, and make it look better too.
Keep Learning // Image File Formats → Go! Go!
Other Images Articles // Further Attributes · Image File Formats ·
Thumbnails · Image Rollovers · Image Maps · Pre-Loading Images ·
Embedding Multimedia · Single pixel images
What’s Related // Software Review · Optimising Images
Homepage · Full Index · Section Index
bookmark this on Delicious
Starting Off
Start Here ·
My First Site ·
Lessons
Text ·
Images ·
Tables ·
Frames ·
Forms ·
Stylesheets ·
Scripting
JavaScript ·
CGI Scripting ·
Advanced
Accessibility ·
Promotion ·
Optimisation ·
Site Management ·
Reviews
Web Hosting ·
Books ·
New!→
Recommendations ·
HTML Source Toolbox ¤
Love us?
Printable pages
Just print pages normally, our stylesheet will automatically reformat the page for you.
Translations ¤
Translate automatically into:
Valid code, naturally

We use (and teach!) only the finest valid HTML and CSS, for your comfort and safety.
HTML Source is by me, Ross Shannon. I’m a web designer from
Ireland, and am currently finishing my PhD in Computer Science.
You can support HTML Source by making a small donation.
Thanks to our wonderful supporters!

Having fun? Getting lost? Got some comments?
We

HTML Tag Reference

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tag Reference

Uploaded by

Copyright:

Available Formats

HTML Tag Reference

The History of HTML

A Basic Page Format

Structure of HTML Elements

So let’s make a page

My text goes here.

Saving your masterpiece

So let’s see them!

Oh, that's my cue. Ok: here are the examples:

Linking to email addresses

Absolute and Relative Links

On outward links (links to other sites), you must always remember to

Aligned middle. Are you getting this yet?

Aligned bottom, keeping everything all straight.

The <body> tag

When you click on a link, it changes colour momentarily, to show you

• For Internet Explorer: topmargin="0" and leftmargin="0"

Despite this, the units of measurement are the same — pixels, so to

Step into Style

A word on colour schemes

Pick your background well

Basic Web Design

The Golden Rule

• text > Lists

Keep Learning // HTML Tag Reference → Go! Go!

Valid code, naturally

HTML Source is by me, Ross Shannon. I’m a web designer from

Thanks to our wonderful supporters!

It’s a simple matter of adding an attribute to change the nature of your

o And this is a circle. Joy.

Different types of numbers

Changing the start-point

Linking to parts of other documents

This is excellent. You can target specific sections of other pages by

Naming Sections with id

height and width

• It stops the loading mess-ups

Where are the numbers?

The alt attribute

Valid code, naturally

Thanks to our wonderful supporters!

You might also like