HTML Quick Overview
Basic Tags
<html> </html>
Creates an HTML document
<head> </head>
Sets off the title & other info that isn't displayed
<body> </body>
Sets off the visible portion of the document <title> </title>
Puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked
Body attributes (only used in email newsletters)
<body bgcolor=?>
Sets background color, using name or hex value
<body text=?>
Sets text color, using name or hex value
<body link=?>
Sets color of links, using name or hex value
<body vlink=?>
Sets color of visited links, using name or hex value
<body alink=?>
Sets color of active links (while mouse-clicking)
Text Tags
<pre> </pre>
Creates preformatted text
<h1> </h1> --> <h6> </h6>
Creates headlines -- H1=largest, H6=smallest
<b> </b>
Creates bold text (should use <strong> instead)
<i> </i>
Creates italicized text (should use <em> instead)
<tt> </tt>
Creates typewriter-style text
<code> </code>
Used to define source code, usually monospace
<cite> </cite>
Creates a citation, usually processed in italics
<address> </address>
Creates address section, usually processed in italics
<em> </em>
Emphasizes a word (usually processed in italics)
<strong> </strong>
Emphasizes a word (usually processed in bold)
<font size=?> </font>
Sets size of font - 1 to 7 (should use CSS instead)
<font color=?> </font>
Sets font color (should use CSS instead)
<font face=?> </font>
Defines the font used (should use CSS instead)
Links
<a href="URL">clickable text</a>
Creates a hyperlink to a Uniform Resource Locator
<a href="mailto:EMAIL _ADDRESS">clickable text</a> Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a> Creates a link to that target location
Formatting
<p> </p>
Creates a new paragraph
<br>
AInserts a line break (carriage return)
<blockquote> </blockquote>
Puts content in a quote - indents text from both sides
<div> </div>
Used to format block content with CSS
<span> </span>
Used to format inline content with CSS
Lists
<ul> </ul>
Creates an unordered list
<ol start=?> </ol>
Creates an ordered list (start=xx,
where xx is a counting number)
<li> </li>
Encompasses each list item
<dl> </dl>
Creates a definition list
<dt>
Precedes each defintion term
<dd>
Precedes each defintion
Graphical elements
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of horizontal rule
<hr width=?>
Sets width of rule (as a % or absolute pixel length)
<hr noshade>
Creates a horizontal rule without a shadow
<img src="URL" />
Adds image; it is a separate file located at the URL
<img src="URL" align=?>
Aligns image left/right/center/bottom/top/middle (use CSS)
<img src="URL" border=?>
Sets size of border surrounding image (use CSS)
<img src="URL" height=?>
Sets height of image, in pixels
<img src="URL" width=?>
Sets width of image, in pixels
<img src="URL" alt=?>
Sets the alternate text for browsers that can't process images
Tables (use only for data layout - use CSS for page layout)
<table> </table>
Creates a table
<tr> </tr>
Sets off each row in a table
<td> </td>
Sets off each cell in a row
<th> </th>
Sets off the table header (a normal cell with bold, centered text)
Table attributes (only use for email newsletters)
<table border=?>
Sets the width of the border around table cells
<table cellspacing=?>
Sets amount of space between table cells <table cellpadding=?>
Sets amount of space between a cell's border and its contents
<table width=?>
Sets width of the table in pixels or as a percentage
<tr align=?>
Sets alignment for cells within the row (left/center/right)
<td align=?>
Sets alignment for cells (left/center/right)
<tr valign=?>
Sets vertical alignment for cells within the row (top/middle/bottom)
<td valign=?>
Sets vertical alignment for cell (top/middle/bottom)
<td rowspan=?>
Sets number of rows a cell should span (default=1)
<td colspan=?>
Sets number of columns a cell should span
<td nowrap>
Prevents lines within a cell from being broken to fit
HTML5 input tag attributes
<input type="email" name=?>
Sets a single-line textbox for email addresses
<input type="url" name=?>
Sets a single-line textbox for URLs
<input type="number" name=?>
Sets a single-line textbox for a number
<input type="range" name=?>
Sets a single-line text box for a range of numbers
<input type="date/month/week/time" name=?>
Sets a single-line text box with a calendar
showing the date/month/week/time
<input type="search" name=?>
Sets a single-line text box for searching
<input type="color" name=?>
Sets a single-line text box for picking a color
Forms
<form> </form>
Defines a form
<select multiple name=? size=?> </select>
Creates a scrolling menu. Size sets the number of
menu items visible before user needs to scroll.
<select name=?> </select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name=? cols="x" rows="y"></textarea>
Creates a text box area. Columns set the width;
rows set the height.
<input type="checkbox" name=? value=?>
Creates a checkbox.
<input type="checkbox" name=? value=? checked>
Creates a checkbox which is pre-checked.
<input type="radio" name=? value=?>
Creates a radio button.
<input type="radio" name=? value=? checked>
Creates a radio button which is pre-checked.
<input type="text" name=? size=?>
Creates a one-line text area. Size sets length, in
characters.
<input type="submit" value=?>
Creates a submit button. Value sets the text in the
submit button.
<input type="image" name=? src=? border=?
alt=?> Creates a submit button using an image.
<input type="reset">
Creates a reset button
Comprehensive HTML Tags List
Tag Description
<!--...--> Specifies a comment
<!DOCTYPE> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Deprecated:Specifies an acronym
<address> Specifies an address element
<applet> Deprecated: Specifies an applet
<area> Specifies an area inside an image map
<article> New Tag: Specifies an independent piece of content of a
document, such as a blog entry or newspaper article
<aside> New Tag:Specifies a piece of content that is only slightly
related to the rest of the page.
<audio> New Tag:Specifies an audio file.
<base> Specifies a base URL for all the links in a page
<basefont> Deprecated: Specifies a base font
<bdo> Specifies the direction of text display
<bgsound> Specifies the background music
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
<canvas> New Tag:This is used for rendering dynamic bitmap
graphics on the fly, such as graphs or games.
<caption> Specifies a table caption
<center> Deprecated: Specifies centered text
<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<command> New Tag:Specifies a command the user can invoke.
<comment> Puts a comment in the document
<datalist> New Tag:Together with the a new list attribute for input can
be used to make comboboxes
<dd> Specifies a definition description
<del> Specifies deleted text
<details> New Tag:Specifies additional information or controls which
the user can obtain on demand.
<dir> Deprecated: Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<embed> New Tag:Defines external interactive content or plugin.
<fieldset> Specifies a fieldset
<figure> New Tag:Specifies a piece of self-contained flow content,
typically referenced as a single unit from the main flow of
the document.
<b> Specifies bold text
<big> Deprecated:Specifies big text
<i> Specifies italic text
<small> Specifies small text
<tt> Deprecated:Specifies teletype text
<font> Deprecated: Specifies text font, size, and color
<footer> New Tag:Specifies a footer for a section and can contain
information about the author, copyright information, et
cetera.
<form> Specifies a form
<frame> Deprecated:Specifies a sub window (a frame)
<frameset> Deprecated:Specifies a set of frames
<head> Specifies information about the document
<header> New Tag:Specifies a group of introductory or navigational
aids.
<hgroup> New Tag:Specifies the header of a section.
<h1> to <h6> Specifies header 1 to header 6
<hr> Specifies a horizontal rule
<html> Specifies an html document
<isindex> Deprecated: Specifies a single-line input field
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<keygen> New Tag:Specifies control for key pair generation.
<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<map> Specifies an image map
<mark> New Tag:Specifies a run of text in one document marked
or highlighted for reference purposes, due to its relevance
in another context.
<marquee> Create a scrolling-text marquee
<menu> Deprecated: Specifies a menu list
<meta> Specifies meta information
<meter> New Tag:Specifies a measurement, such as disk usage.
<multicol> Specifies a multicolumn text flow
<nav> New Tag:Specifies a section of the document intended for
navigation.
<nobr> No breaks allowed in the enclosed text
<noembed> Specifies content to be presented by browsers that do not
support the <embed>tag
<noframes> Deprecated:Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> New Tag:Specifies some type of output, such as from a
calculation done through scripting.
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<cite> Specifies a citation
<code> Specifies computer code text
<dfn> Specifies a definition term
<em> Specifies emphasized text
<kbd> Specifies keyboard text
<samp> Specifies sample computer code
<strong> Specifies strong text
<var> Specifies a variable
<plaintext> Deprecated: Render the raminder of the document as
preformatted plain text
<pre> Specifies preformatted text
<progress> New Tag:Specifies a completion of a task, such as
downloading or when performing a series of expensive
operations.
<q> Specifies a short quotation
<ruby> New Tag:Together with <rt> and <rp> allow for marking up
ruby annotations.
<script> Specifies a script
<section> New Tag:Represents a generic document or application
section.
<select> Specifies a selectable list
<spacer> Specifies a white space
<span> Specifies a section in a document
<s> Deprecated: Specifies strikethrough text
<strike> Deprecated: Specifies strikethrough text
<style> Specifies a style definition
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> New Tag:Specifies a date and/or time.
<title> Specifies the document title
<tr> Specifies a table row
<u> Deprecated: Specifies underlined text
<ul> Specifies an unordered list
<video> New Tag:Specifies a video file.
<wbr> New Tag:Specifies a line break opportunity.
<wbr> Indicate a potential word break point within a <nobr>
section
<xmp> Deprecated: Specifies preformatted text
Deprecated Tags
The following elements are not available in HTML5 anymore and their function is
better handled by CSS −
Tags (Elements) Description
<acronym> Defines an acronym
<applet> Defines an applet
<basefont> Defines an base font for the page.
<big> Defines big text
<center> Defines centered text
<dir> Defines a directory list
<font> Defines text font, size, and color
<frame> Defines a frame
<frameset> Defines a set of frames
<isindex> Defines a single-line input field
<noframes> Defines a noframe section
<s> Defines strikethrough text
<strike> Defines strikethrough text
<tt> Defines teletype text
<u> Defines underlined text
<article> Represents an independent piece of content of a
document, such as a blog entry or newspaper article
<aside > Represents a piece of content that is only slightly related to
the rest of the page.
<audio> Defines an audio file.
<canvas> This is used for rendering dynamic bitmap graphics on the
fly, such as graphs or games.
<command> Represents a command the user can invoke.
<datalist> Together with the a new list attribute for input can be used
to make comboboxes
<details> Represents additional information or controls which the
user can obtain on demand
<embed> Defines external interactive content or plugin.
<figure> Represents a piece of self-contained flow content, typically
referenced as a single unit from the main flow of the
document.
<footer> Represents a footer for a section and can contain
information about the author, copyright information, et
cetera.
<header> Represents a group of introductory or navigational aids.
<hgroup> Represents the header of a section.
<keygen> Represents control for key pair generation.
<mark> Represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in
another context.
<meter> Represents a measurement, such as disk usage.
<nav> Represents a section of the document intended for
navigation.
<output> Represents some type of output, such as from a calculation
done through scripting.
<progress> Represents a completion of a task, such as downloading or
when performing a series of expensive operations.
<ruby> Together with <rt> and <rp> allow for marking up ruby
annotations.
<section> Represents a generic document or application section
<time> Represents a date and/or time.
<video> Defines a video file.
<wbr> Represents a line break opportunity.
New types for <input> tag
The input element's type attribute now has the following new values −
Type Description
color Color selector, which could be represented by a wheel or
swatch picker
date Selector for calendar date
datetime-local Date and time display, with no setting or indication for time
zones
datetime Full date and time display, including a time zone.
email Input type should be an email.
month Selector for a month within a given year
number A field containing a numeric value only
range Numeric selector within a range of values, typically
visualized as a slider
search Term to supply to a search engine. For example, the
search bar atop a browser.
tel Input type should be telephone number.
time Time indicator and selector, with no time zone information
url Input type should be URL type.
week Selector for a week within a given year
