Frequently Used Elements (Cheatsheet)

Block elements

<p>

Describes a paragraph. Just like in english, you can have many paragraphs, but you can’t nest paragraphs (there is no such thing as a paragraph within a paragraph in english).

<h1> through <h6>

Heading level 1 (main point) through level six (sub-sub-sub-sub-sub-sub point). Think of headings as creating a hierarchical outline of your document. The h1 tag contains the main theme of your page. h2 is used for secondary themes, h3 for tertiary, etc.

<ul>, <ol> and <li>

<ul> stands for “unordered list”. In an unordered list, the order of listed items is unimportant. A grocery list is an example of an unordered list.

<ol> stands for “ordered list”. An ordered list is used when sequence is important. Step-by-step instructions for building furniture is an example of an ordered list.

<li> is a “list item”. List items are only valid inside of one of the list elements (for obvious reasons).

<dl>, <dt> and <dd>

<dl> describes a different kind of list: a definition list. The most obvious example of a definition list is a definition in a dictionary. In broader terms, a definition list is a grouping of one or more key/value pairs.

<dt> is the definition title. It describes the key.

<dd> is the definition data. It describes the value.

Example:

<dl>
    <dt>Raisin</dt>
    <dd>A dried grape.</dd>

    <dt>Prune</dt>
    <dd>A dried plum.</dd>
</dl>

<blockquote>

Describes a section of text quoted from another source.

<address>

Used to contain the contact information of the author of the document. This can be a physical address, email address, phone number or any other means of contact.

<div>

Div stands for “division”. It’s a generic element. <div> does not have a specific meaning, like <p>, or <h3>. It’s just a group of things. It is often used with id= and class= to style documents.

Example:

<div class="super-cool-things">

</div>

Inline elements

<a>

A link to a location. Used in conjunction with href= to specify the url location to link to. href= stands for “Hypertext Reference”. Note: You can not place a link inside of a link.

Example:

<a href="http://google.com">Google is great!</a>

<img />

Is used with the src= attribute to place an image in the page. The src (image source) is the full URL to an image file (.gif, .png, .jpg format). An img also should have an alt= attribute. alt is a plain-text alternative to the image. It describes the image for computers, or for screen readers.

<img /> is also important for another reason: it is an example of a self-closing tag. A self-closing tag has no end tag. It is self-contained. Notice how self-closing tags contain a / at the end. This indicates it’s self-closing.

Example:

<img src="http://example.com/cats.jpg" alt="Cute kittens romping about" />

With some text:

Kittens are great, am I right?

<img src="http://example.com/cats.jpg" alt="Cute kittens romping about" />

Sooo cute!

<b> or <strong>

Strongly emphasized text (usually rendered as bold). These two tags actually have slightly different meanings (but I won’t get into that here).

<i> or <em>

Emphasized text (usually rendered in italics). These two tags actually have slightly different meanings (but I won’t get into that here).

<code>

A sample of computer code, like HTML or CSS.

That’s not all. HTML5: The Markup Language lists all of the descriptive elements available in the latest version of the language.