HTML Quick Reference

Syntax

HTML Elements

Syntax Description
<tag>content</tag> element
<tag attribute="value">content</tag> element with attribute
<tag attribute="value" attribute="value">content</tag> element with multiple attributes
<tag attribute="value" /> empty element
<!-- comment --> comment

Document Type & Content Type

HTML5 XHTML 1.0 Transitional
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta charset="utf-8">  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

Elements

Document Elements

Name Description Important Attributes Level Contains
html document root element (required) lang="[language code]" top head, body
head document head (required, not displayed)   html see below
body document body (required)   html block

Head Elements

Name Description Important Attributes Level Contains
title document title (required)   head text
link link to external style sheet
(or other related document)
  • type="text/css"
  • rel="stylesheet"
  • href="[url of stylesheet]"
 head empty
style embedded style sheet
  • type="text/css" (required)
  • media="[media type]"
 head text
script embedded script
  • type="text/javascript" (required)
  • src="[url of script file]"
 head, body text
meta generic meta information
  • name="[meta tag name]"
  • content="[meta tag content]"
 head empty

Paragraph & Phrase Elements

Name Description Important Attributes Level Contains
p paragraph   block inline
em emphasis   inline inline
strong strong emphasis   inline inline
sup superscript   inline inline
sub subscript   inline inline
ins inserted text
  • datetime="[yyyy-mm-dd]"
 inline/
block		 any
del deleted text
  • datetime="[yyyy-mm-dd]"
 inline/
block		 any
abbr abbreviation
  • title="[unabbreviated term]"
 inline inline
acronym acronym
  • title="[unabbreviated term]"
 inline inline
span generic inline element
  • class="[class name]"
  • lang="[language code]"
 inline inline
br line break   inline empty

Headings & Divisions

Name Description Important Attributes Level Contains
h1 level one heading (title)   block inline
h2 level two heading (main section)   block inline
h3 level three heading
(sub-section)		   block inline
h4 level four heading
(sub-sub-section)		   block inline
h5 level five heading (etc...)   block inline
h6 level six heading   block inline
div division,
generic block-level element
  • class="[class name]"
  • id="[unique name]"
 block any
hr horizontal rule   block empty

Lists

Name Description Important Attributes Level Contains
ul unordered (bulleted) list   block li
ol ordered (numbered) list start="[number]" (deprecated) block li
li list item value="[number]" (deprecated) ul, ol any
dl definition list   block dt, dd
dt definition term   dl inline
dd definition description   dl any

Links

Name Description Important Attributes Level Contains
a link/anchor
  • href="[url or #id]"
  • id="[unique name"]
  • name="[id]" (for compatibility)
inline inline
(no a)

Images

Name Description Important Attributes Level Contains
img image
  • src="[url of image file]" (required)
  • alt="[alternate text]" (required)
  • longdesc="[url of page with description]"
 inline empty
map client-side image map
  • name="[name]"
 block area
area client-side image map area
  • href="[url]"
    alt="[alternate text]" (required)
  • shape="[rect|circle|poly|default]"
    coords="[coordinates of region]"
 map empty

Tables

Name Description Important Attributes Level Contains
table table
  • summary="[name and/or description]"
 block see below
tr table row   table, thead, tfoot, tbody th, td
th table header cell
  • scope="[col|row|colgroup|rowgroup]"
  • colspan="[number]"
  • rowspan="[number]"
  • id="[unique identifier]"
 tr any
td table data cell
  • colspan="[number]"
  • rowspan="[number]"
  • headers="[ids of header cells]"
 tr any
caption table caption   table inline
colgroup table column group identifier
  • span="[number of coumns]"
table col
col table column identifier   table empty
thead table header row group   table tr
tfoot table footer row group   table tr
tbody table body row group   table tr

Forms

Name Description Important Attributes Level Contains
form form
  • action="[url]" (required)
  • method="[get|post]" (required)
 block block (no form)
label form field label
  • for="[id of associated field]"
 inline inline (no label)
input type= "text" text field
  • id="[unique variable name]"
  • name="[id]" (for compatibility)
  • value="[default value]"
  • maxlength="[number of chars]"
  • readonly="readonly"
inline empty
input type= "password" password field (shows asterisks)
  • id="[unique variable name]"
  • name="[id]"
  • value="[default value]"
 inline empty
input type= "checkbox" checkbox field
  • id="[unique variable name]"
  • name="[id]"
  • value="[value to submit]"
  • checked="checked"
inline empty
input type= "radio" radio button field
  • id="[unique name]"
  • name="[variable name]"
  • value="[value to submit]"
  • checked="checked"
inline empty
input type= "submit" submit form button
  • value="[button text]"
 inline empty
input type= "reset" reset form button
  • value="[button text]"
 inline empty
input type= "button" generic button (for scripts)
  • value="[button text]"
 inline empty
input type= "hidden" hidden field (for data)
  • id="[unique variable name]"
  • name="[id]"
  • value="[value submitted]"
 inline empty
textarea multi-line text field
  • id="[unique variable name]"
  • name="[id]"
  • cols="[number (width)]"
  • rows="[number (height)]"
  • readonly="readonly"
inline text
select list box
  • id="[unique variable name]"
  • name="[id]"
  • size="[number (height)]"
  • multiple="multiple"
inline option
option list box choice
  • value="[value to submit]"
  • selected="selected"
select text
button button
  • type="[submit|reset|button]"
 inline/
block		 any (no a, forms, etc)
fieldset group of fields   block any
legend fieldset title   fieldset inline

Embedded Objects

Name Description Important Attributes Level Contains
object embedded object
  • data="[url]"
  • type="[MIME type]"
  • classid="[ActiveX id]"
 inline/
block		 any
param object parameter
  • name="[parameter name]"
  • value="[parameter value]"
object empty
iframe inline frame src="[url]" inline/
block		 any

Special Characters

Character HTML Entity
less than sign (<) &lt;
greater than sign (>) &gt;
ampersand (&) &amp;
quote (") - required within attribute values only &quot;
non-breaking space ( ) &nbsp;

HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>

</body>
</html>

References: