HTML Reference

Collapse Content Show 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>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

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

Headings

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

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

headings example

Emphasis

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

`<i>italic</i>`	italic
`<b>bold</b>`	bold

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

Lists

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.

<ol>
<li>ol lists are used</li>
<li>for ordered items</li>
<li>with numbers on side</li>
</ol>

ol lists are used
for ordered items
with numbers on side

<ul>
<li>ul lists</li>
<li>for unordered items</li>
<li>with bullets on side</li>
</ul>

ul lists
for unordered items
with bullets on side

Links

Links are created with the <a> tag.

Link Type	HTML	Result	Comment
External Link		Google	Remember 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

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

<img src="http://www.learneroo.com/assets/color-logo.png">

Image Links

Replace the text inside a link with an image:

<a href="http://www.learneroo.com">
<img src="http://www.learneroo.com/assets/color-logo.png">
</a>

alt
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

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

<img src="http://www.learneroo.com/assets/color-logo.png" title="Learn Java and More!">

Spacing

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.

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

<hr>

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

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

newlines 
and     spaces
with pre tag.

Tables

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:

<table>
<tr><td>James</td><td>Jill</td></tr>
<tr><td>Joanne</td><td>John</td></tr>
</table>

Which looks like this:

James	Jill
Joanne	John

Challenge

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.

Previous Next Node