HTML Reference

Common Tags

<a> Hyperlink

display: inline

<a href="/" target="_blank">Home page</a>

<div> Division

Useful for defining functional areas of the document.

display: block

<em> Emphasis

Use this instead of the old <i> tag.

display: inline

<h1> Page name

Use this exactly once on every page.

display: block

<h2> <h3> <h4> <h5> <h6> Headings

display: block

<img> Image

display: inline

<img src="happyface.jpg" alt="Smile">

<p> Paragraph

When in doubt, use this tag.

display: block

<span> Generic inline

Make sure there is not an appropriate HTML tag before using generic spans and divs.

display: inline

<strong>

Use this instead of the old <b> tag.

display: inline

Lists

<dl> Definition list

display: block

<dl>
<dt>When should I use definition lists?
<dd>Anytime you want a list of pairs of items.
<dd>You can have multiple descriptions for each term.

<dt>Like when?
<dd>Terms with definitions and questions with answers.
</dl>

<dt> Definition term

display: block

<dd> Definition description

display: block

<li> List item

display: list-item

<menu> Menu list

Deprecated in HTML4; HTML 5 includes it as a supported element.

display: block

<ol> Ordered (numbered) list

CSS list-style-type: decimal (default), upper-roman, upper-alpha, lower-roman, lower-alpha

display: block

<ul> Unordered (bulleted) list

CSS list-style-type: disc (default), circle, square

display: block

Document Structure

<!DOCTYPE> Doctype

<body> Body

display: block

<head> Header

display: none

<html> HTML

display: block

<link> Link

<meta> Hidden Data

<script> Script

<style> CSS

<title> Title

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Name - Section - Site</title>
<link href="/main.css" type="text/css" rel="stylesheet">

<body>
<div class="article">
<h1>Document Name</h1>
<p>Content
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Tables

<caption> Table caption

display: table-caption

<table> Table

display: table

<td> Table cell

display: table-cell

<th> Table cell header

display: table-cell

<tbody> Table body

display: table-row-group

<thead> Header row

display: table-header-group

<tfoot> Footer row

display: table-footer-group

<tr> Table row

display: table-row

<table>
<caption>Table Example</caption>

<thead>
<tr>
<th>#<td>Col 1
<th>#<td>Col 3<td>Col 4

<tfoot><tr><td colspan="5">Footer

<tbody>
<tr>
<th>1<td>Lorem
<th>4<td>Sed quis
<td>orci tristique

<tr>
<th>2<td>dolor
<th>5<td>risus eget
<td>scelerisque

</table>

Form Elements

<button> Button

display: inline-block

<fieldset> Group of form fields

display: block

<form> Input form

display: block

<input> Input fields

display: inline-block

<label> Input label

display: inline

<legend> Fieldset Title

<option> Selection list option

<optgroup> Group of option elements

<select> Selection list

display: inline-block

<textarea> Multi-line text input

display: inline-block

<form action="?" method="post">
<fieldset>
<legend>Field set name</legend>

<p>
<label>First Name
<input name="FirstName"></label>

<p>Gender
<label>
<input type="radio" name="Gender" value="M">
Male
</label>

<label>
<input type="radio" name="Gender" value="F">
Female
</label>

<p>Favorite Cards
<select name="Color">
<optgroup label="Colors">
<option value="W">White
<option value="U">Blue
<option value="B">Black
<option value="R">Red
<option value="G">Green

<optgroup label="Colorless">
<option value="A">Artifact
<option value="L">Land
</select>

<p>Comments
<p>
<textarea name="Comments" rows="4" cols="25"></textarea>

<p><button>Vote</button>
</fieldset>
</form>

Lesser used

<abbr> Abbreviation

<abbr title="Hypertext markup language">HTML</abbr>

display: inline

<acronym> Acronym

<acronym title="National Aeronautic and Space Administration">NASA</acronym>

display: inline

<address> Address

<address>Page author name and contact information</address>

display: block

<br> Line break

If you use this a lot, you are probably doing it wrong.

display: inline

<del> Deleted text

display: inline

<dfn> Definition

The <dfn>dfn</dfn> tag is used for the defining instance of a term.

display: inline

<hr> Horizontal rule

Try using CSS borders instead of this.

display: block

<ins> Inserted text

Change the default style from underline so it is not confused with links.

display: inline

<pre> Preformatted text

display: block

<small> Smaller text

For block display fine print, consider using <h6>

display: inline

<sub> Subscript

H<sub>2</sub>O

display: inline

<sup> Superscript

E = mc<sup>2</sup>

display: inline

Quotations

<blockquote> Block quote

display: block

<cite> Citation

display: inline

<q> Inline quote

display: inline

Code

<code> Computer code

display: inline

<kbd> Keyboard input

display: inline

<samp> Sample output

display: inline

<var> Variable

display: inline