HTML Cheat Sheet

About the HTML Cheat Sheet

Instructions on how to create a basic HTML page using a simple text editor such as Notepad or Notepad++

Table of Contents

Lorem Ipsum Generator
Basic Structure of a HTML Document
The <head> and <title> tags
The DOCTYPE element
Paragraphs
Headings <h1>, <h2>...
In-line formatting
Block formating
Comments
Links
Images
Lists
Tables
iFrames

Lorem Ipsum Generator

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

You can generate some Lorem Ispum to use in your website mockup with the tool here.

Basic Structure of a HTML Document

<html> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</html>

The <head> and <title> tags

Add the <head> and <title> tags to put the document name in your browser's title bar.

<html>
  <head>
    <title>A document with some Lorem Ispum</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </body>
</html>

The DOCTYPE element

For completeness, add the DOCTYPE element

<!DOCTYPE html>
<html>
  <head>
    <title>A document with some Lorem Ispum</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </body>
</html>

From now on, we will only show text within the body tags.

Paragraphs

Each paragraph is surrounded with <p> tags

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum justo risus. </p>
  <p>Praesent nec ipsum lacinia, porta felis vel, tincidunt lorem.</p>
</body>

Line breaks within a paragraph are possible

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Vestibulum justo risus, tristique a semper et, porta at justo.</p> </body>

Blocks of pre-reformatted text can be displayed

<body>
  <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lestibulum justo risus, tristique a semper et, porta at justo.
mauris fringilla, massa sit amet gravida tristique, risus lacus lacinia felis, auctor fermentum leo.
</per> </body>

Read more on w3cSchools.com

Headings <h1>, <h2>...

Headings can be used, starting with <h1> for major headings and going down to <h2>, <h3>, and so on...

<body>
  <h1>Heading Level 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Praesent nec ipsum lacinia, porta felis vel, tincidunt lorem. </p>
  <h2>Heading Level 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Praesent nec ipsum lacinia, porta felis vel, tincidunt lorem.</p>
</body>

Read more on w3cSchools.com

In-line formatting

Text can be formatted in-line as bold or italic.

<body>
<p>Lorem ipsum <b>dolor sit amet,</b> consectetur adipiscing elit.</p>
<p>Praesent nec <i>ipsum lacinia,</i> porta felis vel, tincidunt lorem.</p>
</body>

More text formatting options are available, so read about them on w3cSchools.com

Block formating

Paragraphs of text can be formatted using standard HTML tags such as <quote> and <pre>

<body>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
justo risus, tristique a semper et, porta at justo.
</blockquote>
<p></p>
<pre>
while i <= 10 do
begin
writeln(StrToInt(i));
i:= i + 1;
end;
</pre>
</body>

Read more on w3cSchools.com

Comments

You can enter comments in your HTML that will be visible in the source, but now shown by the browser

<body>
  <!-- Below are the first two lines of text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Praesent nec ipsum lacinia, porta felis vel, tincidunt lorem. </p>
<!-- Below are the second two lines of text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent nec ipsum lacinia, porta felis vel, tincidunt lorem.</p>
</body>

Read more on w3cSchools.com

Links

You can link to another web page, either as part of your website, or on another site.

<body>
<!-- This will link to a page on your website -->
<p><a href="default.htm">Click here to go to the default page on your website</a>
<!-- This will link to a page on another website -->
<a href="http://www.w3schools.com/" target="_blank">Click here to go to W3CSchools.com</a>
</body>

Read more on w3cSchools.com

Images

You can embed an image in your page

<body>
<p>The image below is of Tom, the Club Engineer mascot.</p>
<p><img src="http://www.clubengineer.org/images/common/tom-the-mascot.png"><p>
</body>

Read more on w3cSchools.com

Lists

There are two kinds of HTML list: Ordered lists, which are numbered (1), (2), (3), or (a), (b), (c); and UnOrdered lists, which have a bullet image at the start of each list item. 

<body>
<h1>This is an Ordered List</h1>
<ol>
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ol>
<h1>This is an UnOrdered List</h1>
<ul>
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ul>
</body>

Read more on w3cSchools.com

Tables

Tables are grids of rows and colums, that are build up with the <table>, <tr> (table row), and <td> (table data) tags.

<body>
<h1>Table of Animals</h1>
<table>
<tr>
<td>Animal name</td>
<td>Animal country</td>
<td>Animal class</td>
</tr>
<tr>
<td>Dingo</td>
<td>Australia</td>
<td>Mamal</td>
</tr>
 <tr>
<td>Ostrich</td>
<td>Africa</td>
<td>Bird</td>
</tr>
<tr>
<td>boa constrictor</td>
<td>Brazil</td>
<td>Reptile</td>
</tr>
</table>
</body>

Read more on w3cSchools.com

iFrames

An iframe lets you embed one webpage in another.

<body>
<!-- The basic syntax is like this -->
<iframe src="http://www.clubengineer.org"></iframe>
<
!-- And you can control the size like this -->
<iframe src="http://maps.google.com" width="200" height="200"></iframe>
</body>

Read more on w3cSchools.com

Toggle menu