HTML cheat sheet for campaigners

</confusion> with this summary of all the html formatting basics you're likely to need!

18 April 2018 12:23

Using HTML for basic formatting isn't too hard, and with some practice you'll get the knack quickly.

The most important this to remember is that you put tags on either side of every piece of text you want to be formatted in a particular way - <> marks the beginning and </> marks the end of the tag.

If you've run into some problems with your formatting, the first thing to check for is whether you forgot to close a particular tag.

Here's a useful cheat sheet to have to hand when using HTML to format text. If you think we're missing some obvious pieces, let us know in the comments!

FORMATTING

Bold	<b> </b>	<b> (…) </b> Bold Text
Italics	<i> </i>	<i> (…) </i> Italic Text
Underline	<u> </u>	<u> (…) </u> Underlined Text
Headings	<h1> </h1> 1 being the largest/highest 6 being the lowest/smallest	<h1> (…) </h> Heading 1 <h6> (…) </6> Heading 6
Line Break	<br> denotes a new line * the tag marking the end </> does not necessarily have to be included, because breaks are “standalone-tags.”	<br> (…) = single break <br><br> (…) = double break
Paragraph	<p> </p> * NB: sometimes this causes errors in emails. Use <br> instead	<p> (…) </p> Paragraph one Paragraph two
Superscript	<sup> </sup>	<sup>1</sup>

LISTS

Numerical (ordered list)

start/end list <ol> </ol>
each list item <li> </li>

<ol>
<li> This is a bullet point </li>
<li> this is the next point </li>
</ol>

will look like this:

Coffee
Milk
Tea

Bullet (unordered list)

start/end list <ul> </ul>
each list item <li> </li>

<ul>
<li> This is a bullet point </li>
<li> this is the next point </li>
</ul>

will look like this:

Coffee
Milk
Tea

TABLES

Open/Close a Table	<table> </table>
Table Row	<tr> </tr>
Table Cell	<td> </td>
Cell/Row HORIZONTAL Alignment	cell: <td align=”left/right/center”> </td> row (specifies alignment of content for all cells in the row): <tr aign=”left/right/center”> </tr>	<td align=”left”> (…) </td> eg. left text alignment <td align=”right”> (…) </td> eg. right text alignment <td align=”center”> (…) </td> eg. centred text alignment
Cell/Row VERTICAL Alignment	cell: <td valign=”top/middle/bottom”> </td> row (specifies alignment of content for all cells in the row): <tr valign=”top/middle/bottom”> </td>	<td valign=”bottom”> (…) </td> eg. of text vertically aligned to the bottom of a cell
Specify Column Span i.e. to create the effect of merging cells across columns	<td colspan=”number-of-columns”> </td> NB: default is 0
Specify Row Span i.e. to create the effect of merging cell rows	<tr rowspan=”number-of-rows”> </tr> NB: default is 0
Stop Text Wrap in a Cell	<td nowrap> </td> i.e. prevents the lines within a cell from being broken to fit

LINKS

Hyperlink	<a href=” “> </a>	regular, showing url <a href =”link”></a> eg. www.gotothiswebsite.com using specified text <a href=”link”>(…)</a> eg. sign the petition here
Mailto Link	<a href=”mailto:SPECIFYEMAIL”> </a>	<a href =”mailto:email@something.com”></a>
Mailto Link WITH Specified Subject Line	<a href=”mailto:SPECIFYEMAIL?subject=”> </a>	<a href=”mailto:email@something.com?subject=(…)”> </a>
Image Link		<a href=”link”><img src=”image url”></a>
Link to Download a File via a Thumbnail Image Link		<a href=”FILE LINK”><img src=”IMAGE LINK” width=”WIDTH”></a>
Open Link in a New Window		<a href=”link” target=”_blank”>(…)</a>

EXAMPLE HTML

Hi friends, This is an example of html coding . It’s important for:
<ul><li> Emails </li>
<li> pages </li>
<li> modules </li> <li>etc etc </li></ul> Google some cool coding <a href="http://www.google.com">here<a/>.

RESULT:

Hi friends,

This is an example of html coding .
It’s important for:

Emails
pages
modules
etc etc

Google some cool coding here .

COLOURS

If you would like to add colours (other than black), that is more challenging.

There are 16.7 mi. different colours, each colours consists of 3 parts (the hexadecimal value): the red value, blue value and green value, which are indicated by two letters/ numbers each.