HIDE ALL NOTES

Document Layout

Doctype

The doctype is an important element in HTML pages. It tells browsers to go into standards mode, which changes the way that the page is parsed and rendered. HTML5 defines a very simple doctype that works in all browsers, from IE6 up, and is suggested for use.

Example

HTML5:

<!DOCTYPE html>

Example

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Example

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Other Layout Tags

<html> - Defines the HTML document.

<head> - Contains information about the HTML document that typically describes the document.

<body> - Defines the visible portion of the page.

Structural Markup

Div

The div tag is used to define blocks of the page, either for contextual or styling purposes, and typically renders as a block element.

Example

<div id="content">Content here</div>

Span

The span tag is used to define portions of content, like divs, but typically renders inline and is used for smaller amounts of content.

Example

This is <span class="highlight">highlighted</span>.

Lists

There are three types of lists - Unordered, Ordered, and Definition.

Ordered & Unordered Lists

<ul> - Unordered lists. Useful for simple lists where the sequence of items has no specific order.

<ol> - Ordered lists. Simple lists that imply a set order to the items in the list.

<li> - Used to wrap each list item in ordered and unordered lists.

Ordered and unordered lists can be nested in list items, such as to create outlines.

Example

Household Pets

<ul>
  <li>Dogs</li>
  <li>Cats</li>
  <li>Gerbils</li>
</ul>

Example

Things to do today

<ol>
  <li>Work on HTML Cheat Sheet</li>
  <li>Get sheet reviewed</li>
  <li>Profit</li>
</ol>

Definition Lists

<dl> - Definition lists. Rather than using list items, they use pairs of tags for content.

<dt> - Definition term. The first item in the list, which is being defined.

<dd> - Definition description. Follows the definition term, describing the term.

Example

HTML List Elements

<dl>
  <dt>UL</dt>
  <dd>Unordered list element</dd>
  <dt>OL</dt>
  <dd>Ordered list element</dd>
  <dt>DL</dt>
  <dd>Definition List element</dd>
</dl>

Forms

Forms

<form> - Defines a section of the page as a form. Typically requires a method to define whether the page is submitted via GET or POST, and an action attribute to define where it is submitted.

<fieldset> - Defines a subset of a form, to split it into parts

<legend> - Used within fieldsets, sets up a description for that part of the form.

<label> - Used to give a textual label for inputs, and can be associated with them using the 'for' attribute.

<input> - Used for a variety of inputs, as defined by the type attribute of the element. Requires a name attribute for use when the form is submitted.

disabled attribute - Used to prevent the user from interacting with the form control to which it’s applied.

<select> - A specialized input, used to create a list of options, typically selected via a dropdown menu.

<option> - Used within select elements to define the options. The content between the option tags is displayed in the list, and the value attribute is what actually gets submitted on form submit.

Notes

Common input types: text, password, hidden, radio, checkbox, file, submit, reset

Example

Basic Form Example:

<form method="POST" action="email.php">
  <fieldset>
    <legend>Login</legend>
    <label for="username">Username:</label>
    <input type="text" name="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" />
    <br />
    <input type="submit" value="Log in!" disabled="disabled"/>
  </fieldset>
</form>

Head Elements

Meta

Metadata about the document. Can be used to define the content type, encoding, keywords and more.

Example

Content type and encoding:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Title

Sets a title for the page.

Example

<title>My Awesome Page</title>

Script

Script tags are used to load or execute JavaScript on a page.

Example

Executing simple script:

<script type="text/javascript">alert('Hello world!');</script>

Loading script from the server:

<script type="text/javascript" src="path/to/source.js"></script>

Notes:

When loading via src attribute, a closing tag is required.
The type attribute is optional in HTML5 and assumed to be "text/javascript"

Link

Link tags define relationships between this document and external resources -- most commonly stylesheets.

Example

<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />

Common Attributes

Common Attributes

Several attributes are common amongst almost all HTML elements.

<id> - A distinct identified applied to an element. Must start with an alphabet character, but can be composed of alphanumerics, hyphens and underscores.

<class> - A space delimited list of class names, typically used for styling groups of elements, as well as for use in JavaScript to select groups of elements. Class names follow the same rule as IDs (must start with alpha, etc).

