01

st

Feb

Top 10 HTML Snippets

Top 10 HTML Snippets

The 10 most used snippets in HTML. Very useful reference for any Web Developer.

Some of these you are probably familiar with, but some of them you just can’t always remember off the top of your head. So I deicided to make a reference place.

     

  1. Comments in HTML

      

    <!-- this is a comment in html -->

     

    2.  

  2.  

    Embed Flash

      

    <object type="application/x-shockwave-flash"
 data="the_flash_file.swf"
 width="0" height="0">
 <param name="movie" value="the_flash_file.swf" />
 <param name="quality" value="high"/>
</object>

     

    3.  

  3.  

    HTML Table Markup

      

    <table>
 <thead>
  <tr>
   <th></th>
   <th></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>

     

    4.  

  4.  

    Form HTML Elements

      

    <form id="form_id" action="" method="post">
<fieldset>
 <legend>The Form</legend>
 <div>
     <label for="text_field">Text Field</label> 
        <input type="text" id="text_field" name="text_field" />
    </div>
    <div>
     <label for="password_field">Password Field</label> 
        <input type="password" id="password_field" name="password_field" />
    </div>
    <div>
        <label>Radio Buttons</label> 
        <input type="radio" name="button" value="1" /> Button 1 <input type="radio" name="button" value="2" /> Button 2
    </div>
    <div>
     <label for="checkbox">Checkbox</label><input type="checkbox" name="checkbox" id="checkbox" value="checkme" />
    </div>
    <div>
  <label for="select_choice">Dropdown:</label>
  <select name="select_choice" id="select_choice">
   <option value="Choice 1">Choice 1</option>
   <option value="Choice 2">Choice 2</option>
   <option value="Choice 3">Choice 3</option>
  </select>
 </div>
 <div>
  <label for="textarea">Textarea:</label>
  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
 </div>
</fieldset>
</form>

     

    5.  

  5.  

    HTML5 Page Structure

      

    <!DOCTYPE HTML>

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Your Website</title>
</head>

<body>

 <header>
  <nav>
   <ul>
    <li>Your menu</li>
   </ul>
  </nav>
 </header>

 <section>

  <article>
   <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
   </header>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </article>

  <article>
   <header>
    <h2>Article title</h2>
    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
   </header>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </article>

 </section>

 <aside>
  <h2>About section</h2>
  <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </aside>

 <footer>
  <p>Copyright 2009 Your name</p>
 </footer>

</body>

</html>

     

    6.  

  6.  

    Embed Code for Quicktime

      

    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
       width="200" height="16">
 <param name="src" value="movie.mov" />
 <param name="autoplay" value="true" />
 <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
 <param name="controller" value="true" />
 <!--[if !IE]> <-->
   <object data="movie.mov" width="200" height="16" type="video/quicktime">
     <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
     <param name="controller" value="true" />
   </object>
 <!--> <![endif]-->
</object>

     

    7.  

  7.  

    Embed code for Windows Media

      

    <object type="video/x-ms-wmv"
  data="movie.wmv"
  width="320" height="260">
  <param name="src"
    value="movie.wmv" />
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>

     

    8.  

  8.  

    Meta Redirect

     

    This allows you to redirect the page using meta tag. Setting content to 0 for immediate redirect.

      

    <meta content="5;url=http://redirectto.com/" http-equiv="refresh" />

     

    9.  

  9.  

    Force IE8 to render as IE7 (meta)

      This code will force IE8 to render your page as IE7.
      

    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />

     

    10.  

  10.  

    Open link in new window

      

    <a href="http://google.com" target="_blank">This link will open in new window/tab</a>

     

Related Articles

Comments

By joão ramos on Mon - Feb 01st, 2010

some are neither standards compliant nor good practices at all.

bad boy :(

By agrublev on Mon - Feb 01st, 2010

Id love for you to point them out, and explain why they are not standard practices smile

By Chris Hope on Mon - Feb 01st, 2010

A useful hint for the Flash one (other than also including <embed> tag) is to add this parameter:

This allows floating elements to float over the flash movie. I’ve covered this myself here: http://www.electrictoolbox.com/div-layers-float-over-flash-vimeo-youtube/

Also, your post date for comments is still broken :(  They’re now showing as Feb 28st…

By Chris Hope on Mon - Feb 01st, 2010

Oops - my parameter didn’t show… here it is without the opening and closing angle brackets (add them in yourself at the start and end):

param name=“wmode” value=“transparent”

By agrublev on Tue - Feb 02nd, 2010

Fixed comments smile thanks

By David Wimbley on Sun - Feb 07th, 2010

One that I can spot right off the top of my head is your open in new window snippet.

The target=“_blank” will not validate in xhtml strict. Should use a javascript work around for it.

Not saying my stuff is perfect either, I am a fan of short cuts but you asked to point em out. I think that if it does what you want, the site still works to the clients liking then its fine, valid or not the client is happy

Have something to share?

Remember my personal information

Notify me of follow-up comments?

Please enter the word you see in the image below: