This file is made for editing!

Save a copy in your browser, open it in your editor, and play around with it!

The "made for editing" heading above is the most important thing on the page! So there's usually only one "h1" tag like that on the page.

Here's a less important heading.

And an even less important one.

This heading is as important as the second one above.

Using headings properly is super important for getting your site indexed correctly in Google and other search engines.

Sections

Use a "section" tag for a bunch of information that goes together. For instance, this section is about sections.

Like the "header" tag, a section doesn't look any different from the rest of the page unless you make it look different using a stylesheet. The section tag's real purpose is to let search engines know what is what on the page. It can also help you make sense of your own HTML code!

Links

Links are what hypertext is all about! You can link to another page or to another part of the same page. Try it!

Email links are usually a bad idea. You will get spammed if you put your email address on the Web. Use SpamSpan or a mail form script instead.

Lists

Headers are one way to show a hierarchy of information. Here's another:

Definition lists
Definition lists are not as commonly used, but they're really handy. There are two tags for each item in the list:
the <dt> tag, for the term being defined
the <dd> tag, for the definition of the term above. The definition gets indented, but do not use definition lists just to indent text! Use them only where they make sense, for example a list of questions and answers. With the help of a stylesheet, they can look really smart!

White space

Any amount of white space (spaces, tabs, and line breaks) in between tags is treated like a single space. It doesn't matter how much white space you put in here, it won't show in the browser. Check out the page source to see what I mean!

That means you can have as much white space or as little as you want in your HTML code without changing how the page looks. So use it in a way that makes sense to you! Let your editor help!

Tables

A table about tables
Col 1 Col 2 Col 3 Col 4
Row 1 - Col 1 Row 1 - Col 2 Row 1 - Col 3 Row 1, 2, 3 & 4 - Col 4

This looks kind of like a page layout, doesn't it?
Row 2 - Col 1 Row 2, 3 & 4 - Col 2 & 3

But don't use tables for laying out a page! It hurts comprehension for search engines and people with disabilities.
Row 3 - Col 1
Row 4 - Col 1
Row 5 - Col 1 & 2 Row 5 - Col 3 & 4
Row 6 - Col 1, 2, 3 & 4

use tables only for information that would be presented in a table in, say, a book or magazine.

Divs and spans

Like "header" and "nav" and "section," divs and spans don't do anything by themselves. They are just placeholders to use with stylesheets.
But unlike those other tags, divs and spans also have no defined meanings. They only have the meanings you give them by assigning them IDs and classes, and then defining those IDs and classes in your stylesheets.

Forms

Forms are useful for all kinds of stuff, but mainly if you know how to program or are using a program someone else wrote to handle the data.

Because this form's method is "get," any data you submit will show up in the address bar of your browser, which is helpful for bookmarking. If you don't want people to be able to bookmark their form submission, use method="post" instead.

Pythonesque

What is your name?

The "label" tags next to the checkboxes below allow you to check the boxes by clicking the labels. Try it!

What is your favorite color?

  • I mean

There are lots of other cool things you can do with forms, but these will get you started...

Multimedia

You know this is your favorite part.

Interdependent Web logo
Interdependent Web, LLC

Here's an audio player:

And a video:

For more information

There are lots more tags to play with! Here's a reference of all HTML5 tags!