HTML Cheatsheet

An Interactive Refresher of HTML Concepts

HTML Tags and Comments

<-- This is an HTML comment -->

<div> Same line div content </div>

<div>
This div has opening and closing tags
on different lines.
</div>

HTML Attributes and Children

<div id="my-id-value" class="my-class-value">
This div has three different children
<img src="img-src.jpeg" alt="alt description">
<div id="my-other-id-value" class="my-class-value">
This div is both a child and a parent
</div>
</div>

Regular Elements

Regular HTML elements that should ALWAYS have both an opening and a closing tag.

Element Tag / Name

Example Code Snippet

<h1> Heading 1 Element
<h1>Heading Level 1</h1>
<h2> Heading 2 Element
<h2>Heading Level 2</h2>
<h3> Heading 3 Element
<h3>Heading Level 3</h3>
<h4> Heading 4 Element
<h4>Heading Level 4</h4>
<h5> Heading 5 Element
<h5>Heading Level 5</h5>
<h6> Heading 6 Element
<h6>Heading Level 6</h6>
<p> Paragraph Element
<p>This is a paragraph</p>
<b> Bold Element
<b>Bold Text</b>
<i> Italics Element
<i>Italicized Text</i>
<sup> Superscript Element
<sup>Superscripted Text</sup>
<sub> Subscript Element
<sub>Subscripted Text</sub>
<ol> Ordered List Element
<ol>
<li>The Best</li>
<li>Second Best</li>
<li>The Worst</li>
</ol>

<ul> Unordered List Element
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Sugar</li>
</ul>

<img> Image Element
<img
src="images/mydoggo.jpg"
alt="my adorable dog"
>

Void Elements

Remember that void elements are HTML elements that should NOT have a closing tag. Every other HTML tag SHOULD have a closing tag.

Here are some common void elements you will encounter in our class.

<head> Elements

<link> - Link (to external resources)

<body> Elements

<br> - Line Break
<hr> - Horizontal Rule
<img> - Image