html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Basics

HTML Tag Reference In Lesson Order

Click on an Associated Lesson to see how the HTML Tag is used.

Click on a Tag Name to see the reference for that HTML Tag.

Other HTML4 Reference Tables


HTML Tags in Alphabetical Order

HTML Tags in Function Order

DTD: indicates the DTD in which the tag is allowed. F=Frameset, T=Transitional and S=Strict.

Tag Reference In Lesson Order
Lesson Tag Name Description Function DTD
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 HTML4 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
HTML4 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
HTML4 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
HTML4 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
HTML4 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
HTML4 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
HTML4 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
HTML4 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
HTML4 Advanced Lesson 1 - Importing CSS and JavaScript

In this lesson we find out how to import external CSS files using the link tag. We then look at importing external JavaScript files into our HTML documents using the script tag. We also use the meta tag to insert meta information into our HTML documents. Finally we take a look at inline styles using the style tag and how to deal with JavaScript being turned off using the noscript tag.

<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
<noscript> Allows non script based rendering when JavaScript is turned off. Programming 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
HTML4 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
HTML4 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
HTML4 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
HTML4 Advanced Lesson 5 - A Final Trip to Tablesville

In lesson 6 of the HTML4 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
HTML4 Advanced Lesson 6 - Advanced Forms

In lesson 7 of the HTML4 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
HTML4 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
HTML4 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
<menu> Deprecated. Used for defining a menu list. Lists 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


HTML Tags Functionally   << Prev          Next>>    CSS Properties Alphabetically


go to home page Homepage go to top of page Top