Here is a reference of HTML tags, good for students and web developers. I hope you find it very useful.
<!-- -->
Used for commenting. Any text placed in between these will be visible in the source code, but will not render on the page.
Example Usage:
<!-- This is a comment that will not be seen in-->
Should appear at the top of every HTML document, this informs the browser which XHTML/HTML specification you are using.
Example Usage:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Used for defining external documents or a location on the current page.
Example Usage:
<a href=”http://www.google.com”>Google</a> - Link to External
<a href=”#top”>Jump to the top of this page</a> - Anchor Inside Document
Used for marking up abbreviations in your document.
Example Usage:
<abbr title=”et cetera”>etc.</abbr>
Used for marking up acronyms in your document.
Example Usage:
<acronym title=”Advanced Technology Extended”>ATX</acronym>
Used to define addresses and signatures in documents.
Example Usage:
<address>Juan Dela Cruz<br />
1234 San Carlos<br />
Green Town</address>
Embedded applets are defined using this tag.
applet was deprecated in HTML 4.01
Used for defining an area inside of an image map.
Example Usage:
<img src="myimage.jpg" alt="My Image" usemap="#myimage" />
<map id="myimage" name="myimage">
<area shape="rect" coords="0,0,50,100" href="http://www.google.com" target="_blank" />
</map>
Used for defining bold text.
Example Usage:
<b>This text is bold</b>
Used for specifying a default URL for all images and links without a predefined url in the document.
Example Usage:
<base href="http://www.allaboutprog.blogspot.com/" />
Used for specifying a default font in the document.
This tag was deprecated in HTML 4.01.
Used for overriding the direction of a string.
Example Usage:
<bdo dir="rtl">This text is backwards</bdo>
Used for formatting a string of text larger than default.
Example Usage:
<big>This is some pretty big text</big>
Used for defining long quotations.
Example Usage:
<blockquote>"And that’s the end of that chapter"</blockquote>
Used for identifying the beginning and end of content in the document.
Example Usage:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
Used for inserting a line break.
Example Usage:
To Whom it May Concern,<br />I just successfully inserted a line break.
Used for creating a form button. It’s similar to the input element in every way, except you can wrap images and text using the button tag.
Example Usage:
<button>I’m a Button!</button>
Used for adding a center aligned caption above a table.
Example Usage:
<table>
<caption>Say Cheese!</caption>
<tr>
<td>Cell data</td>
</tr>
</table>
Used for center aligning.
This tag was deprecated in HTML 4.01.
Used for proper text formatting of citeing.
Example Usage:
<cite>Webster’s Dictionary</cite>
Used for computer code formatting.
Example Usage:
<code>This is some computer code text</code>
Used for defining the attributes of columns in a table.
Example Usage:
<table>
<colgroup span="2">
<col width="20"></col>
<col width="30"></col>
</colgroup>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Used for defining groups of table columns.
Example Usage:
<table>
<colgroup span="2">
<col width="20"></col>
<col width="30"></col>
</colgroup>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Used for defining the description of a term in a definition list.
Example Usage:
<dl>
<dt>Kool-Aid</dt>
<dd>Delicious Beverage</dd>
<dt>Milk</dt>
<dd>Nutricious Beverage</dd>
</dl>
Used for defining deleted text, formats with a strike-through.
Example Usage:
The answer is <del>false</del> true
Used for defining a directory list.
This tag was deprecated in HTML 4.01.
Used for defining a division in a document. This is commonly used to wrap elements and then format them properly using cascading style sheets.
Example Usage:
<div>This is some text inside of a div</div>
Used for proper text formatting of a definition term.
Example Usage:
<dfn>This is a definition term</dfn>
Used for defining a definition list.
Example Usage:
<dl>
<dt>Kool-Aid</dt>
<dd>Delicious Beverage</dd>
<dt>Milk</dt>
<dd>Nutricious Beverage</dd>
</dl>
Used for defining a definition term.
Example Usage:
<dl>
<dt>Kool-Aid</dt>
<dd>Delicious Beverage</dd>
<dt>Milk</dt>
<dd>Nutricious Beverage</dd>
</dl>
Used for defining emphasized text, this will italicize the text.
Example Usage:
<em>This text is italicized</em>
Used for drawing a padded, outlined box around the data enclosed.
Example Usage:
<fieldset>Test Data</fieldset>
Used for opening a new form group, where all enclosed form elements will submit their data to the defined destination.
Example Usage:
<form action="mail.php" method="post">
Your Email: <input type="text" name="email" />
<input type="submit" />
</form>
Used for defining headers in your article. h1 being the largest and h6 being the smallest.
Example Usage:
<h2>Testing Header 2</h2>
Used for defining information on your document. Can include the following tags: title, style, script, meta, link, base.
Example Usage:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
Used for displaying a horizontal rule. This creates a line break and displays a horizontal bar across the page.
Example Usage:
Hello<hr />My name is Joe
Used for opening an HTML document, this should appear at the top of all your html documents underneath the DOCTYPE tag.
Example Usage:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
Used to indicate that the enclosed text must be rendered in a italic (slanted) typeface.
Example Usage:
<b>This text is italized</b>
Used for displaying an inline frame in your document that sources an external one.
Example Usage:
<iframe src="http://www.google.com" width="500" height="300"></iframe>
Used for displaying an image in a document.
Example Usage:
<img src="image.jpg" width="100" height="100" alt="My Image" border="0" />
Used for defining an input field form element.
Example Usage:
Your Email: <input type="text" name="email" />
Used for defining inserted text (gives an underline effect)
Example Usage:
The winner is <ins>you</ins>
Used for defining keyboard formatted text.
Example Usage:
<kbd>This is keyboard formatted text</kbd>
Used for defining the label of a form element. Most commonly used on check boxes and radio buttons to provide extended control (many users prefer clicking on the text rather than the box).
Example Usage:
<input type="radio" name="test" id="test" value="1" /> <label for="test">Testing</label>
Used for defining the title of a fieldset
Example Usage:
<fieldset><legend>The Title</legend>Testing</fieldset>
Used for defining a list item in an ordered (ol) or unordered (ul) list.
Example Usage:
<li>This is a list item</li>
Used for defining the relationship between 2 documents. Commonly used for defining external cascading style sheets.
Example Usage:
<link rel="stylesheet" type="text/css" href="global.css" />
Used for image mapping. This allows you to define multiple regions on your image that are clickable.
Example Usage:
<img src="myimage.jpg" alt="My Image" usemap="#myimage" />
<map id="myimage" name="myimage">
<area shape="rect" coords="0,0,50,100" href="http://www.google.com" target="_blank" />
</map>
Used for providing meta information to search engines.
Example Usage:
<meta name="description" content="This is the short description of my page that spiders like Google will read and index" />
Used for outputting a message to the user if they’re not able to execute document frames. This tag must be placed inside the frameset element.
Example Usage:
<noframes>Your browser is ancient and isn’t able to render the frames on this page.</noframes>
Used for outputting a message to the user if they’re not able to execute your script.
Example Usage:
<noscript>You would have seen something nice here, but your browser does not support JavaScript</noscript>
Used for embedding an object into your document. Most common uses are Flash and other forms of multimedia.
Example Usage:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″
width=”300″ height=”120″>
<param name=”movie” value=”flash.swf”>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#FFFFFF”>
</object>
Used for displaying an ordered (1, 2, 3…) list.
Example Usage:
<ol>
<li>This is 1</li>
<li>This is 2</li>
</ol>
Used for defining a group of options in a drop down (select list).
Example Usage:
<select>
<optgroup label="Option Group 1">
<option value="01">Option 01</option>
</optgroup>
</select>
Used for defining individual items in a drop down (select) list.
Example Usage:
<select>
<option value="01">Option 01</option>
</select>
Used for defining a paragraph. By default it adds spacing and line breaks above and below the enclosed text.
Example Usage:
<p>This is my paragraph</p>
Defines parameters on objects.
Example Usage:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″
width=”300″ height=”120″>
<param name=”movie” value=”flash.swf”>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#FFFFFF”>
</object>
Used for rendering preformatted text. This preserves line breaks and spaces without the need for additional html code.
Example Usage:
<pre>This text is preformatted</pre>
Used for defining short quotations.
Example Usage:
<q>And that’s how I did it</q> said Joe
Used for formatting text like computer code.
Example Usage:
<samp>Sample text</samp>
Used for defining script in a document, most commonly JavaScript.
Example Usage:
<script type="text/javascript"></script>
Form element used for displaying a single or multi-line selectable list.
Example Usage:
<select>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
Used for defining small text.
Example Usage:
<small>This text is small</small>
Used for defining a section in a document. Typically used as a replacement for the font tag to add style to a section of text.
Example Usage:
Today is a <span >cold day</span>
Used for adding a strike through the middle of a strong of text.
This tag was deprecated in HTML 4.01.
Used for placing emphasis on text, bold effect.
Example Usage:
Welcome Back, <strong>Joe Somebody</strong>
Used for defining styles (CSS).
Example Usage:
<style type="text/css">
body { background-color: #000000; }
</style>
Used for subscripted text.
Example Usage:
I’m feeling <sub>down</sub> today
Used for superscripted text.
Example Usage:
E=mc<sup>2</sup>
Used for opening a new table.
Example Usage:
<table>
<tr>
<td>Testing</td>
</tr>
</table>
Used for defining the body of a table.
Example Usage:
<table>
<thead><tr><td>Testing the thead</td></tr></thead>
<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>
<tbody><tr><td>Testing the tbody</td></tr></tbody>
</table>
Used for defining table cells/columns.
Example Usage:
<table>
<tr>
<td>Testing</td>
</tr>
</table>
Used for multi-line text-area form elements.
Example Usage:
<textarea rows=”3″ cols=”30″>This is a text area…</textarea>
Defines a table footer.
Example Usage:
<table>
<thead><tr><td>Testing the thead</td></tr></thead>
<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>
<tbody><tr><td>Testing the tbody</td></tr></tbody>
</table>
Defines a table heading on individual cells.
Example Usage:
<table>
<tr>
<th>Head 1</th><th>Head 2</th><th>Head 3</th>
</tr>
<tr>
<td>Content 1</td><td>Content 2</td><td>Content 3</td>
</tr>
</table>
Defines a global table heading.
Example Usage:
<table>
<thead><tr><td>Testing the thead</td></tr></thead>
<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>
<tbody><tr><td>Testing the tbody</td></tr></tbody>
</table>
Used for defining the title of the document.
Example Usage:
<title>Joh’s Website</title>
Defines a table row.
Example Usage:
<table>
<tr>
<td>Testing</td>
</tr>
</table>
Used for defining teletype text.
Example Usage:
<tt>Teletype Text</tt>
Used for underlining text.
This tag was deprecated in HTML 4.01.
Used for displaying an unordered (bullets) list.
Example Usage:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
Variable definition.
Example Usage:
<var>variable</var>
