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.
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
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>
To insert comments in HTML that don't get displayed in the browser, use
<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 are created with the
|External Link||Remember to include 'http' in URL when linking to external page.|
||Email Someone||Email links open in user's default email program.|
|Link to location on page||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.
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>
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">
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!">
<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
blockquotetag. 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.
without br tag.
br creates newline.
To add a horizontal line on the page (for a thematic break), use a single
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.
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:
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.
Alternatively, you can try out Learneroo before signing up.