HTML Reference

Collapse Content

You can reference common HTML elements on this page. View the HTML and how it looks, and try it out in the challenge below. For more info on each element, click the links to Mozilla's HTML documentation. See HTML in 21 minutes for a full tutorial.

HTML Boilerplate

This is the standard boilerplate on an HTML page (Hover overs tags for info.):

<!DOCTYPE html>

The main page content goes in-between the <body> tags.


Use h tags to create headings, with a number from 1 to 6 to specify heading level.

<h1>Highest Heading</h1>
<h3>Level 3 heading</h3>
<p>Regular text</p>

headings example


To emphasize text, use <em> or <i>. For more emphasis, use <strong> or <b>.


To insert comments in HTML that don't get displayed in the browser, use .


There are 2 kinds of lists - ordered, numbered lists, which use <ol> tags for the list element, and unordered, bulleted lists, which use <ul> tags. They both use <li> tags to mark each list item.

<li>ol lists are used</li>
<li>for ordered items</li>
<li>with numbers on side</li>
  1. ol lists are used
  2. for ordered items
  3. with numbers on side
<li>ul lists</li>
<li>for unordered items</li>
<li>with bullets on side</li>
  • ul lists
  • for unordered items
  • with bullets on side


Links are created with the <a> tag.

Link TypeHTMLResultComment
External Link link htmlGoogleRemember to include 'http' in URL when linking to external page.
email link <a href="mailto:[email protected]">Email Someone</a> Email Someone Email links open in user's default email program.
Link to location on page <a href="#lists">Lists Links to elements on page with that id.


Images are created with the <img> tag. Specify the image by setting the src attribute to the URL of the image.

<img src="">

Image Links

Replace the text inside a link with an image:

<a href="">
<img src="">

You should also put another attribute in the image tag called alt. This is text to display when the image cannot be shown. For example,

<img src="" alt="No Image Src">

No Image Src

HTML elements can also have title attributes, which is associated text that is shown when the item is hovered over.

<img src="" title="Learn Java and More!">


The <p> tag is used for paragraphs of text. A paragraph is a block-level element, which means a newline appears before and after it.

Mark quotations with the blockquote tag. By default, this will offset the text from the main content.

To add a single new-line, use a single <br> tag. It shouldn't be used just to increase spacing.

No newline
without br tag. <br> br creates newline. 

No newline without br tag.
br creates newline.

horizontal rule
To add a horizontal line on the page (for a thematic break), use a single <hr> tag.


To include newlines and extra spaces, use the <pre> tag. This will usually show everything in a monospaced font.

and     spaces
with pre tag.</pre>
and     spaces
with pre tag.


HTML tables require the following tags:

  • <table></table> - marks the entire table.
  • <tr></tr> - marks each table row.
  • <td></td> - marks each cell in a row.

Here's a simple table:


Which looks like this:



The wizard by the bridge wrote an article on his typewriter, and he would like you to convert it to HTML. Create the appropriate HTML table and lists to replace his his typewritten ones.

Please sign in or sign up to submit answers.

Alternatively, you can try out Learneroo before signing up.

Contact Us
Sign in or email us at [email protected]