0% found this document useful (0 votes)
19 views

HTML Cheatsheet - CodeHype

Uploaded by

favouradeyeye2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views

HTML Cheatsheet - CodeHype

Uploaded by

favouradeyeye2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CodeHype

HTML
Cheatsheet

@codehype_ @codehype
HTML Cheatsheet
page 1 of 2

Basic Tags Formatting


<html> </html> <p> </p>
Creates an HTML document Creates a new paragraph
<head> </head> <br>
Sets off the title & other info that isn't displayed AInserts a line break (carriage return)
<body> </body> <blockquote> </blockquote>
Sets off the visible portion of the document Puts content in a quote - indents text from both sides
<title> </title> <div> </div>
Puts name of the document in the title bar; when Used to format block content with CSS
bookmarking pages, this is what is bookmarked <span> </span>
Used to format inline content with CSS
Body attributes (only used in email newsletters)
<body bgcolor=?>
Sets background color, using name or hex value Lists
<body text=?> <ul> </ul>
Sets text color, using name or hex value Creates an unordered list
<body link=?> <ol start=?> </ol>
Sets color of links, using name or hex value Creates an ordered list (start=xx,
<body vlink=?> where xx is a counting number)
Sets color of visited links, using name or hex value <li> </li>
<body alink=?> Encompasses each list item
Sets color of active links (while mouse-clicking) <dl> </dl>
Creates a definition list
Text Tags <dt>
<pre> </pre> Precedes each defintion term
Creates preformatted text <dd>
<h1> </h1> --> <h6> </h6> Precedes each defintion
Creates headlines -- H1=largest, H6=smallest
<b> </b> Graphical elements
Creates bold text (should use <strong> instead) <hr>
<i> </i> Inserts a horizontal rule
Creates italicized text (should use <em> instead) <hr size=?>
<tt> </tt> Sets size (height) of horizontal rule
Creates typewriter-style text <hr width=?>
<code> </code> Sets width of rule (as a % or absolute pixel length)
Used to define source code, usually monospace <hr noshade>
<cite> </cite> Creates a horizontal rule without a shadow
Creates a citation, usually processed in italics <img src="URL" />
<address> </address> Adds image; it is a separate file located at the URL
Creates address section, usually processed in italics <img src="URL" align=?>
<em> </em> Aligns image left/right/center/bottom/top/middle (use CSS)
Emphasizes a word (usually processed in italics) <img src="URL" border=?>
<strong> </strong> Sets size of border surrounding image (use CSS)
Emphasizes a word (usually processed in bold) <img src="URL" height=?>
<font size=?> </font> Sets height of image, in pixels
Sets size of font - 1 to 7 (should use CSS instead) <img src="URL" width=?>
<font color=?> </font> Sets width of image, in pixels
Sets font color (should use CSS instead) <img src="URL" alt=?>
<font face=?> </font> Sets the alternate text for browsers that can't
Defines the font used (should use CSS instead) process images (required by the ADA)

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
HTML Cheatsheet
page 2 of 2

Forms HTML5 input tag attributes


<form> </form> (not all browsers support; visit http://caniuse.com
Defines a form for details)
<select multiple name=? size=?> </select>
Creates a scrolling menu. Size sets the number of <input type="email" name=?>
menu items visible before user needs to scroll. Sets a single-line textbox for email addresses
<select name=?> </select> <input type="url" name=?>
Creates a pulldown menu Sets a single-line textbox for URLs
<option> <input type="number" name=?>
Sets off each menu item
Sets a single-line textbox for a number
<textarea name=? cols="x" rows="y"></textarea> <input type="range" name=?>
Creates a text box area. Columns set the width;
Sets a single-line text box for a range of numbers
rows set the height.
<input type="date/month/week/time" name=?>
<input type="checkbox" name=? value=?>
Creates a checkbox.
Sets a single-line text box with a calendar
showing the date/month/week/time
<input type="checkbox" name=? value=? checked>
Creates a checkbox which is pre-checked. <input type="search" name=?>
<input type="radio" name=? value=?>
Sets a single-line text box for searching
Creates a radio button. <input type="color" name=?>
<input type="radio" name=? value=? checked> Sets a single-line text box for picking a color
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

Tables (use only for data layout - use CSS for page layout) Table attributes (only use for email newsletters)
<table> </table> <table border=?>
Creates a table Sets the width of the border around table cells
<tr> </tr> <table cellspacing=?>
Sets off each row in a table Sets amount of space between table cells
<td> </td> <table cellpadding=?>
Sets off each cell in a row Sets amount of space between a cell's border and
<th> </th> its contents
Sets off the table header (a normal cell with bold, <table width=?>
centered text) 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

You might also like