HTML: A Beginner's Cheatsheet

The Fundamental Structure of an HTML File

					
<!DOCTYPE html>
<html>
	<head>
	</head>
	
	<body>
	</body>
</html>

Headings


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

Links


<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="mailto:ada@lovelace.com">Email me</a>

Images

Absolute image path:


<img src="http://lorempixel.com/200/200/city" alt="Picture of a city" />

Relative image path:


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

Lists

Unordered (bulleted) list:


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

Ordered (numbered) list:


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

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.

Paragraphs


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

Comments


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

Tables


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

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.