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.

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>

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

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.

- marks the entire table. <tr></tr> - marks each table row.

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