How can I understand the HTML that RGE Studio generates?

Beefree App is now RGE Studio!
The email design suite you already know and love just leveled up. We’re working hard to update our help center, but you still may see some references to the old product name.

Overview

The RGE Studio builder enables you to drag and drop content elements into your design. The visual builder is the core of RGE Studio, our content design suite for emails and landing pages. When you export a design, an HTML version is generated based on the visual design. So how does this work?

The mechanism responsible for turning a design into an HTML document is our HTML multiparser. It uses a systematic approach optimized for accessibility to generate code. This system is based on the type of design being exported and the content included within it.

This article explains how RGE Studio creates stable and organized designs with HTML. We want to help anyone understand RGE Studio HTML structure, regardless of technical skill.

Helpful Definitions

If you’re already familiar with HTML, feel free to skip this section. These definitions can help non-technical folks understand the language used in this article.

The structure of the HTML file

When you open your HTML file, you'll see it's divided into three main sections:

The <head> section: This is like the instruction manual. It contains settings, styles, and rules that apply to your entire email.
The <style> section (inside the head): This is your design rulebook. It defines colors, fonts, spacing, and how things look on mobile vs. desktop. For more information on this section, see our help center article, Inline CSS.
The <body> section: This is the actual content people see: your text, images, buttons, and everything visible in the email.

Key terms

Syntax is often used interchangeably with "HTML" or "code." It's just an umbrella term that refers to the HTML coding method used in a document.
Element refers to an individual component of an HTML document. For example, the following code is an element: <p style="margin: 0;">I'm a new paragraph block.</p>
Tag defines what kind of HTML element it is and refers to the words (or letters) you see after the bracket (<) in an HTML element. In the example above, <p> is the tag, indicating this is a text element. Often, you will see both an opening tag (<p>) and a closing tag (</p>).
Attributes are used to apply extra information or styles to HTML tags. Attributes must be attached to a tag, but not all tags require attributes. Some tags can support multiple attributes. In the example above, style=”margin: 0;” is the attribute, referring to the text margin.
Rendering refers to how an HTML document appears visually on a browser or email client. This can also refer to how the design appears across different types of devices. For example, designs often appear differently on mobile devices compared to desktop devices.

For more information, we recommend this guide from Mozilla: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax.

Container Code

You may notice that the first few lines of code in RGE Studio HTML documents often look similar upon export. This is referred to as "container code." In RGE Studio-generated HTML, we use this syntax to organize container codes by:

Content blocks
Rows
Design settings

This helps us ensure that our code uses a hierarchical structure. This helps screen readers understand the design. It also helps designs look great on as many browsers, email clients, and devices as possible.

Let's talk more in-depth about each type of container code that can be found in a RGE Studio email. We’ll talk a bit about the different output for pages later in this article.

Design Settings

Every design (email or page) that you create in RGE Studio will start with the same line of code:

<!DOCTYPE html>

This defines what kind of HTML we use (HTML5). This tells the browser or email client how to read and interpret the remaining code.

For emails in particular, the first 10 lines of code will look like this:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">

<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if mso]>
<xml><w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word"><w:DontUseAdvancedTypographyReadingMail/></w:WordDocument>
<o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml>
<![endif]-->

This container code is specifically designed for emails, targeting Outlook clients. Without this, certain parts of your design may not render properly in Outlook. For more information, see Additional Notes.

The only thing that may look different between designs is the text within the <title> tags. This is based on the subject you set in the design settings.

If you’re using custom fonts in your design, it will populate right after these first 10 lines. After this, you’ll see the <style> tag. Internal CSS is defined within this section. The styles defined within the internal CSS apply to the entire design. They can vary based on the number of rows and the mobile optimization options used. To see a full example of internal CSS used in our emails, jump to the next section.

For more information about internal CSS in emails, check out our article, Inline CSS.

This entire section is wrapped within a <head> tag, so it is sometimes referred to as the head of the document. This section is followed by the <body> tag and as well as additional container code. Then we get into the design content.

Content Blocks

Each content block has its own unique syntax for its container code. To better understand the container code for a content block, we’ll use the paragraph block as an example. The code for a paragraph block without any modifications looks something like this:

<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
  <tr>
    <td class="pad">
	  <div style="color:#393d47;direction:ltr;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:1.2;text-align:left;mso-line-height-alt:19px;">
		<p style="margin: 0;">I'm a new paragraph block.</p>
	  </div>
	</td>
  </tr>
</table>

In the builder, this code correlates with this content block:

All of the HTML tags you see here are part of the content block container code. The attributes are also part of this container code. The values applied to each attribute will vary depending on the design settings. Keep in mind that the attributes can also be influenced by workspace styles.

The first part of the container code here will always refer to the content block by name (table class-”paragraph_block block-1”). For more information on how the classes are numbered, refer to Additional Notes.

The closing tags that you see at the bottom of this code snippet are part of this container code as well.

Every content block in your design will include a class attribute. This attribute names the type of content block it refers to, helping you to understand what the code is for. This attribute may also refer to mobile optimization settings. For details on what this looks like, see the Additional Notes section.

