Email Coding 101, Module 1 of 5. Every email you have ever received is built with HTML. This module covers the building blocks, for complete beginners.
HTML stands for HyperText Markup Language. It is the standard language used to create web pages and emails. When you open an email, your email client reads the HTML code and turns it into the formatted message you see.
HTML is the skeleton of an email. It defines structure: what is a heading, what is a paragraph, where an image goes, and where a link points. It does not control colors or fonts; that is CSS. Think of building a house: HTML is the blueprint and framing, CSS is the paint and furniture.
HTML marks up content with tags written in angle brackets. Most tags come in pairs: an opening tag and a closing tag. Some, like images, are self-closing.
<p>Hello, I'm a paragraph!</p>
<h1>I'm a big heading</h1>
<a href="https://kinetic.email">Click me!</a>
<img src="photo.jpg" alt="A photo" />Attributes add extra information inside the opening tag: href (where a link goes), src (the source of an image), alt (fallback text for an image), style (inline CSS), and class (a name for styling groups).
Every HTML email follows the same skeleton: a doctype, then an html root element containing a head and a body.
A key difference between email and the web: browsers always respect the head, but many email clients, Gmail among them, strip it out. That is why email developers often put styles directly on each element with the style attribute.
Elements can be nested inside each other, like boxes inside boxes. The wrapping element is the parent and the elements inside are its children. For example, a div can contain an h2, a p, and an a. This parent-child relationship is fundamental to how every email is structured.
The next module covers CSS, the language that controls how everything looks, and why CSS in email is written very differently from the web.