How to use HTML Quick Reference
My clients often want to be able to add html to their sites – either within an application (such as product catalog or forum post) or by directly editing their web pages. I put together this quick HTML tutorial, along with some comon html codes, which can be printed for quick reference.
The way that HTML works is that all codes are contained in brackets – the greater than/less than symbols. To apply a code to some text, you have to put the code before your text – it’s like saying: start using this code now. Then, you have to put an ‘end’ code after your text, like saying: stop using this code now. The end code is like the beginning code, but it has a slash in it.
The only hard thing about HTML is that it’s pretty picky – the codes must be spelled exactly right, all lowercase, and the symbols (<, >, /, “, “, etc.) have to be placed exactly the way they are shown below. To make it easy, you can just copy the text after “Usage:” and paste it where you would like to use it, then replace the sample text with your own text.
HTML Codes
——————————-
CODE: h4
What it does: Makes a heading (note: h1, h2, h3 are already in use on most pages, so you can go to h4, h5, h6, etc.)
Sample:
Contents
Usage: <h4>Contents</h4>
——————————-
CODE: p
What it does: Makes a paragraph, with a little space before and after for readability.
Usage: <p>Here is my text…</p>
——————————-
CODE: a
What it does: Makes an underlined hyperlink and allows you to specify the text that shows
Sample: Designed by Krista
Usage: <a href="http://www.designedbykrista.com/">Designed by Krista</a>
——————————-
CODE: blockquote
What it does: Makes an indented paragraph, just like they teach in typing class
Sample:
“And so, my fellow Americans: ask not what your country can do for you—ask what you can do for your country.” – John Fitzgerald Kennedy, Inaugural Address, 1/20/1961
Usage: <blockquote>"And so, my fellow Americans: ask not what your country can do for you—ask what you can do for your country." - John Fitzgerald Kennedy, Inaugural Address, 1/20/1961</blockquote>
——————————-
CODE: br
What it does: Makes a line break, like hitting ‘enter’. NOTE: this code is an exception because there is no ‘begin code’
Sample:
Ask not what your country can do for you…
Ask what you can do for your country.
Usage: Ask not what your country can do for you...<br /> Ask what you can do for your country.
——————————-
CODE: code
What it does: Formats the text to look like computer programming code, usually in a courier/typewriter font
Sample: If ($HeProposed) { print "say yes!"; }
Usage: <code>If ($HeProposed) { print "say yes!"; }</code>
——————————-
CODE: em
What it does: Italicizes the text.
Sample: I didn’t say that, but that’s what I meant.
Usage: I didn't <em>say</em> that, but that's what I <em>meant</em>.
——————————-
CODE: strong
What it does: Bolds the text
Sample: They may not spend the night.
Usage: They may <strong>not</strong> spend the night.
——————————-
CODE: img
What it does: Displays an image
Sample: 
Usage: <img src="http://designedbykrista.com/images/subPoppiesMobile.gif" />
Making Lists
If you have those down, you’re ready to make lists. The codes for making a list – like a bulleted or numbered list – are not complicated, but you have to use them in combination with each other. First, you encase your whole list with a code for that list, then you encase each item of your list in “li” (stands for list item). Here are the types of list codes:
- ul: stands for “unordered list”, or a bulleted list
- ol: stands for “ordered list”, or a numbered list
- dl: stands for “definition list”
——————————-
CODE: ul + li
What it does: Makes a bulleted list
Sample:
- apples
- oranges
- pears
Usage:
<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
</ul>
——————————-
CODE: ol + li
What it does: Makes a numbered list
Sample:
- One for the money…
- Two for the show…
- Three to get ready
Usage:
<ol>
<li>One for the money...</li>
<li>Two for the show...</li>
<li>Three to get ready...</li>
</ol>
——————————-
CODE: dl + dt + dd
What it does: Makes a definition list, generally a series of term/definition pairs (although definition lists may have other applications).
Sample:
- Lower cost
- The new version of this product costs significantly less than the previous one!
- Easier to use
- We’ve changed the product so that it’s much easier to use!
- Safe for kids
- You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee).
Usage:
<dl>
<dt>Lower cost</dt>
<dd>The new version of this product costs significantly less than the previous one!</dd>
<dt>Easier to use</dt>
<dd>We've changed the product so that it's much easier to use!</dd>
<dt>Safe for kids</dt>
<dd>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd>
</dl>
Tables
HTML tables are useful for displaying “tabular” data – for example, text you would normally display in an Excel spreadsheet or a Word table. One caution: you should not use tables “just to get things to line up” because that is non-standard and can mess up the display of your pages in different browsers. Tables require several different codes working in unison to work (table, tr, th, and td). Tables can be tricky, but basically you will type one row of the table at a time, from left to right. If any cell of your table would be empty, you should still put a pair of open/closing codes (e.g. <td></td>) as a “placeholder”.
——————————-
CODE: table
What it does: Opens and closes a table
CODE: tr
What it does: “table row” begins and ends one row of a table
CODE: th
What it does: “table heading”; begins and ends one cell of a table, but uses a bolder style
CODE: td
What it does: “table data”; begins and ends one cell of a table
Sample:
| Fruit | Color(s) |
|---|---|
| Apples | Red, Green, Yellow |
| Oranges | Orange |
| Kiwi | Green |
| Grapes | Purple, Green |
Usage:
<table>
<tr>
<th>Fruit</th>
<th>Color(s)</th>
</tr>
<tr>
<td>Apples</td>
<td>Red, Green, Yellow</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Purple, Green</td>
</tr>
</table>