<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.
= a single space “ “.
<br /> = A self-closing tag that indicates a line break
<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.
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.
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.