HTML for Divi Cheat Sheet

Last modified Oct 13, 2020
Difficulty Beginner
Language HTML

Document Structure

<p>... </p>

Plain text is placed inside this tag.

<h1>... </h1>

<h2>... </h2>

<h3>... </h3>

<h4>... </h4>

<h5>... </h5>

<h6>... </h6>

Six different variations of writing a heading. <h1> has the largest font size, while <h6> has the smallest.

<div> … </div>

A webpage’s content is usually divided into blocks, specified by the div tag.

<span> … </span>

This tag injects inline elements, like an image, icon, emoticon without ruining the formatting / styling of the page.

<span style="color:#f95149">Text</span>

Inline text with an inline style, that is changing the text color to red

Output: Text


A line break for webpages. Is used when wanting to write a new line.


Similar to the above tag. But in addition to switching to the next line, this tag also draws a horizontal bar to indicate the end of the section.

Text formatting


Makes text bold. Used to emphasize a point

Output: Text


Alternative to the above tag, also creates bold text.
Output: Text


Another emphasis tag, but this displays text in italics.
Output: Text


Also used to display text in italics, but does not emphasize it like the above tag.
Output: Text


Quotes often go into this tag. Is used in tandem with the <cite> tag



<a href="#link">Link text</a>

Anchor tag. Primarily used for including hyperlinks.

<a href="mailto:">Email me!</a>

Tag dedicated to sending emails.

<a href="tel:###-###">Call me!</a>

Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users.


<img src="image.png" width="50" height="50" alt="image">

The <img> tag defines an image in an HTML page.  The <img> tag has two required attributes: src and alt.


Specifies the URL of an image


Specifies an alternate text for an image


Specifies the width of an image


Specifies the width of an image








Unordered HTML List, starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.






Ordered HTML list, starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.

Document information


The style tag can be used as an alternative to an external style sheet, or complement it. Includes the webpage’s appearance information


Used to add code snippets, typically in JavaScript, to make webpage dynamic. It can also be used to just link to an external script.

Please let us know in the comments if everything worked as expected.
If you think this code saved you time, we will be happy to receive a comment!


Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Next snippet Divi Keyboard Shortcuts Cheat Sheet
Previous snippet Add An "Add To Cart" Button To A WooCommerce Shop Module