HTML CHEATSHEET by ANHSUL SONI

HTML Boilerplate


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Body content-->                       
</body>
</html>

Basic Tags👇

Html tag: Creates an HTML document
```
<html></html>
```
Head tag: Sets off the title & other info that isn't displayed
```
<head></head>
```
Body tag: Sets off the visible portion of the document
```
<body></body>
```
Title tag: Puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked
```
<title></title>
```

Body attributes (only used in email newsletters)👇

Body bgcolor: Sets background color, using name or hex value
```
<body bgcolor=?>
```
Body text: Sets text color, using name or hex value
```
<body text=?>
```
Body link: Sets color of links, using name or hex value
```
<body link=?>
```
Body vlink:Sets color of visited links, using name or hex value
```
<body vlink=?>
```
Body alink: Sets color of active links (while mouse-clicking)
```
<body alink=?>
```

Page layout

Note- It is very important!

Header tag: It used to add navbar content and headings of the page.
```
<header></header>
```
Main tag: It is used as a main content of the webpage
```
<main></main>
```
Footer tag: It used as a bottom content of the webpage
```
<footer></footer>
```
Section tag: It used divide the code in section (used in inside the main tag)
```
<section></section>
```
Article tag: It is used to add some important text
```
<article></article>
```
Aside tag: Content aside from the content(eg-adds etc)
```
<aside></aside>
```

FORMATTING 👇

Paragraph tag : Creates a new Paragraph
```
<p>//contains paragraph</p>
```
Br tag: A Inserts a line break
```
<br></br>
```
Blockquote tag: Puts content in a quote - indents text from both sides
```
<blockquote></blockquote>
```
Div tag: Used to format block content with CSS
```
<div></div>
```
Span tag: Used to format inline content with CSS
```
<span></span>
```

LISTS 👇

Ul tag: Creates an unordered list
```
<ul></ul>
```
Ol tag: Creates an ordered list (start=xx, where xx is a counting number)
```
<ol start=?></ol>
```
Li tag: Encompasses each list item
```
<li></li>
```
Dl tag: Creates a definition list
```
<dl></dl>
```
Dt tag: Precedes eachdefintion term
```
<dt></dt>
```
Dd tag: Precedes eachdefintion
```
<dd></dd>
```

Text Tags👇

Pre tag: Creates preformatted text
```
<pre></pre>
```
Heading tags: Creates headlines -- H1=largest, H6=smallest
```
<h1></h1>
```
```
<h2></h2>
```
```
<h3></h3>
```
```
<h4></h4>
```
```
<h5></h5>
```
```
<h6></h6>
```
Bold tag: Creates bold text (should use <strong> instead)
```
<b></b>
```
Underline tag: Creates underline on text
```
<u></u>
```
Italic tag: Creates italicized text (should use <em> instead)
```
<i></i>
```
Tt tag: Creates typewriter-style text
```
<tt></tt>
```
code tag: Used to define source code, usually monospace
```
<code></code>
```
Cite tag: Creates a citation, usually processed in italics
```
<cite></cite>
```
Address tag: Creates address section, usually processed in italics
```
<address></address>
```
Em tag: Emphasizes a word (usually processed in italics)
```
<em></em>
```
Strong tag: Emphasizes a word (usually processed in bold)
```
<strong></strong>
```
Font size tag: Sets size of font - 1 to 7 (should use CSS instead)
```
<font size=?> </font> 
```
Font color tag: Sets font color (should use CSS instead)
```
<font color=?> </font>
```
Font face tag: Defines the font used (should use CSS instead)
```
<font face=?> </font>
```

Graphical elements👇

Hr tag: Inserts a horizontal rule
```
<hr>
```
Hr size tag: Sets size (height) of horizontal rule
```
<hr size=?>
```
Hr width tag: Sets width of rule (as a % or absolute pixel length)
```
<hr width=?>
```
Hr noshade tag: Creates a horizontal rule without a shadow
```
<hr noshade>
```
Image tag: Adds image; it is a separate file located at the URL
```
<img src=""/>
```
Image tag with align attribute: Aligns image left/right/center/bottom/top/middle (use CSS)
```
<img src="" align=?>
```
Image tag with border attribute: Sets size of border surrounding image (use CSS)
```
<img src="<!--url of the image" border=?>
```
Image tag with height attribute: Sets height of image, in pixels
```
<img src="" height=?>
```
Image tag with width attribute: Sets width of image, in pixels
```
<img src="" width=?>
```
Image tag with alt attribute: Sets the alternate text for browsers that can't process images (required by the ADA)
```
<img src="" alt=?>
```
Button tag: It help to create clickable button in HTML
```
<button type="button"> </button>
```

