Saturday, June 20, 2009

List of HTML Tags

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-->



<!DOCTYPE>

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”>



<a>

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



<abbr>

Used for marking up abbreviations in your document.

Example Usage:

<abbr title=”et cetera”>etc.</abbr>



<acronym>

Used for marking up acronyms in your document.

Example Usage:

<acronym title=”Advanced Technology Extended”>ATX</acronym>



<address>

Used to define addresses and signatures in documents.

Example Usage:

<address>Juan Dela Cruz<br />

1234 San Carlos<br />

Green Town</address>



<applet>

Embedded applets are defined using this tag.

applet was deprecated in HTML 4.01



<area>

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>



<b>

Used for defining bold text.

Example Usage:

<b>This text is bold</b>



<base>

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/" />



<basefont>

Used for specifying a default font in the document.

This tag was deprecated in HTML 4.01.



<bdo>

Used for overriding the direction of a string.

Example Usage:

<bdo dir="rtl">This text is backwards</bdo>



<big>

Used for formatting a string of text larger than default.

Example Usage:

<big>This is some pretty big text</big>



<blockquote>

Used for defining long quotations.

Example Usage:

<blockquote>"And that’s the end of that chapter"</blockquote>



<body>

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>



<br>

Used for inserting a line break.

Example Usage:

To Whom it May Concern,<br />I just successfully inserted a line break.



<button>

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>



<caption>

Used for adding a center aligned caption above a table.

Example Usage:

<table>

<caption>Say Cheese!</caption>

<tr>

<td>Cell data</td>

</tr>

</table>



<center>

Used for center aligning.

This tag was deprecated in HTML 4.01.



<cite>

Used for proper text formatting of citeing.

Example Usage:

<cite>Webster’s Dictionary</cite>



<code>

Used for computer code formatting.

Example Usage:

<code>This is some computer code text</code>



<col>

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>



<colgroup>

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>



<dd>

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>



<del>

Used for defining deleted text, formats with a strike-through.

Example Usage:

The answer is <del>false</del> true



<dir>

Used for defining a directory list.

This tag was deprecated in HTML 4.01.



<div>

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>



<dfn>

Used for proper text formatting of a definition term.

Example Usage:

<dfn>This is a definition term</dfn>



<dl>

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>



<dt>

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>



<em>

Used for defining emphasized text, this will italicize the text.

Example Usage:

<em>This text is italicized</em>



<fieldset>

Used for drawing a padded, outlined box around the data enclosed.

Example Usage:

<fieldset>Test Data</fieldset>



<form>

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>



<h1> to <h6>

Used for defining headers in your article. h1 being the largest and h6 being the smallest.

Example Usage:

<h2>Testing Header 2</h2>



<head>

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>



<hr>

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



<html>

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>


<i>

Used to indicate that the enclosed text must be rendered in a italic (slanted) typeface.

Example Usage:

<b>This text is italized</b>



<iframe>

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>



<img>

Used for displaying an image in a document.

Example Usage:

<img src="image.jpg" width="100" height="100" alt="My Image" border="0" />



<input>

Used for defining an input field form element.

Example Usage:

Your Email: <input type="text" name="email" />



<ins>

Used for defining inserted text (gives an underline effect)

Example Usage:

The winner is <ins>you</ins>



<kbd>

Used for defining keyboard formatted text.

Example Usage:

<kbd>This is keyboard formatted text</kbd>



<label>

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>



<legend>

Used for defining the title of a fieldset

Example Usage:

<fieldset><legend>The Title</legend>Testing</fieldset>



<li>

Used for defining a list item in an ordered (ol) or unordered (ul) list.

Example Usage:

<li>This is a list item</li>



<link>

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" />



<map>

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>



<meta>

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" />



<noframes>

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>



<noscript>

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>



<object>

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>



<ol>

Used for displaying an ordered (1, 2, 3…) list.

Example Usage:

<ol>

<li>This is 1</li>

<li>This is 2</li>

</ol>



<optgroup>

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>



<option>

Used for defining individual items in a drop down (select) list.

Example Usage:

<select>

<option value="01">Option 01</option>

</select>



<p>

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>



<param>

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>



<pre>

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>



<q>

Used for defining short quotations.

Example Usage:

<q>And that’s how I did it</q> said Joe



<samp>

Used for formatting text like computer code.

Example Usage:

<samp>Sample text</samp>



<script>

Used for defining script in a document, most commonly JavaScript.

Example Usage:

<script type="text/javascript"></script>



<select>

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>



<small>

Used for defining small text.

Example Usage:

<small>This text is small</small>



<span>

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>



<strike>

Used for adding a strike through the middle of a strong of text.

This tag was deprecated in HTML 4.01.



<strong>

Used for placing emphasis on text, bold effect.

Example Usage:

Welcome Back, <strong>Joe Somebody</strong>



<style>

Used for defining styles (CSS).

Example Usage:

<style type="text/css">

body { background-color: #000000; }

</style>



<sub>

Used for subscripted text.

Example Usage:

I’m feeling <sub>down</sub> today



<sup>

Used for superscripted text.

Example Usage:

E=mc<sup>2</sup>



<table>

Used for opening a new table.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>



<tbody>

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>



<td>

Used for defining table cells/columns.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>



<textarea>

Used for multi-line text-area form elements.

Example Usage:

<textarea rows=”3″ cols=”30″>This is a text area…</textarea>



<tfoot>

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>



<th>

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>



<thead>

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>



<title>

Used for defining the title of the document.

Example Usage:

<title>Joh’s Website</title>



<tr>

Defines a table row.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>



<tt>

Used for defining teletype text.

Example Usage:

<tt>Teletype Text</tt>



<u>

Used for underlining text.

This tag was deprecated in HTML 4.01.



<ul>

Used for displaying an unordered (bullets) list.

Example Usage:

<ul>

<li>List Item 1</li>

<li>List Item 2</li>

</ul>



<var>

Variable definition.

Example Usage:

<var>variable</var>

No comments:

Post a Comment