Scribd
Upload
31 views

HTML Cheat Sheet

This document provides a summary of basic HTML tags for formatting text, images, links, lists and tables. It includes tags for common text elements like headings, paragraphs and bold text. It also describes tags for adding images, links, unordered and ordered lists, as well as basic table tags. Finally, it touches on HTML form tags and attributes for elements like text boxes, radio buttons and submit buttons.

Uploaded by

throwaway21916
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
31 views

HTML Cheat Sheet

This document provides a summary of basic HTML tags for formatting text, images, links, lists and tables. It includes tags for common text elements like headings, paragraphs and bold text. It also describes tags for adding images, links, unordered and ordered lists, as well as basic table tags. Finally, it touches on HTML form tags and attributes for elements like text boxes, radio buttons and submit buttons.

Uploaded by

throwaway21916
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/ 13

HTML CHEAT SHEET

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=?></body>
Sets background color, using name or hex value

<body text=?></body>
Sets text color, using name or hex value

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<body link=?></body>
Sets color of links, using name or hex value

<body vlink=?></body>
Sets color of visited links, using name or hex value

<body alink=?></body>
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 instead)

<i></i>
Creates italicized text (should use <em> instead)

<tt></tt>
Creates typewriter-style text

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<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></st
rong>
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 font=?></font>
Defines the font used (should use CSS instead)

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET

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>
Inserts a line break (carriage return)

<blockquote></blockquote>
Puts content in a quote - indents text from both sides

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<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></dt>
Precedes eachdefintion term

<dd>
Precedes eachdefintion

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
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

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<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 (required
by the ADA)

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)

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
Table attributes (only use for email newsletters)

<table border=?></table>
Sets the width of the border around table cells

<table cellspacing=?></table>
Sets amount of space between table cells

<table cellpadding=?></table>
Sets amount of space between a cell's border and its contents

<table width=?></table>
Sets width of the table in pixels or as a percentage

<table align=?></table>
Sets alignment for cells within the row (left/center/right)

<tr align=?></tr>
Sets alignment for cells within the row (left/center/right)

<td align=?></td>
Sets alignment for cells (left/center/right)

<tr vanila=?></tr>
Sets vertical alignment for cells within the row (top/middle/bottom)

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<td vanila=?></td>
Sets vertical alignment for cell (top/middle/bottom)

<td rowspan=?></td>
Sets number of rows a cell should span (default=1)

<td colspan=?></td>
Sets number of columns a cell should span

<td nowrap></td>
Prevents lines within a cell from being broken to fit

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
HTML5 input tag attributes (not all browsers support)

<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

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
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=?></input>


Creates a checkbox.

<input type="checkbox" name=? value=? checked></input>


Creates a checkbox which is pre-checked.

Saidul Islam Follow: https://twitter.com/saidul_dev


HTML CHEAT SHEET
<input type="radio" name=? value=?></input>
Creates a radio button.

<input type="radio" name=? value=? checked></input>


Creates a radio button which is pre-checked.

<input type="text" name=? size=?></input>


Creates a one-line text area. Size sets length, in characters.

<input type="submit" value=?></input>


Creates a submit button. Value sets the text in the submit button.

<input type="image" name=? src=? border=? alt=?></input>


Creates a submit button using an image.

<input type="reset"></input>
Creates a reset button

Saidul Islam Follow: https://twitter.com/saidul_dev


Follow me

Saidul Islam
@saidul_dev

You might also like