This is an 'h1' heading

An 'h1' heading should be used only for the most important heading in the document, which is usually the top heading.

This is an 'h2' heading

This is an 'h3' heading

This is an 'h4' heading

This is an 'h5' heading
This is an 'h6' heading

Headings indicate a hierarchy in your document. The 'h' tags should never be used in place of boldface or font-size. The appearance of headings can be changed with CSS.

Images in HTML

This image is in the same set of files as this document:

Photo of a kitten

This image is outside this set of files, on another web server:

Photo of another kitten

The difference in the two images' locations can be found in the 'src' attribute, inside the 'img' tag.

Links in HTML

Links have something in common with images: you can write them to get a file from the same set of files as this document, or write them differently to get a file outside this set of files, on another web server.

This link opens a file from the same set of files as this document: a CSS-enhanced page. It uses what is called a relative URL.

This link opens a file from outside this set of files: the placekitten site. It uses what is called an absolute URL.

The difference can be found in the 'href' attribute, inside the 'a' tag.

HTML Lists

  1. This is an ordered list.
  2. An ordered list has numbers (you can change that with CSS).
  3. You should learn the difference between an ordered list and an unordered list.
This is a definition list.
Each item in a definition list has two parts, a term ('dt') and data ('dd'). Think of a dictionary definition: Word = term. Definition = data.
Use CSS to change the appearance of a definition list.
The structure of a definition list should indicate the pairs, term and data, but you can make them look however you like by changing their properties with CSS.

Conclusion

After you have mastered the HTML tags and conventions on this page, you can start learning CSS.