Basic HTML tag cheatsheet

After a friend asked me a few questions about the basic HTML tags while trying to clear up some confusion, I went Googling for some sort of cheat sheet listing just the most basic tags. I couldn’t find one — just came up with a lot of full-blown tutorials or cheat sheets listing every tag in the book — so I tossed this together. Hopefully it helps.

I’m only looking at the tags most likely to be used in your standard, basic weblog post, so there won’t be much in the way of structural stuff here, just presentational.

• Paragraphs: Require and opening and closing tag.

  <p>This is a paragraph.</p>

• Bold: Requires an opening and closing tag. Can be written in two ways.

  <b>This is bold text.</b>
<strong>This is ‘strong’ text.</strong>

  Both will display exactly the same way in most browsers.

• Italic: Requires an opening and closing tag. Can be written two ways.

  <i>This is italicized text.</i>
<em>This is ’emphasized’ text.</em>

  Both will display exactly the same way in most browsers.

• Underline: Requires an opening and closing tag. This is technically a deprecated tag and not officially a part of modern HTML, but is still recognized and rendered by most browsers.

  <u>This is underlined text.</u>

• Strikethrough: Requires an opening and closing tag. This is technically a deprecated tag and not officially a part of modern HTML, but is still recognized and rendered by most browsers.

  <strike>This text is struck through.</strike>

• Block Quote: Requires an opening and closing tag. Should not be used inside a paragraph, but paragraphs can be used inside a block quote. Used for quoting sections of text from other pages.

  <blockquote>
<p>This is text that was originally on another website and is being quoted here.</p>
</blockquote>

• Link: Requires an opening and closing tag. The link tag takes at least one argument: the destination address.

  <a href="http://www.example.com/">This text is linked.</a>

  In the above example: a defines this as a link tag (technically an ‘anchor’); href defines the type of link (there are others that we’re not worrying about); ="http://www.example.com/" is the target address (URL).

  For added clarity, a second argument can be added to the link. Adding the title argument will create a tooltip-style popup text when you hover over the link.

  <a href="http://www.example.com/" title="An example link">This text is linked and titled.</a>

• Image: Image tags have no closing tag. The image tag takes at least one argument: the location of the image file.

  <img src="http://www.example.com/imagefile.jpg" />

  In the above example: img defines this as an image tag; src defines the source of the image; ="http://www.example.com/imagefile.jpg" is the address of the image file, and /> closes the tag (as there is no closing </img> tag).

  There are a number of other arguments that can be added to img tags. While none are strictly required, the most important addition is the alt argument. This defines text that will appear if, for any reason, the image does not load.

  <img src="http://www.example.com/imagefile.jpg" alt="A sample image" />

  Other possible arguments include width and height, which define the size of the image in pixels; title, which defines pop-up tooltip text just as it does on link tags; and align, which will “float” the image to one side or the other of any text on the page.

  <img src="http://www.example.com/imagefile.jpg" width="100" height="50" alt="A sample image" align="right" />

  The above sample defines an image that is 100 pixels wide, 50 pixels tall, and will “float” to the right side of the page, wrapping text around to the left. If a reader hovers their cursor over the image the text “A sample image” will appear in a pop-up tooltip, and if for any reason the image does not load, the text “A sample image” will appear on the page where the image should be.

• Lists: These get slightly more complex, though not terribly so. There are three types of lists: ordered lists, where each successive item is designated by an ascending number; unordered lists, where successive items use bullet points; and definition lists, intended for use in dictionary style term and definition pairs. In all three types, opening and closing tags are required for the lists and all list items.

  Both ordered and unordered lists use the same basic structure: an opening tag that defines the type of list, one or more list items, and a closing tag denoting the end of the list.

  An ordered list uses the ol tag. Here’s the source code on the left, and the final list on the right:

  Source code	Final output
  <ol> <li>Item number one.</li> <li>Item number two.</li> <li>Item number three.</li> </ol>	Item number one. Item number two. Item number three.

  An unordered list uses the ul tag.

  Source code	Final output
  <ul> <li>Item number one.</li> <li>Item number two.</li> <li>Item number three.</li> </ul>	Item number one. Item number two. Item number three.

  Definition lists use the same basic structure, only rather than using paired li (list item) tags for each item, they use a set of tag pairs: dt (term) and dd (definition).

  Source code	Final output
  <dl> <dt>Term one</dt> <dd>The definition for term one.</dd> <dt>Term two</dt> <dd>The definition for term two.</dd> <dt>Term three</dt> <dd>The definition for term three.</dd> </dl>	Term one The definition for term one. Term two The definition for term two. Term three The definition for term three.

And I think that about covers the basics. Of course, let me know if anything’s not explained well, or if other tags could use a little explanation.