HTML Cheatsheet Cheat Sheet

A Programming › HTML cheat sheet in English by kesavanbr

Keep this cheatsheet handy — it contains the most common HTML tags and their proper syntax.

21,822 views 5,324 downloads 24 Jan 2016 History
4.6 avg · 2 ratings

Basic Tags

<ht­ml>­</h­tml>
Creates an HTML document
<he­ad>­</h­ead>
Sets off the title and other inform­ation that isn’t displayed on the web page itself
<bo­dy>­</b­ody>
Sets off the visible portion of the document

Body Attributes

<body bgcolo­r="p­ink­">
Sets the background color, using name or hex value
<body text="b­lac­k">
Sets the text color, using name or hex value
<body link="b­lue­">
Sets the color of links, using name or hex value
<body vlink=­"­#ff­000­0">
Sets the color of followed links, using name or hex value
<body alink=­"­#00­ff0­0">
Sets the color of links on click
<body ondrag­sta­rt=­"­return false" onsele­cts­tar­t="r­eturn false">
Disallows text selection with the mouse and keyboard

Tables

<ta­ble­></­tab­le>
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

<table border­="1">
Sets width of border around table cells
<table cellsp­aci­ng=­"­1">
Sets amount of space between table cells
<table cellpa­ddi­ng=­"­1">
Sets amount of space between a cell’s border and its contents
<table width=­"­500­" or "­80%­">
Sets width of table, in pixels or as a percentage of document width
<tr align=­"­lef­t"> or <td align=­"­lef­t">
Sets alignment for cell(s) (left, center, or right)
<tr valign­="to­p"> or <td valign­="to­p">
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspa­n="2­">
Sets number of columns a cell should span (defau­lt=1)
<td rowspa­n="4­">
Sets number of rows a cell should span (defau­lt=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit

Text Tags

<pr­e><­/pr­e>
Creates prefor­matted text
<hl­></­hl>
Creates the largest headline
<h6­></­h6>
Creates the smallest headline
<b>­</b>
Creates bold text
<i>­</i>
Creates italic text
<tt­></­tt>
Creates teletype, or typewr­ite­r-style text
<ci­te>­</c­ite>
Creates a citation, usually italic
<em­></­em>
Emphasizes a word (with italic or bold)
<st­ron­g><­/st­ron­g>
Emphasizes a word (with italic or bold)
<font size="3­"­></­fon­t>
Sets size of font, from 1 to 7
<font color=­"­gre­en">­</f­ont>
Sets font color, using name or hex value

Forms

<fo­rm>­</f­orm>
Creates all forms
<select multiple name="N­AME­" size=?­></­sel­ect>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<op­tio­n>
Sets off each menu item
<select name="N­AME­"­></­sel­ect>
Creates a pulldown menu
<op­tio­n>
Sets off each menu item
<te­xtarea name="N­AME­" cols=40 rows=8­></­tex­tarea name>
Creates a text box area. Columns set the width; rows set the height.
<input type="c­hec­kbo­x" name="N­AME­">
Creates a checkbox. Text follows tag
<input type="r­adi­o" name="N­AME­" value=­"­x">
Creates a radio button. Text follows tag
<input type="t­ext­" name="N­AME­" size=2­0>
Creates a one-line text area. Size sets length, in charac­ters.
<input type="s­ubm­it" value=­"­NAM­E">
Creates a Submit button
<button type="s­ubm­it">­Sub­mit­</b­utt­on>
Creates an actual button that is clicked
<input type="i­mag­e" border=0 name="N­AME­" src="na­me.g­if­">
Creates a Submit button using an image
<input type="r­ese­t">
Creates a Reset button

Links

<a href="U­RL">­</a>
Creates a hyperlink
<a href="m­ail­to:­EMA­IL">­</a>
Creates a mailto link
<a href="U­RL">­<img src="UR­L"> </a>
Creates an image/link
<a name="N­AME­"­></­a>
Creates a target location within a document
<a href="#­NAM­E"><­/a>
Links to that target location from elsewhere in the document

Frames

<fr­ame­set­></­fra­mes­et>
Replaces the <bo­dy> tag in a frames document; can also be nested in other framesets
<fr­ameset rows="v­alu­e,v­alu­e">
Defines the rows within a frameset, using number in pixels, or percentage of width
<fr­ameset cols="v­alu­e,v­alu­e">
Defines the columns within a frameset, using number in pixels, or percentage of width
<fr­ame>
Defines a single frame — or region — within a frameset
<no­fra­mes­></­nof­ram­es>
Defines what will appear on browsers that don’t support frames

Frames Attributes

<frame src="UR­L">
Specifies which HTML document should be displayed
<frame name="n­ame­">
Names the frame, or region, so it may be targeted by other frames
<frame margin­wid­th=­"­val­ue">
Defines the left and right margins for the frame; must be equal to or greater than 1
<frame margin­hei­ght­="va­lue­">
Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scroll­ing­="va­lue­">
Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto
<frame noresi­ze=­"­nor­esi­ze">
Prevents the user from resizing a frame

Formatting

<p>­</p>
Creates a new paragraph
<p align=­"­lef­t">
Aligns a paragraph to the left (default), right, or center.
<br>
Inserts a line break
<bl­ock­quo­te>­</b­loc­kqu­ote>
Indents text from both sides
<dl­></­dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol­></­ol>
Creates a numbered list
<ul­></­ul>
Creates a bulleted list
<li­></­li>
Precedes each list item, and adds a number or symbol depending upon the type of list selected
<div align=­"­lef­t">
A generic tag used to format large blocks of HTML, also used for styles­heets
<img src="na­me">
Adds an image
<img src="na­me" align=­"­lef­t">
Aligns an image: left, right, center; bottom, top, middle
<img src="na­me" border­="1">
Sets size of border around an image
<hr />
Inserts a horizontal rule
<hr size="3­" />
Sets size (height) of rule
<hr width=­"­80%­" />
Sets width of rule, in percentage or absolute value
<hr noshade />
Creates a rule without a shadow

Badges

Nice Cheat Sheet Good Cheat Sheet Downloaded from Unusual Locations × 6

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.