Removed Elements from HTML5
The following HTML 4.01 elements are removed from HTML5: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
Category: HTML5
HTML5 Browser Support Tips
Of course a big question is can and should you use these tags now. What kind of support exists in browsers for these new semantic tags? Not all browsers are supporting these tags, however you...
The Difference Between Sections and Articles
One of the things I’ve found confusing about these new structural tags is the difference between a section and an article and when to use each. The answer seems to be a matter of...
Article Element in HTML5
The article element represents a section of content that forms an independent part of a document or site. It represents a section of self-contained content. Can the content be syndicated as an rss feed?...
NAV Element in HTML5
The nav element represents a section of a document that links to other documents or to parts within the document itself. It’s a section of navigational links. It’s intended for major navigational information like a sitewide navigation...
Aside Element in HTML5
The aside element represents content that is tangentially related to the main text of a document. It aligns with what we think of as a sidebar. As with the other structural tags its not...
Footer Element in HTML5
Similar to the header, the footer element represents the footer for a section or document. Like the header tag there can be multiple footer tags in an html5 document. A footer is more than...
Header Element in HTML5
The header element represents the header of a section. It’s meant to be used as a container for a group of introductory content or set of navigational links. While most websites currently have one...
Section Element in HTML5
The section element represents a section of a document, typically one that includes a heading. It’s used to enclose a thematic grouping of content. It’s similar to a div though it carries more semantic meaning since...
Progress Element in HTML5
The progress tag is used to markup values in the process of changing Your download is <progress>55%</progress> complete It has 3 attributes value min max By itself it’s probably not that interesting, however when combined with...
Meter Element in HTML5
The meter tag is used to markup measurements, specifically a scalar measurement within a known range. 1 2 <meter>1 of 10</meter> <meter>2 of 7</meter> It could also be used to represent a fractional value like...
Time Element in HTML5
Time as you would expect is used to markup temporal information. It can be used for dates, times, or combinations of the two. 1 2 3 <time datetime=”14:00″>2pm</time> <time datetime=”2011-07-14″>July 14th, 2011</time> <time datetime=”2011-07-14T14:00″>2pm...
How to Use HTML5 Semantic Elements
HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very...
What’s new in HTML 5
Most important thing about HTML 5 is that its now no longer part of SGML but its a language of its own. A number of new elements added as well as others removed or...
HTML Interview Questions and Answers -10
When I try to upload my site, all my images are X’s. How do I get them to load correctly? They are a few reasons that this could happen. The most common are: 1....
HTML Interview Questions and Answers -08
Is it possible to make the HTML source not viewable? In short, there is no real method or script for making standard HTML source code not viewable. You may consider doing any of the...
HTML Interview Questions and Answers -07
Which should I use, &entityname; or &#number; ? In HTML, characters can be represented in three ways: 1. a properly coded character, in the encoding specified by the “charset” attribute of the “Content-type:” header;...
HTML Interview Questions and Answers -06
How do I specify a specific combination of frames instead of the default document? This is unfortunately not possible. When you navigate through a site using frames, the URL will not change as the...
The Infinite Grid
Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium...
How to get Line-On-Sides Headers?
The post mockup was this: I coded up one way to do it which works, but isn’t quite perfect. I figured I’d post it here and you all could chime in with better ways...
How to create Stylish SVG Patterns Background
HTML <!– Yo, edit me! –> <!– This SVG will be encoded as a base64 –> <!– image for cross-browser compatibility –> <svg xmlns=’http://www.w3.org/2000/svg’ width=’70’ height=’70’> <rect width=’70’ height=’70’ fill=’#bbd817’/> <g transform=’rotate(45)’> <rect width=’99’...
What is a standard 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...
How to Get Rid of White Flash when iframe Loads using html5?
Hides iframe until fully loaded. <iframe style=”visibility:hidden;” onload=”this.style.visibility = ‘visible’;” src=”../examples/inlineframes1.html” > </iframe>
How to adjust Tricky Textarea Pulltab using html?
In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to...
Embedding Quicktime using Html5
Quicktime still requires the double-object method to get it done across all browsers. Not super pretty, but it does get the job done. <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”...
how get Base64 Encode of 1x1px Transparent GIF?
Just in case you need one. You can stretch it out to fill space as needed. <img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″> Or a black one: <img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=”>
How to make a Button With Line Breaks?
You can use carriage return characters to break the line: 
 <input type=”button” value=”Really
Tall
 Button”>
Can I put a html button inside the canvas?
Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported. If you display a list of controls in...
Can scripts be inserted with innerHTML?
I tried to load some scripts into a page using innerHTML with a div. It appears that the script loads into the dom, but it is never executed (at least in ff and chrome)....
How mix Responsive Design and Mobile Templates
You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies. Me...