LINKS👇

Anchor tag: Creates a hyperlink to a Uniform Resource Locator
```
<a href="URL">clickable text</a>
```
Email anchor tag: Creates a hyperlink to an email address
```
<a href="mailto:EMAIL_ADDRESS">clickable text</a>
```
Anchor tag with name attribute: Creates a target location within a document
```
<a name="NAME">
```
Anchor tag with href attribute: Creates a link to that target location
```
<a href="#NAME">clickable text</a>
```

Forms👇

Form tag: Defines a form
```
<form></form>
```
Select tag with multiple name attribute: Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.
```
<select multiple name=? size=?> </select>
```
Select tag with name attribute: Creates a pulldown menu
```
<select name=?></select>
```
Option tag: Sets off each menu item
```
<option>
```
Textarea tag: Creates a text box area. Columns set the width; rows set the height.
```
<textarea name=? cols="x" rows="y"></textarea>
```
Input checkbox tag: Creates a checkbox.
```
<input type="checkbox" name=? value=?>
```
Input checkbox(checked) tag: Creates a checkbox which is pre-checked.
```
<input type="checkbox" name=? value=? checked>
```
Input radio tag: Creates a radio button.
```
<input type="radio" name=? value=?>
```
Input radio tag(checked): Creates a radio button which is pre-checked.
```
<input type="radio" name=? value=? checked>
```
Input image tag: Creates a one-line text area. Size sets length, in characters.
```
<input type="text" name=? size=?>
```
Input submit tag: Creates a submit button. Value sets the text in the submit button.
```
<input type="submit" value=?>
```
Input image tag: Creates a submit button using an image.
```
<input type="image" name=? src=? border=? alt=?>
```
Input reset tag: Creates a reset button
```
<input type="reset">
```

Tables (use only for data layout - use CSS for page layout) 👇

Table tag: Creates a table
```
<table></table> 
```
Table row tag: Sets off each row in a table
```
<tr></tr>
```
Table data tag: Sets off each cell in a row
```
<td></td>
```
Table heading
```
<th></th>
```

HTML5 input tag attributes 👇

Notes- not all this browsers support; visit http://caniuse.com for details

Input email tag: Sets a single-line textbox for email addresses
```
<input type="email" name=?> 
```
Input url tag: Sets a single-line textbox for URLs
```
<input type="url" name=?>
```
Input number tag: Sets a single-line textbox for URLs
```
<input type="number" name=?>
```
Input range tag: Sets a single-line text box for a range of numbers
```
<input type="range" name=?>
```
Input date/month/week/time tag: Sets a single-line text box with a calendar showing the date/month/week/time
```
<input type="date/month/week/time" name=?>
```
Input search tag: Sets a single-line text box for searching
```
<input type="search" name=?>
```
Input color: Sets a single-line text box for picking a color
```
<input type="color" name=?> 
```

Table attributes (only use for email newsletters)

Table border tag: Sets the width of the border around table cells
```
<table border=?>
            
```
Table cellspacing tag: Sets amount of space between table cells
```
<table cellspacing=?>
```
Table cellpadding tag: Sets amount of space between a cell's border and its contents
```
<table cellpadding=?>
```
Table width tag: Sets width of the table in pixels or as a percentage
```
<table width=?>
```
Table row align tag: Sets alignment for cells within the row (left/center/right)
```
<tr align=?>
```
Table data align tag: Sets alignment for cells (left/center/right)
```
<td align=?>
```
Table row valign tag: Sets vertical alignment for cells within the row (top/middle/bottom)
```
<tr valign=?>
```
Table data valign tag: Sets vertical alignment for cell (top/middle/bottom)
```
<td valign=?>
```
Table data rowspan: Sets number of rows a cell should span (default=1)
```
<td rowspan=?>
```
Table data colspan: Sets number of columns a cell should span
```
<td colspan=?>
```
Table data nowrap: Prevents lines within a cell from being broken to fit
```
<td nowrap>
```

Basic Tags👇

Body attributes (only used in email newsletters)👇

Page layout

Note- It is very important!

FORMATTING 👇

LISTS 👇

Text Tags👇

Graphical elements👇

LINKS👇

Forms👇

Tables (use only for data layout - use CSS for page layout) 👇

HTML5 input tag attributes 👇

Notes- not all this browsers support; visit http://caniuse.com for details

Table attributes (only use for email newsletters)

CONTACT