HTML Reference In Lesson Order
Click on a Tag Name to see the reference for that HTML Tag.
Click on an Associated Lesson to see how the HTML Tag is used.
Other HTML Reference Tables
DTD: indicates the DTD in which the tag is allowed. F=Frameset, T=Transitional and S=Strict.
|HTML Basic Lesson 2 - Basic HTML Structure
We start this lesson by exploring the syntax behind a HTML element, by explaining start and end tags, tag attributes and some of the terminology commonly used. After this we take a quick tour on the the basic structure of a HTML document. The lesson ends with a second practical where we add some HTML elements to the file we created in Lesson 1 and compare the results.
|<body>||Specifies the document body element of a HTML document.||Structure||FTS|
|<head>||Specifies the document head element of a HTML document.||Structure||FTS|
|<html>||Specifies the document root element of a HTML document.||Structure||FTS|
|<title>||Defines the document title element of a HTML file.||Meta||FTS|
|HTML Basic Lesson 3 - Headings
With the basic structure of a HTML document behind us and an understanding of HTML syntax it's time to add some meat to our documents with the HTML heading tags. In this lessons practical we introduce each of the 6 heading tags and explain what they mean.
|<h1> - <h6>||Used to define the six HTML headings for use in our HTML code.||Formatting||FTS|
|HTML Basic Lesson 4 - Paragraphs and Line breaks
Ok we have lots of headings but we need some text content to make them meaningful: welcome to the paragraph HTML tag. The practical explains the use of the paragraph tag and we also check out the line break tag to see how these two tags affect our web page.
|<br>||Used to define a line break in our HTML code.||Basic||FTS|
|<p>||Used for creating a paragraph of the enclosed content.||Basic||FTS|
|HTML Basic Lesson 5 - Emphasising Text
So now we have brought some structure to our content with the use of the headings, paragraph and forced line break tags. Its time to learn how to make important textual stuff stand out from the crowd.
|<em>||Used to define text to be emphasised in our HTML code.||Formatting||FTS|
|<strong>||Used to define text to be strongly emphasised in our HTML code.||Formatting||FTS|
|HTML Basic Lesson 6 - Ordered and Unordered Lists
Everything you wanted to know about lists and were afraid to ask. Lists are great for all sorts of things including navigation bars, collections of links and anything that needs to appear, well in a list. We give you the lowdown on ordered and unordered lists in the HTML Basics tutorial.
|<li>||used to define a list item in an an ordered or unordered list.||Lists||FTS|
|<ol>||Used to define an ordered list in our HTML code.||Lists||FTS|
|<ul>||Defines an unordered list in our HTML code.||Lists||FTS|
|HTML Basic Lesson 7 - Images
Although the majority of a web page is informational text, images really improve a web page. So liven up your web pages with images and see how well placed images can really enhance a web page. Basic image use is the topic of this lesson and the practical sees us adding some imagery to our web page.
|<img />||Create an area on the page to hold the referenced image.||Images||FTS|
|HTML Basic Lesson 8 - Links
Links are what help us and visitors to our web sites navigate our way around the various pages that make up the site. This lesson is all about linking to other documents or parts of documents. Whether it is paragraphs on the same page, other pages on the same website or even external links, we see how to do it here.
|<a>||Used to define an anchor for links and hyperlinks.||Links||FTS|
|HTML Intermediate Lesson 1 - What is XHTML?
In this lesson we introduce XHTML to the party and discuss the differences between HTML and XHTML. We include comments in our documents for the first time using the comment tag. We also let the browser know which version of HTML/XHTML we are using with the !DOCTYPE tag.
|<!--...-->||Allows us to put explanatory comments into our code.||Basic||FTS|
|<!DOCTYPE>||Tells browser which version of HTML/XHTML we're using in our HTML.||Basic||FTS|
|HTML Intermediate Lesson 2 - More HTML Structure
In Lesson 2 of the Basic HTML Tutorials we explored basic HTML structure, it's now time to introduce the other structural tags. In this lesson we learn about the div and span tags and how they affect the structure of our HTML.
|<div>||Used to group blocks of HTML together for styling with CSS.||Structure||FTS|
|<span>||Used to group some inline HTML together for styling with CSS.||Structure||FTS|
|HTML Intermediate Lesson 3 - Formatting Text
In Lesson 5 of the Basic HTML tutorials we showed how to emphasise text using the em and strong tags. In this lesson we introduce a lot more tags that change the appearance of our text.
|<cite>||Used to define a citation in our HTML code.||Formatting||FTS|
|<code>||Used to define text that looks like computer code.||Formatting||FTS|
|<del>||Used to define editorial deletions in some text.||Formatting||FTS|
|<dfn>||Used to define a definition term in our HTML code.||Formatting||FTS|
|<ins>||Used to define editorial insertions in our text.||Formatting||FTS|
|<kbd>||Used to define keyboard text in our HTML code.||Formatting||FTS|
|<samp>||Used to define text that looks like sample computer code.||Formatting||FTS|
|<var>||Used to define text that looks like a computer variable.||Formatting||FTS|
|HTML Intermediate Lesson 4 - Definition Lists
In Lesson 6 of the Basic HTML Tutorials we showed how to create ordered and unordered lists. In this lesson we introduce our final list, the definition list. Definition lists are commonly used for glossaries, lists of terms and the such and can include pictures, movies and other multimedia entries.
|<dd>||Define a definition description, of the definition term, in a definition list.||Lists||FTS|
|<dl>||Used to define a definition list in our HTML code.||Lists||FTS|
|<dt>||Used to define a definition term within a definition list||Lists||FTS|
|HTML Intermediate Lesson 5 - More About Links
In Lesson 8 of the Basic HTML Tutorials we showed how to utilize links and hyperlinks to navigate our way around. In this lesson we firstly explain what URLs are all about and then we show you how to set a base URL for the links on your current page. All links within the page will be relative to the base location specified. This tag is only allowed within the head element.
|<base>||Used to define a base URL for the links on a page.||Links||FTS|
|HTML Intermediate Lesson 6 - An Introduction To Tables
We need a way to show tabular data on our web pages in neat rows and columns, possibly with headers and footers. We can do this in HTML using the table element. This element has several tags associated with it and numerous attributes available to alter the table dynamics. This lesson goes into the basics of table formation and how to use the tags.
|<table>||Used to define a table for displaying tabular data.||Tables||FTS|
|<td>||Used to define a table cell within a table element.||Tables||FTS|
|<th>||Used to define a heading within a table element.||Tables||FTS|
|<tr>||Used to define a row within a table element.||Tables||FTS|
|HTML Intermediate Lesson 7 - Getting To Grips With Forms
Until now we haven't seen how a user can enter information onto the web page. To allow user input we create a form using the form tag and its action attribute. There are several other tags and attributes available for use with the form tag, some of which are the subject of this tutorial.
|<form>||Used to define an anchor for links and hyperlinks||Forms||FTS|
|<input />||Used to define an area of a form for user input.||Forms||FTS|
|<label>||Label for an input, select or textarea element of a form.||Forms||FTS|
|<textarea>||Used to define used to define a multiple line area for text input.||Forms||FTS|
|<link>||Link to external resource such as an image or stylesheet from a HTML file.||Import||FTS|
|<meta>||Allows us to send metadata about the data within our HTML file.||Meta||FTS|
|<script>||Define a scripting language within the HTML document.||Programming||FTS|
|<style>||Allows us to put style information into our HTML documents.||Style||FTS|
|HTML Advanced Lesson 2 - A Final Tour Of Text Tags
In Lesson 5 of the Basic HTML tutorials and Lesson 3 of the Intermediate HTML tutorials we looked at most of the text tags available for formatting our text. In this lesson we introduce the final HTML text tags and show you when and how to use them.
|<pre>||Used to define preformatted text in our HTML code.||Formatting||FTS|
|<q>||Used to define a short inline quotation in our HTML code.||Formatting||FTS|
|<abbr>||Used to define an abbreviation in our HTML code.||Formatting||FTS|
|<acronym>||Used to define an acronym in our HTML code.||Formatting||FTS|
|<address>||Used to define an address in our HTML code.||Formatting||FTS|
|<bdo>||Defines a birectional override for some text.||Formatting||FTS|
|<blockquote>||Used to define long quotations in our HTML code.||Formatting||FTS|
|HTML Advanced Lesson 3 - Interactive Images
In Lesson 7 of the Intermediate HTML tutorials we looked at enhancing our web pages with images. Now we find out how to make those images interactive by allowing the user to click on parts of the image to process an action.
|<map>||Define a client-side image map that has clickable areas.||Images||FTS|
|<area>||Defines clickable areas of a client-side image.||Image||FTS|
|HTML Advanced Lesson 4 - Embedded Objects
In this lesson we find out how to embed objects into our HTML and pass parameters to the objects.
|<object>||Used to define an embedded object in our HTML.||Programming||FTS|
|<param>||Used in the object element to define parameters for the embedded object.||Programming||FTS|
|HTML Advanced Lesson 5 - A Final Trip to Tablesville
In lesson 6 of the HTML Intermediate Tutorials we started learning about tables, to make our tabular data look neat and tidy. We used table header and data information within table rows for basic table formation. In this lesson we revisit tables and look at the HTML tags associated with tables we haven't used so far.
|<caption>||Specifies a name for the table element in question.||Tables||FTS|
|<col>||Used to specify criteria for a table column.||Tables||FTS|
|<colgroup>||Used to specify criteria for a group of columns.||Tables||FTS|
|<tbody>||Used to define group body information within a table.||Tables||FTS|
|<tfoot>||Used to define group footer information within a table.||Tables||FTS|
|<thead>||Used to define group header information within a table.||Tables||FTS|
|HTML Advanced Lesson 6 - Advanced Forms
In lesson 7 of the HTML Intermediate Tutorials we took a first look at forms, and introduced the input, label and textarea tags for use inside the form element. In this lesson we take a final look at forms with the remaining HTML tags we haven't used for form entry so far.
|<button>||Defines a clickable button in our HTML code.||Forms||FTS|
|<fieldset>||Used for grouping form elements together.||Forms||FTS|
|<legend>||Used for defining a title for a fieldset element.||Forms||FTS|
|<optgroup>||Used to define a group of related options within a select element.||Forms||FTS|
|<option>||Used to define a selectable option within a select element.||Forms||FTS|
|<select>||Used to define a drop-down list for selection.||Forms||FTS|
|HTML Advanced Lesson 7 - Inline Frames
In this tutorial we learn how to define an inline window that holds another document.
|<iframe>||Defines an inline window that holds another document.||Forms||FT|
|HTML Advanced Lesson 9 - Tags To Avoid
In this chapter we discuss the tags that are not part of the HTML/XHTML strict DTDs and presentational tags that are better left to CSS.
|<applet>||Deprecated. Defines an embedded Java applet.||Programming||FT|
|<b>||Presentational. Used for making bold text.||Formatting||FTS|
|<basefont>||Deprecated. Specifies font values for the entire HTML document.||Meta||FT|
|<big>||Presentational. Used for defining a large text style.||Formatting||FTS|
|<center>||Deprecated. Used for centring text in HTML code.||Formatting||FT|
|<dir>||Deprecated. Used to define a directory list.||Lists||FT|
|<font>||Deprecated. Used for specifying font, font size and font colour.||Formatting||FT|
|<frame>||Frames. Defines a subwindow that holds another document.||Frames||F|
|<frameset>||Frames. Define a frameset that holds two or more documents.||Frames||F|
|<hr>||Used to define a horizontal rule in our HTML code.||Basics||FTS|
|<i>||Presentational. Used to define italic text in our HTML code.||Formatting||FTS|
|<iframe>||Deprecated. Define an inline window that holds another document.||Frames||FT|
|<isindex>||Deprecated. Used for making a single line input control prompt.||Forms||FT|
|<noframes>||Frames. Used to define content to render when frames are unavailable.||Frames||F|
|<s>||Deprecated. Used for making a strike through text style.||Formatting||FT|
|<small>||Presentational. Used for defining a small text style.||Forms||FTS|
|<strike>||Deprecated. Used for making strike through text.||Forms||FT|
|<sub>||Presentational. Used for defining subscript text.||Formatting||FTS|
|<sup>||Presentational. Used for defining superscript text.||Formatting||FTS|
|<tt>||Presentational. Used for defining teletype or monospaced style text.||Formatting||FTS|
|<u>||Deprecated. Used to underline text in our HTML code.||Formatting||FT|