# MJML

```html
<!-- MJML -->
<mj-body>
  <mj-section>
    <mj-column>
      <mj-image src="/assets/img/logo-small.png"></mj-image>

      <mj-divider border-color="#F45E43"></mj-divider>

      <mj-text font-size="20px" color="#F45E43" font-family="helvetica"
        >Hello World</mj-text
      >
    </mj-column>
  </mj-section>
</mj-body>
```

**becomes**

```html
<!-- HTML -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>undefined</title>
    <style type="text/css">
      #outlook a {
        padding: 0;
      }
      .ReadMsgBody {
        width: 100%;
      }
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass * {
        line-height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table,
      td {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      p {
        display: block;
        margin: 13px 0;
      }
      @media only screen and (min-width: 480px) {
        .mj-2column,
        * [aria-labelledby='mj-2column'] {
          width: 50% !important;
        }
        .mj-3column,
        * [aria-labelledby='mj-3column'] {
          width: 33.3333% !important;
        }
        .mj-4column,
        * [aria-labelledby='mj-4column'] {
          width: 25% !important;
        }
      }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
      @import url(
        https://fonts.googleapis.com/css?family=Ubuntu:400,
        500,
        700,
        300
      );
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px) {
        @-ms-viewport {
          width: 320px;
        }
        @viewport {
          width: 320px;
        }
      }
    </style>
    <link
      href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300"
      rel="stylesheet"
      type="text/css"
    />
    <!--<![endif]-->
    <style type="text/css">
      @media only screen and (min-width: 480px) {
      }
    </style>
  </head>
  <body id="YIELD_MJML" style="">
    <div class="mj-body">
      <!--[if mso]>
  		<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
  		<![endif]-->
      <div style="margin:0 auto;max-width:600px;">
        <table
          class=""
          cellpadding="0"
          cellspacing="0"
          style="width:100%;font-size:0px;"
          align="center"
        >
          <tbody>
            <tr>
              <td
                style="text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;"
              >
                <!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
      <![endif]-->
                <div
                  style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;"
                  class="mj-1column"
                  aria-labelledby="mj-1column"
                  data-column-width="NaN"
                >
                  <table width="100%">
                    <tbody>
                      <tr>
                        <td
                          style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
                          align="center"
                        >
                          <table
                            cellpadding="0"
                            cellspacing="0"
                            style="border-collapse:collapse;border-spacing:0px;"
                            align="center"
                          >
                            <tbody>
                              <tr>
                                <td>
                                  <img
                                    alt=""
                                    src="/assets/img/logo-small.png"
                                    style="border:none;display:block;outline:none;text-decoration:none;max-width:NaN;"
                                  />
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td
                          style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
                        >
                          <div
                            style="height:0px;font-size:1px;border-color:#F45E43;border-style:solid;border-width:4px 0 0;margin-bottom:30px;margin-left:10px;margin-right:10px;margin-top:30px;"
                          ></div>
                        </td>
                      </tr>
                      <tr>
                        <td
                          style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
                          align="left"
                        >
                          <div
                            class="mj-content"
                            style="cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;"
                          >
                            Hello World
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso]>
      </td></tr></table>
      <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso]>
  		</td></tr></table>
  		<![endif]-->
    </div>
  </body>
</html>
```

![/images/logo_mjml.png](/assets/logo_mjml.94cffb4896896048a65a426667b2fc699842265e12a41d8a9a094f16ad618277.a41383dd.png)

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML's open-source engine generates high quality responsive HTML compliant with best practices.

![/images/mjml_screen.png](/assets/mjml_screen.8d670e92400adeb447f5775396ef7809cc711c20ae588e9c667f720f1b268c1a.a41383dd.png)

Visit [mjml.io](https://mjml.io) for more details about this open source project initiated by the Mailjet development team.

Find the mjml repository on [Github](https://github.com/mjmlio/mjml).