Journalists' Toolkit > HTML and CSS > HTML Basics

HTML Basics

Let's look at the HTML tags you really need to know well (only seven! You can memorize them!):

* You should also know the importance (and correct use) of the attributes alt, width and height.

** You should also know the importance (and correct use) of the attributes title and target.

Make sure you understand what needs to be at the top of any standards-compliant HTML document.

Lists in HTML

HTML has three kinds of lists for your designing pleasure:

That one is an unordered list, also commonly called a bulleted list. I used CSS to get the square-shaped bullets.

Below is an ordered list, which some people may call a numbered list.

  1. Unordered <ul> </ul>
  2. Ordered <ol> </ol>
  3. Definition <dl> </dl>

Definition lists are very cool, but require a little more work. They usually look like this:

Unordered
Each list item <li> begins with a bullet.
Ordered
Each list item <li> begins with a numeral.
Definition
Instead of list items, we have term <dt> and data <dd>. The data element is indented automatically in most Web browsers.

More Tags

Headings in HTML are structural, not design elements. That means you should NOT use the heading tags to make normal text look big and bold. Use CSS for design and HTML for structure. Heading tags should be used only with real headings that designate sections of the document.

There are six levels of heading, with <h1> being primary or most important, <h2> being secondary, etc., on down to little old <h6>. The heading tags come in pairs:

Another common and useful tag is the line break:

This tag is intended to create a line ending in text such as poetry or street addresses:

Mary Smith
123 W. Main St.
Anytown, Fla. 32611

The <br /> tag should NEVER be used to add extra space between lines; that should be done with CSS instead.

Tutorial. Cheat Sheet. HTML5 Template.

Go to HTML Dog for the best free HTML tutorials.

HTML5 Visual Cheat Sheet (PDF, 1 page, 152 KB).

Get a quick template for HTML5 pages here: The real HTML5 boilerplate.

Creative Commons License This page was written by Mindy McAdams and updated on Jan. 12, 2011. It is available for re-use under a Creative Commons license.