Scribd
Upload
89 views

HTML Quick Reference Card

Uploaded by

pca_pca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
89 views

HTML Quick Reference Card

Uploaded by

pca_pca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Quick Reference Card1.

01

Other name values exist but are of limited utility. The _parent Parent frame
robots tag provides one or more instructions to search
engine robots. _top Unframed window
Option Meaning Frames should be avoided and forcing a new browser
instance/tab on the viewer is impolite. Consequently
noindex Don't index this page XHTML bans the use of this attribute.
nofollow Don't follow links on this page <button>
Copyright©, 2008 BrandsPatch LLC
noodp Don't use DMOZ descriptions <button type=”type” name=”name” value=”value”
http://www.explainth.at [id=”id” disabled=”disabled”]>innerHTML</button>
Color key overleaf noarchive Don't archive this page innerHTML can be plain text or an <img> element.
Code Structure noimageindex Index page text only, not images type = submit|reset|button
<!DOCTYPE html PUBLIC DTD> The implementation of the default value of type is not
noimageclick Image searches link to page, not consistent across browsers. When type=”button”, or
<html xmlns=”http://www.w3.org/1999/xhtml”> image. when used in a form without an action attribute the
<head> http-equiv is intended to supply the browser with onclick event handler must be assigned.
[<base href=”url” [id=”id” target=”target”]/> information that would otherwise appear in server <div>
response headers. Not all browsers support this feature. <div>..</div>
<meta name=”value” content=”text” />
One notable exception The workhorse of any well designed HTML document.
<script type=”text/javascript” [src=”url” id=”id” Acts as a container for other HTML elements. Generally
defer=”defer”]> <meta http-equiv=”refresh” content=”n;url=”url” /> used with the optional attributes
</script> <script>
<style type=”text/css” [id=”id” media=”media” [id=”id” class=”class” style=”style”]
<script type=”text/javascript” [src=”url” id=”id”
title=”title”]> defer=”defer”]></script>
Beware of using div where span , pre or p elements
</style> Use this to insert JavaScript code directly into the
would be more appropriate.
document or specify the src attribute to link to an
<link rel="value" href="url" type="type" external script. Executable code – i.e. not wrapped <fieldset>
target=”target” media="media"/> inside a function block that needs to be explicitly called - <fieldset>
<!--comment--> in scripts in the body part of the document will be <legend [acesskey=”key”]>Legend</legend>
executed as soon as it is loaded. In theory, with <!--form controls here-->
<!--#SSI Directive -->
defer=”defer” the script is not interpreted until the </fieldset>
] document has been loaded.
<title>Document Title</title> <style> Used to demarcate related controls in a form. legend is
optional in XHTML.
</head> <style type=”text/css” [id=”id” media=”media” <form>
<body> title=”title”]>
<form action=”url” [enctype=”enctype”
[ media = [all,aural,braille,handheld,print,projection,
method=”method”>...</form>
screen,tty,tv]
<!--comment--> Used to group interactive controls whose content can be
<link> submitted for remote processing to url. For validation
<!--#SSI Directive -->
<link rel=”stylesheet” type=”text/css” href=”url” form controls must be wrapped in a container tag – e.g.
<script type=”text/javascript” [src=”url” id=”id” media=”media” /> fieldset, p, div etc. Form controls without a name
defer=”defer”]> <link rel=”shortcut icon” href=”url” type=”image/x- attribute are not submitted to url.
</script> icon”/> enctype = application/x-www-form-urlencoded |
media as described in <style>. multipart/form-data
]
</body> method = get|post (N.B. - lower case!)
Other values for rel exist but are not well supported.
Use multipart/form-data with post when using file input
</html> Comments elements.
<!comment> where comment is –comment text--.
<h#>
For valid XHTML documents the xmlns attribute is Comments are delimited by two – characters so it is in <h#>Heading</h#>
required. The title tag is required for validation & is principle possible to write
# = 1..6
advisable for SEO. <!--commentA----commentB----commentC-->
Judicious & ordered – i.e. h1 before h2 etc – use of
Document Type Declaration (DTD) SSI Directives headings may help with SEO. Headings are container
Server Side Include (SSI) directives are written as elements – i.e. they can be used to contain other HTML
“-//W3C//DTD a b” “http://www.w3.org/TR/c” where comments in HMTL but never make it to the client – elements. To place other containers - such as div, p etc
HTML XHTML provided that the server has been configured to parse – inside headings wrap them in an <object>..</object>
and the document and interpret them. For more details tag pair.
a HTML XHTML see http://www.explainth.at/en/qr/ssiqr.shtml
<iframe>
b 4.01/EN 1.1/EN <body> iframe is not legal in strict (X)HTML. However, browsers
<body> will accept iframes and they do have a certain utility –
c html4/strict.dtd xhtml11/DTD/xhtml11.dtd ... e.g. for inline display of a PDF document.
</body>
Other HTML DTDs exist. There can be only one <body>..</body> tag pair in the <iframe src=”url” [frameborder=”fbr” height=”h”
<base > document. All viewer content goes between these tags. width=”w” scrolling=”scroll” margin#=”n”]>..</iframe>
<base href=”url” [id=”id” target=”target]/> To pass validation use container elements – div, p, pre, fbr = 1|0 scroll = yes|no|auto
Specifies the base path name for all relative urls in the h#1 etc – to hold all content placed inside the document Frame height and width can be specified in pixels.
document. url is usually absolute. In theory it is possible body. Other elements and/or bare character data are margin# (# = height|width) in pixels.
to respecify the base path relative to a previously not legal but accepted by most browsers. <img>
specified absolute url – but not with Internet Explorer! <a> <img src=”url” alt=”text” [height=”h” width=”w”]/>
<a href=”url” [id=”id” name=”name” height & width enable page rendering to continue while
Use target to indicate the target window for clickable target=”target”]>Anchor Text</a> large images are being downloaded.
links in the document. See the anchor, <a>, tag for a Anchors define clickable links in the document. target <input>
detailed description of the target at attribute. can be a named frame, e.g. <input type=”type” name=”name” value=”text”
<meta> <iframe href=”url” name=”name”> </iframe> [disabled=”disabled””]/>
<meta name=”value” content=”text” [id=”id”] /> <a href=”url” target=”name”>Anchor Text</a>
<meta http-equiv=”value” content=”text” /> This interactive HTML element can take on a multitude
or one of the predefined value tabulated below of guises depending on the assignment to the type
Name Content target Meaning attribute.
description Page Description _self Current window
robots [options] type = text|password|checkbox|radio|file|hidden|submit|
_blank New window reset|button
HTML Quick Reference Card1.01

text & password input elements use two additional Styling/Formatting Tags
attributes – maxlength & size. The former controls the Lists can be nested inside one another. Best practice – Good practice requires a strict separation of styling from
maximum number of characters that can be typed and XHTML compliance – requires that a nested list be content. CSS is the right place to define visual effects
while the latter (specified as number of characters) wrapped correctly inside the containing <li>..</li> pair. with the document body only containing pure content.
controls the screen width of the element. Use CSS Not all browsers handle bullet lists nested inside number
styling when size fails to deliver the desired result lists in a satisfactory manner In practice this breaks down somewhat since inline
checkbox & radio input elements take the additional <p> styling can be applied to all HTML elements. In
attribute checked=”checked”. In fact all browsers treat <p>Contents</p> addition, there are a small number of HTML tags that
the mere presence of checked as a directive to check The lowly paragraph container element has many of the stray into styling.
the control. value is not relevant here. Use the same same capabilities as its better known sibling the div.
name attribute for radio controls that should be Tag Effect
mutually exclusive – i.e. only one checked at any given
<pre>
By default HTML normalizes white space characters – it <b>bold</b> Bold
time.
In the interests of security file inputs are not treats repeated sequences of 0x20(space)s as one <big>big</big> big
character and ignores CR/LF characters all together.
populated with value text. Neither do they respond well
to styling via CSS. This is to prevent rogue websites Wrap text – and other HTML elements – in a <br/> Line break
<pre>...</pre> tag pair to suppress this behavior.
from masking a file input by making it look like
something else. For information on styling these </em>emphasized</em> emphasized2
pre also suppresses wrapping of text as would occur
controls see www.explainth.at/en/html/fileupstyle.shtml <hr/> Horizontal line
hidden input elements can be used to store user normally in a p or div element. This can be prevented by
using the following CSS styling
specific information – for instance, when cookies are <i>italics</i> italics
disabled. It should be borne in mind though that such
white-space:pre-wrap;white-space:-pre-wrap;white- <small>small</small> small
information is easily altered.
clicking on submit input buttons inside forms causes space:-o-pre-wrap;white-space:-moz-pre-wrap;word-
wrap:break-word; <strike>strike</strike> strike
the form data – the information provided in all form
controls with a name attribute – to be shipped to the <select> <sub>subscript</sub> Normalsubscript
url supplied in the action attribute of the form. <select name=”name” [disabled=”disabled”
clicking on reset input buttons inside forms causes all multiple=”multiple” size=”size”> <sup>superscript</sup> Normalsuperscript
form controls to revert to their initial state.
[<optgroup label=”text”>] <u>underline</u> underline
button input controls require an onclick event handler
<option [value=”1” selected=”selected” Miscellanea
The default appearance of buttons is browser and OS disabled=”disabled”]>One </option>
Use the comments
dependent and not easily amenable to CSS styling. This <option>Two</option>
tends to spoil the look and feel of an otherwise well <!-- google_ad_section_start -->
designed site. A technique for creating “buttons” with a </optgroup>
more consistent look and feel is described here <option>A</option>
<!-- google_ad_section_end -->
www.explainth.at/en/tricks/cssbut.shtml </select>
<label> size=”1” displays this element as a combobox. Other to wrap document content that you would like the
<label>Text<input type=”text” name=”name”/></label> values Google AdSense robot to use for indexing and delivering
for sizes display a listbox. With
multiple=”multiple” size is assumed to be 4 (browser contextual advertising.
or <label for=”id”>Name</label><input id=”id” dependent) unless it has been specified. disabled Notes
name=”name” type=”text”/> causes the select to be disabled. Disabling individual Color Coding
Labels are used to attach descriptions to <input> options does not work in IE6. optgroup is used to (X)HTML Tag Deprecated Tag [Optional]
elements & to transfer focus to the input when the label separate the selection into logical subgroups.
text is clicked. This latter feature is particularly useful Common Attribute HTML Attribute
with radio buttons and checkboxes where users expect The response of select elements to CSS styling leaves XHTML Attribute Comment / XHTML only
such functionality. Note that the first format does not much to be desired – especially in IE6. For a partial context specific replacement CSS Attribute
make labels clickable in IE6. solution see
www.explainth.at/en/html/selstyle.shtml default value onclick (events) 0xnn (hexadecimal)
<map> [a,b..] Comma separated list of one or more of a,b.. etc.
<map name=”name” id=”name”/> <span>
<span [id=”id” class=”class” style=”style”>...</span> a is the default.
<area shape=”rect” href=”url” coords=”X1,Y1,X2,Y2”/>
<area shape=”circle” href=”url” coords=””X,Y r”/> spans are generic inline elements used to apply a|b|c a or b or c. a is the default.
<area shape=”poly” href=”url” coords=”X1,Y1...Xn,Yn”/>specific styling effects to their contents and/or make the 1 # is 1..6
</map> contents available for programmatic manipulation.
2 Interpretation depends on the browser.
<img src=”url” usemap=”#name”/> <table> [id=”id” class=”class” style=”style”] can be used with
Client-side image maps are used to create images with <table border=”0” cellpadding=”0” cellspacing=”0”>
virtually all elements to help locate them (id) or to alter
<thead>
distinct clickable areas that can be rectangles, circles or
their appearance (class & style).
polygons. To establish the X,Y coordinates of the <tr><th>...</th><th>...</th>... </tr>
vertices/center of the area/circle examine the image </thead>
using an application such as Windows Paint at a high <tfoot> CSS cheatsheet - www.explainth.at/en/qr/cssqr.shtml
<tr><td>...</td><td>...</td>...</tr>
level of zoom. Note that there is no comma prior to the Tested with Internet Explorer 6+, Firefox 2+, Opera 9.1+
r part of the coords specification for circles. In the</tfoot> and Safari 3.0.3 (Windows).
interests of compliance – and to make the document <tbody>
more accessible to the visually impaired – the alt <tr><td>...</td><td>...</td>...</tr>
attribute should be specified for each clickable area....
<noscript> <tr><td>...</td><td>...</td>...</tr>
<noscript>...</noscript> </tbody>
The content within this tag pair is only displayed if </table>
JavaScript has been disabled or is not supported.
However, bear in mind that search engine robots will HTML table attributes provide some intrinsic styling
always examine these contents. capabilities. However, for consistent results it is better to
use CSS styling for tables. For an example of what can
<?l> be achieved see www.explainth.at/en/css/tabdem.shtml
<?l>
<li>Item 1</li> While it is possible to build tables with nothing but <tr>
... and <td> elements, the use of header and footer
<li>Item n</li> elements makes tabulated information more accessible
</?l> to the visually impaired – and can help robots to better
index tabular information. XHTML requires <tfoot> to
? = u for “unordered” , i.e. bullet, lists be specified before <tbody>. Note that <th> table cell
?=o for “ordered”, i.e. number, lists elements stray into CSS territory and introduce visual
The CSS attributes list-style-type and list-style-image effects.
should be used to alter the default bullet/number style.
See www.explainth.at/en/qr/cssqr.shtml for details.

You might also like