Common HTML Markup

Oct 04, 2008
by:   Tim Stanley

Everyone that writes content on the web should know a little HTML.  This is my 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

dl,  dt, dd, li, ol, ul

Example:

  • apples
  • peaches
  • pears

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

Tables

caption, table,  td,  th,  tr

Grouping: tbody, thead, tfoot

Example:

Column One Column 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

Style Preferences

br, div, hr, span, img

Personally, I don't like br tags.  If more space is needed between paragraphs, then the CSS should be modified, not the content. I prefer div elements for block sections and span elements for inline.

Example:

Snowmobiles at Keystone Colorado

I went on a snowmobile tour in Keystone Colorado.


<div class="floatleft">
    <img alt="Snowmobiles at Keystone Colorado"  
    src="http://tim-stanley.com/Snowmobile1_thumb.jpg">
</div>
<p>I went on a snowmobile tour in Keystone Colorado.</p>
<div class="clearer></div>

Head Elements

link, meta, script, style, title

 

The meta description is used to display by search engines.  If a description isn't present, the search engine will pick their won.  Most search engines use a combination of the description and content to display preview information of the page.

Version information on style sheets and JavaScript files are used and updated when the content changes to force browsers to re-load their cached versions (particularly if a far expiration date is set on the content).

Example:


<head profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href="/themes/style.css&amp;v=1.4.5.1" type="text/css" />
    <meta name="keywords" content="photography,photoshop" />
<meta name="description" content="Mister Retro has a great set of Photoshop plug-in's that
    will save a significant amount of time and effort when manipulating files in Photoshop for 
    those textured and stunning artistic effects." />
    <link rel="last" title="Using Cache And Compression For Performance" 
        href="/post/Using-Cache-And-Compression-For-Performance.aspx" />
    <link rel="first" title="How To Enable HTM Server Side Include Parsing in IIS" 
        href="/post/How-To-Enable-HTM-Server-Side-Include-Parsing-in-IIS.aspx" />
    <link rel="next" title="Images Part 1 - Snagit" href="/post/Images-Part-1-Snagit.aspx" />
    <link rel="prev" title="Font Tools" href="/post/Font-Tools.aspx" />
    <link rel="contents" title="Archive" href="/archive.aspx" />
    <link rel="start" title="Tim-Stanley.com" href="/" />
    <link type="application/rdf+xml" rel="meta" title="SIOC" href="http://tim-stanley.com/sioc.axd" />
    <link type="application/apml+xml" rel="meta" title="APML" href="http://tim-stanley.com/apml.axd" />
    <link type="application/rdf+xml" rel="meta" title="FOAF" href="http://tim-stanley.com/foaf.axd" />
    <link type="application/rss+xml" rel="alternate" title="Tim-Stanley.com (RSS)" 
        href="http://tim-stanley.com/syndication.axd?format=rss" />
    <link type="application/atom+xml" rel="alternate" title="Tim-Stanley.com (ATOM)"
        href="http://tim-stanley.com/syndication.axd?format=atom" />
    <link type="application/rsd+xml" rel="edituri" title="RSD" href="http://tim-stanley.com/rsd.axd" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link type="application/opensearchdescription+xml" rel="search" title="Tim-Stanley.com"
        href="http://tim-stanley.com/opensearch.axd" />
    <script type="text/javascript" src="/blog.js&amp;v=1.4.5.1"></script>
    <title>Machine Wash Effect - Tim-Stanley.com </title>
</head>

DocType

The DOCTYPE is the most controversial.  XHTML or HTML, transitional, or strict?  The main reason the DOCTYPE is controversial is because it can cause browsers to display in standard or quirks mode depending on the DOCTYPE. XHTML 1.0 Transitional is my preference.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

References

Related Items