Skip to main content

Posts

HTML5 Features - The Semantic Header and Footer

10. The Semantic Header and Footer Gone are the days of: view plain copy to clipboard print ? < div   id = "header" >        ...   </ div >       < div   id = "footer" >        ...   </ div >    Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with: view plain copy to clipboard print ? < header >        ...   </ header >       < footer >        ...   </ footer >    It’s fully appropriate to have multiple header s and footer s in your projects. Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header .

HTML5 Features - Email Inputs

9. Local Storage Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed. “localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.” - QuirksBlog While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists. via http://www.findmebyip.com/litmus/

HTML5 Features - Placeholders

8. Placeholders Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this. < input   name = "email"   type = "email"   placeholder = "doug@givethesepeopleair.com"   />    Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.