HTML Reference

HTML Tag Description Examples and Advice Display
Common Tags
<a> Hyperlink <a href="/" target="_blank">Home page</a> inline
<div> Division Useful for defining functional areas of the document. block
<em> Emphasis Use this instead of the old <i> tag. inline
<h1> Page name Use this exactly once on every page. block
<h2> Header Don't get too strict with these - they do not represent outline form. There is no intrinsic meaning of an h3. You have 5 headers (excluding h1) to break up sections of Web pages - abuse them. block
<h3> Header block
<h4> Header block
<h5> Header block
<h6> Header block
<img> <img src="happyface.jpg" alt="Smile">
<p> Paragraph When in doubt, use this tag. block
<span> Generic inline Make sure there is not an appropriate HTML tag before using generic spans and divs. inline
<strong> Use this instead of the old <b> tag. inline
Lists
<dl> Definition list 
<dl>
	<dt>When should I use definition lists?</dt>
	<dd>Anytime you want a list of pairs of items.</dd>
	<dd>You can have multiple descriptions for each term.</dd>
	
	<dt>Like when?</dt>
	<dd>Terms with definitions and questions with answers.</dd>
</dl>
block
<dt> Definition term block
<dd> Definition description block
<li> List item list-item
<menu> Menu list Deprecated in HTML4; HTML 5 includes it as a supported element. block
<ol> Ordered (numbered) list CSS list-style-type: decimal (default), upper-roman, upper-alpha, lower-roman, lower-alpha block
<ul> Unordered (bulleted) list CSS list-style-type: disc (default), circle, square block
Document Structure
<!DOCTYPE> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Document Name - Section - Site</title>
	<link href="main.css" type="text/css" rel="stylesheet">
	<style type="text/css">
		html, body {margin:0; padding:0}
	</style>
	<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<h1>Document Name</h1>
	<p>Content</p>
</body>
</html>
<body> block
<head> none
<html> block
<link>
<meta> Hidden information
<script>
<style> CSS
<title>
Tables
<caption> Table caption 
<table>
	<caption>Table Example</caption>
	<thead>
		<tr>
			<th>#</th><td>Col 1</td>
			<th>#</th><td>Col 3</td><td>Col 4</td>
		</tr>
	</thead>
	<tfoot><tr><td colspan="6">Footer</td></tr></tfoot>
	<tbody>
		<tr>
			<th>1</th><td>Lorem</td>
			<th>4</th><td>Sed quis</td>
			<td>orci tristique</td>
		</tr>
		<tr>
			<th>2</th><td>dolor</td>
			<th>5</th><td>risus eget</td>
			<td>scelerisque</td>
		</tr>
	</tbody>
</table>
 table-caption
<table> Table table
<td> Table cell table-cell
<th> Table cell header table-cell
<tbody> Table body table-row-group
<thead> Header row table-header-group
<tfoot> Footer row table-footer-group
<tr> Table row table-row
Form Elements
<button> Button 
<form action="" method="post">
	<fieldset>
		<legend>Field set name</legend>
		<p><label>First Name <input name="FirstName"></label><p>
		<p>Gender
			<label><input type="radio" name="Gender" value="M">Male</label>
			<label><input type="radio" name="Gender" value="F">Female</label>
		</p>
		<p>Favorite Cards
			<select name="Color">
				<optgroup label="Colors">
					<option value="W">White</option>
					<option value="U">Blue</option>
					<option value="B">Black</option>
					<option value="R">Red</option>
					<option value="G">Green</option>
				</optgroup>
				<optgroup label="Colorless">
					<option value="A">Artifact</option>
					<option value="L">Land</option>
				</optgroup>
			</select>
		</p>
		<p>Comments</p>
		<p><textarea name="Comments" rows="4" cols="25"></textarea></p>
		<p><button>Vote</button></p>
	</fieldset>
</form>
 inline-block
<fieldset> Group of form fields block
<form> Input form block
<input> Input fields inline-block
<label> Input label inline
<legend>
<option> Selection list option
<optgroup> Group of option elements
<select> Selection list inline-block
<textarea> Multi-line text input inline-block
Quotations
<blockquote> Block quote block
<cite> Citation inline
<q> Inline quote inline
Lesser used
<abbr> Abbreviation <abbr title="Hypertext markup language">HTML</abbr> inline
<acronym> Acronym <acronym title="National Aeronautic and Space Administration">NASA</acronym> inline
<address> Address <address>Page author name and contact information</address> block
<br> Line break If you use this a lot, you are probably doing it wrong. inline
<del> Deleted text inline
<dfn> Definition The <dfn>dfn</dfn> tag is used for the defining instance of a term. inline
<hr> Horizontal rule Try using CSS borders instead of this. block
<ins> Inserted text Change the default style from underline so it is not confused with links. inline
<pre> Preformatted text block
<small> Smaller text For block display fine print, consider using <h6> inline
<sub> Subscript H<sub>2</sub>O inline
<sup> Superscript E = mc<sup>2</sup> inline
Code
<code> Computer code inline
<kbd> Keyboard input inline
<samp> Sample output inline
<var> Variable inline