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.

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

Element Tag / Name

Example Code Snippets

Notes

<h1> Heading 1 Element
<h1>Heading Level 1</h1>

The largest heading, typically used as page headings.

NEVER include more than one h1 element on a page.

<h2> Heading 2 Element
<h2>Heading Level 2</h2>
Used for section headings
<h3> Heading 3 Element
<h3>Heading Level 3</h3>
Used for sub-section headings
<h4> Heading 4 Element
<h4>Heading Level 4</h4>
Used for sub-sub-section headings
<h5> Heading 5 Element
<h5>Heading Level 5</h5>
Used for sub-sub-sub-section headings
<h6> Heading 6 Element
<h6>Heading Level 6</h6>

The smallest heading

<p> Paragraph Element
<p>This is a paragraph</p>
Used as containers for text content and text-styling elements
<b> Bold Element
<b>Bold Text</b>
Used to bold text when CSS is not available
<i> Italics Element
<i>Italicized Text</i>
Used to italicize text when CSS is not available
<sup> Superscript Element
<sup>Superscripted Text</sup>
Used for superscripted text, like a2 + b2 = c2
<sub> Subscript Element
<sub>Subscripted Text</sub>
Used for subscripted text, like H2O
<ol> Ordered List Element
<ol>
<li>The Best</li>
<li>Second Best</li>
<li>The Worst</li>
</ol>
Used to create lists where order matters, like rankings or instructions
<ul> Unordered List Element
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Sugar</li>
</ul>
Used to create lists where order doesn't matter, like grocery lists or product features
<a> Anchor Element

<a href="#">Dummy anchor</a>

<a href="#id-name">
Internal anchor
</a>

<a href="different-page.html">
External anchor
</a>

More commonly known as links or hyperlinks.

"Dummy" anchors are styled as links, but only navigate back to the top of the page.

Internal anchors jump to an id elsewhere on the same page.

External anchors navigate you to a different page.

<div> Content Division Element
<div>
<h1>Divs are good containers</h1>
<p>for other elements</p>
<div>of all sorts</div>
</div>

The div element is the most basic "block" element, with no extra styling.

Div elements are often used as containers.

It is common to find div elements inside of other div elements, usually for more complex layouts.

<span> Content Span Element
<p>
<span>Highlight this text</span>
but not this text
</p>

The span element is the most basic "inline" element, with no extra styling.

Span elements are often used to target text inside paragraphs or headings for very specific styling with CSS.

Void Elements

Void elements are HTML elements that should NEVER have a closing tag, unlike the regular HTML elements above.

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

Element Tag / Name

Example Code Snippets

Notes

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

Adds the image specified by the src attribute.

The alt attribute is a short description of the image, which is required for good web accessibility.

Remember that images almost always need to be resized.

<br> Line Break Element
Here is text that I want
<br>
separated by a line break

br elements force a line break immediately after where they are used.

Generally speaking, do NOT use line breaks for spacing; that is what margin and padding are for in CSS.

<hr> Horizontal Rule Element
<h2>Section Heading</h2>
<hr>
<p>Section content</p>

hr elements create a line across the page where they are used.

They are often used together with headings to create section headers.

Occassionally, they are also used to separate sections on a page.

<link> Link Element
<link
href="css/style.css"
rel="stylesheet"
>

The link element is most frequently used to connect CSS to an HTML page

Not the same thing as an anchor, which is also often called a "link"

Should ONLY be added in the <head> element of an HTML document