HTML for Divi Cheat Sheet

Last modified Oct 13, 2020
Difficulty Beginner
Language HTML
Category

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

<br/>

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

<hr/>

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

<strong>Text</strong>

Makes text bold. Used to emphasize a point

Output: Text

<b>Text</b>

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

<em>Text</em>

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

<i>Text</i>

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

<blockquote>Text</blockquote>

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

Text

Links

<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.

Images

<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.

src

Specifies the URL of an image

alt

Specifies an alternate text for an image

width

Specifies the width of an image

height

Specifies the width of an image

 

List

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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.

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

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

<style>...</style>

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

<script>...</script>

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!

Source: https://www.w3schools.com/

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.