HTML: A Beginner's Cheatsheet

The Fundamental Structure of an HTML File

<!DOCTYPE html>


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


<a href="my-page.html" title="My Portfolio Page">Click here</a>

Use target="_blank" to open a link in a new window/tab:

<a href="my-page.html" title="My Portfolio Page" target="_blank">Click here</a>

Use mailto: to make an email link:

<a href="">Email me</a>


Absolute image path:

<img src="" alt="Picture of a city" />

Relative image path:

<img src="images/map.png" alt="Map of Louisville, KY" />


Unordered (bulleted) list:

	<li>The first list item</li>
	<li>Another list item</li>

Ordered (numbered) list:

	<li>The first list item</li>
	<li>Another list item</li>

HTML Coding Tips

  1. Whenever you type an opening tag, immediately type the closing tag, then fill in your content.
  2. Whenever you add a 'child' element, indent it on a new line.
  3. HTML ignores multiple whitespaces in a row. You can add consecutive white space characters (spaces, tabs, & carriage returns) into your HTML, but when you view that page, all but one will disappear.


<p>Here is a lovely paragraph.</p>

Text Formatting

<em>Emphasized (italic) text</em>
<strong>Important (bold) text</strong>
<small>Smaller text</small>

Dividing Areas

<div>A generic container for elements and content</div>
<section>A section of your page</section>
<header>A container for your site's header</header>
<footer>A container for your site's footer</footer>
<nav>A container for navigation links</nav>
<main>The container for your site's main content</main>
<aside>A container for related content</aside>

Note: Of the above, older browsers only support divs.


<!-- I'm a comment; the browser won't display me -->


		<th>Left Column Head</th>
		<th>Right Column Head</th>
		<td>Left Data Cell</td>
		<td>Right Data Cell</td>

Shorthand Notation

<br />
<img />
<hr />
<link />
<input />
<meta />

Note: <link /> is not a standard web link; it is used in the head element to reference CSS files and fonts. Use <a></a> for standard web links in the body.