Common HTML Elements

Everyone that writes content on the web should know a little HTML.  This is a cheat sheet for the most common used HTML elements I've seen that are supported in multiple browsers, tools, and CMS software.

Text Structure

blockquote, br, h1, h2, h3, h4, h5, h6, p

Example:

A pessimist is one who makes difficulties of his opportunities and an optimist is one who makes opportunities of his difficulties.

Harry S. Truman

<blockquote cite="http://www.brainyquote.com/quotes/authors/h/harry_s_truman.html">
    <p>A pessimist is one who makes difficulties of his opportunities 
    and an optimist is one who makes opportunities of his difficulties.</p>
    <p>Harry S. Truman</p>
</blockquote>

HTML Elements

a, abbr, acronym, code, del, em, ins, img, pre, sub, sup, strike, strong

Notes:

  • The image element (img) should include an alt="" attribute that is a description of the image.
  • Declining in use; b (use strong),  i (use em).
  • The element strike could be used for formatting, but if used to denote editing, del should be used instead.

Example:

HTML or HTML 4.01 is an abbreviation, whereas, GUI is an acronym. I added text then removed it.

<p>
    <abbr title="Hyper Text Markup Language">HTML</abbr> or <a title="HTML 4.01 Specification" 
    href="http://www.w3.org/TR/html4/">HTML 4.01</a> is an abbreviation, 
    whereas, <acronym title="Graphical User Interface">GUI</title> is an acronym. 
    I <ins>added</ins> text then <del>removed</del> it. </acronym>
</p>

Lists

dldt, dd, li, ol, ul

Example:

  • apples
  • peaches
  • pears
<ul>
    <li>apples</li>
    <li>peaches</li>
    <li>pears</li>
</ul>

Tables

caption, tabletdthtr

Grouping: tbody, thead, tfoot

Example:

Column OneColumn Two
cell one cell two
cell three cell four
Table caption

 

<table>
   <tr>
      <th>Column One</th>
      <th>Column Two</th>
   </tr>
   <tr>
      <td>cell one</td>
      <td>cell two</td>
   </tr>
   <tr>
      <td>cell three</td>
      <td>cell four</td>
   </tr>
<caption>Table caption</caption>
</table>

Content Formatting

br, div, hr, span

Elements To Avoid

center, font, s, u

References

 
Tags: ,
Add to favoritesSend to a friendDigg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList
 

Free Photos

Where can you find some photos without paying an arm and a leg?  Here are some helpful sites to try for inspiration.

Flickr Creative Commons

Balloons Off Broadway, Grove City, 2008

StockXchng

photo by ali seifert on stock.xchng

FreeFoto.com

15_19_1---Tree--Sunrise--Northumberland_web

Paid Photos

The following sites require some payment, but most images for the web are nominal (less than $1).  The sites also offer some free photos as well.

iStockPhoto.com

iStock_000005105610Large

DreamsTime.com

Red Violin

Other Free Photo Links

Wikipedia:Public domain image resources

NASA Images

nasaNAS~5~5~21649~126419

NASA Multimedia

Star Birth

Visible Earch Images from NASA

globe_west_540 

 
Tags: ,
Add to favoritesSend to a friendDigg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList