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.
Comments in HTML
<!– this is a comment in html –>
Embed Flash
<object type=”application/x-shockwave-flash”
data=”the_flash_file.swf”
width=”0″ [...]
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.
- Comments in HTML
<!-- this is a comment in html -->
- 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>
- HTML Table Markup
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
- 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>
- 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>
- 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>
- 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>
- Meta RedirectThis 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" />
- 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" />
- Open link in new window
<a href="http://google.com" target="_blank">This link will open in new window/tab</a>
Related posts:
- 7 Amazing Presentation Slides to Teach you How to Code with jQuery
- Expression Engine Introduction Video Series – Day 1
- Expression Engine Introduction Video Series – Day 2
- jQuery for uttermost beginners (video)
- 10 Awesome jQuery and JavaScript Snippets
Did you absolutely LOVE this article... share it!
Comments
nive nice
i disagree with the mint website green comment. it looks like its an eco site. i only knew it had anything to do with money due to the word ‘money’ being in the header
With exception to the last two (just my opinion), this is a very inspired collection of site designs that run the gamut from simple and sleek to harmoniously colorful. Thanks for sharing your thoughts.
Why concentrate on the home/main page only?
Surely the design of the sub-pages are more important to the user.
Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
Jumping Castle
I wouldn’t necessarily call these the most influential web designs (besides apple maybe), but it is definitely a nice collection with well-thought comments.
What I don’t understand is why a site like yours, one focused on web design doesn’t do better spam protection. One look at the comments above and I can tell at least half of them are spammy.
At the very least you should add ‘nofollow’ to the links so google doesn’t penalise you.
What a well written great piece of information. I remember that I was looking for something like this from a couple of months. I am glad that I found my way here by coincidence!
placemats
Really its an great kind of resource for the users including me and more stuff because of the simple designs and thanks for the information…
Very interesting as well as informative post.Thanks for providing for us.I read your article with my pleasure.
wedding stubby holders
Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
stubby holders
Nice article. Thanks for sharing!
Like step 2, that is going to cut down on the coding, should make the page with flash run faster as well with less code, thanks alot.
Leave your own!