<!DOCTYPE html> <html> <head> <title>My Website</title> <meta charset="UTF-8" /> <style type="text/css"> * { font-family: Verdana, Arial, sans-serif; } body { background-color: #fff; cursor: default; } h1 { font-size: 15pt; } p { font-size: 10pt; } </style> </head> <body> <h1>Your Page</h1> <p>Your content.</p> </body> </html>

Code Reference Index

HTML5 DocType

The doctype goes on the very first line of your document, and indicates that the page is HTML5.

<!DOCTYPE html>
Top

Basic HTML Tags

<html> goes around your entire document (right after your <doctype>), with <head> for your title, meta, link, and script tags, and <body> for all of your content.

<html>
<head>
	<title>My Website</title>
	<meta charset="UTF-8" />
</head>

<body>

</body>
</html>
Top

Author, Description, and Keywords

These go in the <head> and add extra information about your page, which is used by some search engines.

<meta name="author" content="Your Name" />
<meta name="description" content="About your site." />
<meta name="keywords" content="keyword1, keyword2, keyword3" />
Top

Setting your Favicon

This sets the location of your favicon, a 16x16 image. If this isn't specified, the browser looks for "favicon.ico"

<link rel="shortcut icon" type="image/x-icon" href="URL" />
Top

Linking to a Stylesheet

Keep this in your header.

<link rel="stylesheet" type="text/css" media="screen" href="URL" />
Top

Linking to a Script

Keep this in your header, or at the bottom of your <body>

<script type="text/javascript" src="URL"></script>
Top

Linking to a Webpage or File

<a href="URL">Link Title</a>
Top

Linking to an Image

<img src="URL" alt="Alternate text if image doesn't load" />
Top

Flash

<object data="example.swf" type="application/x-shockwave-flash">
	<div>If you can see this message, you do not have flash installed!</div>
</object>
Top

Font Styling

Italic

<em>Italic</em>
<span style="font-style: italic;">Italic</span>

Bold

<strong>Bold</strong>
<span style="font-weight: bold;">Bold</span>

Superscript and Subscript

<sup>Superscript</sup>
<span style="vertical-align: super;">Superscript</span>
<sup>Subscript</sup>
<span style="vertical-align: sub;">Subscript</span>

Lines

<del>Strikethrough</del>
<span style="text-decoration: line-through;">Strike Through</span>

<span style="text-decoration: underline;">Underline</span>
<span style="text-decoration: overline;">Overline</span>
<span style="text-decoration: underline overline;">Underline and Overline</span>

Mouseover Text

<abbr title="Abbreviation">Abbreviation</abbr>
<acronym title="Acronym">Acronym</acronym>
<span title="General Title">General Title</span>

Color

<span style="color: red;">Color Name</span>
<span style="color: #ff0000;">Color Hex (rrggbb)</span>
<span style="color: #f00;">Color Short Hex (rgb => rrggbb, so #f00 is identical to #ff0000)</span>

Font

<span style="font-size: 10pt;">Size</span>
<span style="font-family: Verdana, Arial, sans-serif;">Family (If Verdana isn't available, it will use Arial)</span>

Find a custom font

<a href="http://www.google.com/webfonts">Google Web Fonts</a>

Alignment

<p style="text-align: center;">Horizontal Center</p>
<p style="vertical-align: middle;">Vertical Center</p>
<p style="text-indent: 1em;">Indented Text</p>
<p style="line-height: 14pt;">Line Height</p>
Top

Dealing with Text and Elements

Headings

1 is the largest, and 6 is the smallest. These should be used as a hierarchy, and are important for search engine optimization.

<h1>My Page</h1>
<h6>My sub-sub-sub-sub-sub-heading</h6>

Paragraph

<p>A paragraph of text.</p>

General element

Can contain text or other elements

<div>This is just a single sentence.</div>
<div>
	<p>This is a group of paragraphs.</p>
	<p>This is a group of paragraphs.</p>
	<p>This is a group of paragraphs.</p>
</div>

A quote

<blockquote>This is a quote.</blockquote>

This is used for mono-spaced or formatted text.

<pre>Formatted text.</pre>

A linebreak. You should generally use -this- or <p> tags.

<br />

A horizontal rule, used in the same place you'd use a <br /> tag.

<hr />

A vertical rule.

<hr style="height: 100px; width: 1px;" />
Top

Element Spacing

padding: 10px; will make the padding 10px on all sides

padding: 10px 5px; will make the top and bottom 10px, and the left and right 5px

padding: 10px 7px 5px 3px; will make the top 10px, right 7px, bottom 5px, and left 3px

<div style="padding: 10px;">Padding (Inside)</div>
<div style="margin: 10px;">Margin (Outside)</div>
Top

Border

Styles include: none/hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

<div style="border: 2px solid #000;">Width, Style, and Color</div>
Top

Background

Background Color

<div style="background-color: #f00;">Color</div>

scroll or fixed

<div style="background-attachment: scroll;">Sets whether the background image moves with the page or not</div>
<div style="background-image: url('image.png');">Specifies the file location of a background image</div>

Background Position

Options include:

left top, left center, left bottom

right top, right center, right bottom

center top, center center, center bottom

<div style="background-position: top center;">Where the background is relative to the element it's in (x, y) - you can also use pixel or percent values.</div>

Background Repeat

Options include: no-repeat, repeat, repeat-x, repeat-y

<div style="background-repeat: no-repeat;">Which direction to repeat the background image (none, x & y, x, y)</div>
Top

Tables

<table>
	<tr>
		<th>Column Heading 1</th>
		<th>Column Heading 2</th>
		<th>Column Heading 3</th>
	</tr>
	<tr>
		<td>Row 1 Column 1</td>
		<td>Row 1 Column 2</td>
		<td>Row 1 Column 3</td>
	</tr>
	<tr>
		<td>Row 2 Column 1</td>
		<td>Row 2 Column 2</td>
		<td>Row 2 Column 3</td>
	</tr>
</table>
Top

Lists

Unordered List

<ul>
	<li>Item 1<li>
	<li>Item 2<li>
	<li>Item 3<li>
</ul>

Ordered List

<ol>
	<li>Item 1<li>
	<li>Item 2<li>
	<li>Item 3<li>
</ol>

Definition List

<dl>
	<dt>Definition Title 1<dt>
	<dd>Definition 1</dd>

	<dt>Definition Title 2<dt>
	<dd>Definition 2</dd>

	<dt>Definition Title 3<dt>
	<dd>Definition 3</dd>
</dl>
Top

Styling a List

You may use the following styles, or "none":

Language-specific: armenian, cjk-ideographic, georgian, hebrew, hiragana, hiragana-iroha, katakana-iroha

Symbols: circle, disc, square

Ordered:
- lower-alpha / lower-latin (a, b, c), lower-greek, lower-roman (i, ii, iii, iv, v, vi)
- upper-alpha / upper-latin (A, B, C), upper-roman (I, II, III, IV, V, VI)

<ol style="list-style-type: disc;"></ol>
Top

Forms

Method is "GET" or "POST", and action us the URL the form requests.

<form method="post" action="URL"></form>

Single-line text input

<input type="text" name="fieldName" value="Default Value" />

Multi-line text input

You can specify a width and height to override rows="" and cols=""

<textarea rows="5" cols="15" style="width: 100%;">Textarea</textarea>

Password input

(all characters replaced with asterisks * or bullets •)

<input type="password" name="fieldName" value="Default Value" />

Checkbox

Set as checked using checked="checked" - some older browsers may still check box if you use checked=""

<input type="checkbox" name="fieldName" checked="checked" />

Radio button

Set as checked using checked="checked" - some older browsers may still check box if you use checked=""

<input type="radio" name="fieldName" checked="checked" />

Select Dropdown

Use selected="selected" to specify the default selected row

<select name="options">
	<option value="1">Option 1</option>
	<option value="2" selected="selected">Option 2</option>
	<option value="3">Option 3</option>
</select>

File Upload

Add enctype="multipart/form-data" to your <form> for this to work

<input type="file" name="fieldName" />

Button

<input type="button" value="Button" />

Image

<input type="image" src="URL" alt="Image Button" />

Submit

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

Reset

<input type="reset" value="Reset Form" />
Top
Hey, we just launched EasyEndorse, the easiest way to collect and display testimonials. Check it out.