<style> - Can be used to specify in-line CSS styles for elements. Typically, abstracting this styling out to a class or ID selection is preferred, but this option is available, and typically leaned on heavily in JavaScript (for hiding/showing elements etc).

<title> - As the name implies, the title attribute gives elements a title, typically used by screen readers for accessibility purposes, as well as being rendered by most browsers as a tooltip for that element. It allows for simple strings (no in-line HTML).

Example

Example using these attributes:

<div id="header">This is my header container</div>
<div class="post">
  <p>Here is a picture of my puppy!</p>
  <img src="path/to/puppy.jpg" alt="Puppy" title="My puppy" style="border: 5px solid red;" />
</div>

Tables

Table

Defines tabular content in the page, involving several tags.

Table Structure

<table> - The container of the table itself.

<caption> - Optional. A caption describing the table. MUST be right after the <table> tag.

<thead> - Optional. Header content for the table. Any rows in this section will be displayed at the top of the table, regardless of position in the markup.

<tfoot> - Recommended. Like the header, it's content that display at the bottom of the table.

<tbody> - Optional. Defines the body of the table.

<tr> - Defines a row in the table.

<td> - Defines table data cells.

<th> - Defines table header data cells.

Example

<table>
  <tbody>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Alice</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
    </tr>
  </tbody>
</table>

Example

<table>
  <caption>People</caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
    </tr>
  </tbody>
</table>

Content Markup

Headings

There are six levels of heading tags, used as a means of defining an outline and structure to the page.

<h1>-<h6> - Largest to smallest headings.

Example

<h1>HTML Cheat Sheet</h1>
<h2>Content Markup</h2>
<h3>Headings</h3>

Text

<p> - Defines paragraphs on a page. A block-level element.

<em> - Emphasis, typically rendered out in italics, to emphasize a word or phrase. An inline element.

<strong> - Strong, typically rendered out in bold, to emphasize a word or phrase. An inline element.

<code> - Code, implies that the content is some form of computer language. Typically renders out in a fixed-width font. An inline element.

<pre> - Pre-formatted text. Also typically renders in a fixed-width font, but also respects whitespace, unlike any other markup. A block-level element.

<abbr> - Used to define an abbreviation, by specifying the full definition in a title attribute on the tag. An inline element.

<cite> - Used to mark passages of text as as references to another work of sorts, such as a book or film. An inline element.

<q> - Used to quote a text passage. An inline element.

<blockquote> - For quoting longer passages of text. A block element.

Example

<p>This is a paragraph.</p>

Example

This is <em>very</em> important.

Example

You <strong>need</strong> to pay attention.

Example

Declaration of a variable in JavaScript:

<code>var foo;</code>

Example

A simple loop in JavaScript:

<pre>
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
</pre>

Example

Man, I love <abbr title="JavaScript">JS</abbr>!

Example

Steven Spielberg has directed such hits as <cite>Jaws</cite> and <cite>Jurassic Park</cite>.

Example

<q>I never forget a face, but in your case I'll make an exception.</q> - Groucho Marx

Example

<blockquote>
  Tiger, tiger, burning bright
  In the forests of the night,
  What immortal hand or eye
  Could frame thy fearful symmetry?
</blockquote>

<p><cite>The Tiger</cite>, by William Blake</p>

Anchor

<a> - The anchor element can be used to link within a page (by element ID or name) or to other pages external to the document, using the 'href' attribute.

Example

A link to Google:

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

A link to an element in the page with an ID or name of 'top':

<a href="#top">Top</a>

Break

<br> - Break, inserts a line break.

Example

<p>This paragraph will break line <br /> right here</p>

Image

<img> - Defines an image. Requires a src attribute to specify the location of the image to display, as well as alternate text to display when images are off or in screen readers. The alt attribute will not be rendered as a tooltip in common browsers. If you wish to have a tooltip, use the title attribute (but still specify an alt as well, see Common Attributes).

Example

<img src="path/to/image.jpg" alt="My Image" />

Basic Page Example

Basic Page Examples

Example

Example using these attributes:

<!DOCTYPE html>
  <html>
    <head>
      <title>My Awesome Page</title>
    </head>
    <body>
      <h1>My Awesome Page</h1>
      <p>Here is an awesome page.</p>
    </body>
</html>