Fireside State HTML

About HTML

HTML stands for Hypertext Markup Language, meaning that you mark up text with special tags to indicate function. These are done through <>. Common tags you may see are <table> <tbody> <tr> <td> <p> <div> <span> <a href=”URL”> <div> <img /> <br />. Everything in HTML is a defined word, such that <p> will always be paragraph, and <paragraph> does not have the same function or meaning.

Almost all tags require a corresponding closing tag. (For example you’d open a table with <table> and then you’d close it with </table>. There are some tags are self-closing, like <br /> (break) which means it includes the “/” inside the opening tag to close itself.

HTML is rendered, or displayed, in a program like a browser (Internet Explorer, Chrome, or Firefox, etc.) or an email client (Like Gmail, Hotmail, Outlook, Yahoo, Apple Mail). Browsers are typically up to date and standards compliant, but email clients are not. Because of this, there are some HTML strategies that work for emails, that don’t work well in browsers, and vice-versa.

You can  use www.litmus.com (or other similar services) to test emails in various email clients to see how it will display. There is often a discrepancy between how an email will appear in the browser and how it will appear once rendered in a specific email client.

Common HTML Tags

Basic Tags

<p> = Paragraph. </p> closes, also adds space before and after the text and for webpages usually has a specific inherited styling.

<div> = A newish container unit that encapsulates other page elements and divides the HTML into sections. Very helpful for web pages, almost completely useless for emails. Closed with </div>

<span> = A span that overrides all other inherited values. This is used for setting a certain amount of text a particular font or size for example. Closed with </span>

<a href=”URL”>Hyperlinked Text</a> = This inserts a link. Closed with the </a> tag.

<img href=”Imagelink” /> = This inserts an image.

href = Inside an <a> or <img> tag, this is an attribute that sets which URL to look for.

&nbsp; = a single space “ “.

<br /> = A self-closing tag that indicates a line break

Table Tags:

<table> = defining the start of the table element hence “table”

<tbody> = defining the start of the table body element hence “tbody”

<tr> = Opening a table row element hence “tr”

<td> = Opening a table cell element that contains table data hence “td”. The actual data that goes inside a table, like additional HTML tags for an image, text, etc. all go inside the <td> element.

</td></tr></tbody></table> = Closing the cell, row, body, and table respectively

Tables require each of those four elements and their corresponding closing tags to be complete. They also have to be closed in the order that they were opened in.

Attributes:

Each HTML tag, like <table> can have different attributes that alter how it looks and interacts with other tables. They all follow the format <elementTag AttributeName=”AttributeValue”> and are in the opening tag of the element. For example <table align=”center”>. Different tags have specific attributes that work with them. Not all attributes work with all tags.

Align = This changes the alignment of the entire element like “center” or “left” or “right.”

Width = This sets the width of the element - either a static size like 650px (px = pixels) or a ratio like 100% of the available space to it. Ratios are helpful for mobile friendly designs.

Cellspacing = This sets the amount of space, in pixels, between cells in a table, for example “5” or “0.”

Cellpadding = This sets the space, in pixels, between the cell wall and the cell content. For example “5” or “0.”

Style = This is a special attribute that sets the style of the element. There are a number of different ways elements can be styled. They are set inside the style attribute.

Style settings:

These follow the format <table style=”setting-name: settingValue; setting-name: settingValue;”>

For example: <table style=”font-family: Arial; text-align: center;”>

Font-size = This sets the font size of text, usually in px (pixels)

Text-align = This sets how the text is aligned inside the element, like “center” or “left” or “right”

Color = This sets the color of the text, usually in hex values like #000000.