Rows

Row container code is wrapped around all of the content blocks within the structure. As a result, you’ll see the beginning of the container code for any rows above the content blocks. Here’s an example:

<table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tbody>
	<tr>
	  <td>
		<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 600px; margin: 0 auto;" width="600">
		  <tbody>
			<tr>
			  <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;">
			     <!-- Content blocks go here -->
			  </td>
			</tr>
		  </tbody>
		</table>
	  </td>
	</tr>
  </tbody>
</table>

In the builder, this code correlates with a row container:

In this example, we’ve removed the syntax for content blocks to make it easier to read. A placeholder comment was inserted instead.

The row container code also includes class attributes to help you identify it in the code (table class=”row row-1”). If there are multiple rows, you’ll see them numbered as well.

However, the row container code is more complex. Even though the row in this example is a single column, you can see a nested table for mobile stacking settings (table class=”row-content stack”). There is also an element just for the column settings (td class=”column column-1”).

In this example, the column width is 100%. However, in a design with multiple columns, you would see multiple <td> tags with a width less than 100%. The cumulative width of all the columns put together will be 100%.

Some of the row-level syntax for mobile responsiveness refers to internal CSS. This is part of the container code for the design settings. For details on what this looks like in a class attribute, see the Additional Notes section.

Putting it all together

Below you can see the entire HTML output of a design created in RGE Studio. For simplicity, this design includes a single paragraph block without any modifications. It includes all the types of container code discussed in this article. You can also see a visual example of this design here: https://beefreesupport.preview-contentdesigns.io/qGfR.

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if mso]>
<xml><w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word"><w:DontUseAdvancedTypographyReadingMail/></w:WordDocument>
<o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml>
<![endif]-->
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			padding: 0;
		}

		a[x-apple-data-detectors] {
			color: inherit !important;
			text-decoration: inherit !important;
		}

		#MessageViewBody a {
			color: inherit;
			text-decoration: none;
		}

		p {
			line-height: inherit
		}

		.desktop_hide,
		.desktop_hide table {
			mso-hide: all;
			display: none;
			max-height: 0px;
			overflow: hidden;
		}

		.image_block img+div {
			display: none;
		}

		sup,
		sub {
			font-size: 75%;
			line-height: 0;
		}

		@media (max-width:620px) {
			.mobile_hide {
				display: none;
			}

			.row-content {
				width: 100% !important;
			}

			.stack .column {
				width: 100%;
				display: block;
			}

			.mobile_hide {
				min-height: 0;
				max-height: 0;
				max-width: 0;
				overflow: hidden;
				font-size: 0px;
			}

			.desktop_hide,
			.desktop_hide table {
				display: table !important;
				max-height: none !important;
			}
		}
	</style><!--[if mso ]><style>sup, sub { font-size: 100% !important; } sup { mso-text-raise:10% } sub { mso-text-raise:-10% }</style> <![endif]-->
</head>

<body class="body" style="background-color: #ffffff; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
	<table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff;">
		<tbody>
			<tr>
				<td>
					<table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
						<tbody>
							<tr>
								<td>
									<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 600px; margin: 0 auto;" width="600">
										<tbody>
											<tr>
												<td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;">
													<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
														<tr>
															<td class="pad">
																<div style="color:#393d47;direction:ltr;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:1.2;text-align:left;mso-line-height-alt:19px;">
																	<p style="margin: 0;">I'm a new paragraph block.</p>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table><!-- End -->
</body>

</html>

Additional Notes

For content hidden on desktop or mobile, we add desktop_hide or mobile_hide to the class attribute.
For rows set to stack on mobile, you’ll see a row-content stack class attribute. For rows set to stack in reverse, you will also see an additional HTML element: <tr class="reverse">
If there are multiple content blocks per column, these will be numbered accordingly (e.g. “paragraph_block block-1”, “button_block block-2”, and so on). The numbers apply to the order in which content blocks appear within a column. As a result, each new column resets the number back to 1.
The code used to target Outlook email clients is called Vector Markup Language (VML). This is a coding language used only by Microsoft. Though VML was deprecated, it’s still used by Microsoft Word. Many Desktop Outlook clients on Windows use Microsoft Word as a rendering engine. As a result, you may see “word document” referenced throughout RGE Studio HTML.
The HTML output for pages differs from the output for emails. Pages will have more internal CSS styles, and the HTML within the <body> is less complex as a result. This is because browsers have better support for internal CSS than email clients.

If you have any questions, feel free to contact us.

Articles in this section

In this article

Overview

Helpful Definitions

The structure of the HTML file

Key terms

Container Code

Design Settings

Content Blocks

Rows

Putting it all together

Additional Notes

Comments

Product

Resources

Integrations

Company

Articles in this section

In this article

How can I understand the HTML that RGE Studio generates?

Overview

Helpful Definitions

The structure of the HTML file

Key terms

Container Code

Design Settings

Content Blocks

Rows

Putting it all together

Additional Notes

Related articles

Product

Resources

Integrations

Company