HTML 5.1 and the main element. HTML 5 officially reached “candidate recommendation” status at the W3C last month, with the goal of hitting final publication in mid 2014. This means that HTML5 will be “feature frozen” by June 2014: most additions to the spec between now and then will appear as better documentation, improved test suites, and the ironing out of any inconsistencies. While programmers concentrate on supporting the technological panoply of HTML5, various working groups have moved on to HTML 5.1. That new specification, currently scheduled for publication in 2016, incorporates many efforts that did not make the deadline for 5.0, including Web Workers, Storage, Sockets, improved accessibility, and adaptive development.
Why do we need another element? The new main element currently hovers between inclusion in the final HTML5 spec and 5.1, depending on how quickly it is implemented in browsers. Using main Given those strictures, a typical use of main is shown in the following example: <a href=#>Rigs</a> $('<main>'); Convert Word Documents to Clean HTML.
HTML5 Placeholder Input Fields Fixed with jQuery. HTML5 added some new features for input and textarea fields. One is inspired by Safari’s search box: placeholder This adds an default text if the textfield is empty: jQuery Fix for All Browsers Currently the placeholder works with the latest Webkit (Safari nightly build) and Chrome only. In Safari 4.0 placeholders won’t appear in textareas. $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); Don’t forget the last blur() call.
Update: Robin mentioned in the comments, that this would post the placeholder values to the form action script. You’ll find the whole code at github. CSS Styling While the placeholder is visible, the text field gets an additional .placeholder class. Result. Crocodoc. HTML5 ADVENTURE CALENDAR. The Only HTML5 Resources You Need for Getting Up to Speed. There’s a lot of buzz going around about HTML5. Big companies such as Apple are predicting that it’s the technology that will sign the death warrant of the popular Flash platform that powers a lot of rich internet apps and complex dynamic web components. But what is HTML5, really? How will it change the jobs of web developers and web designers? Here are 15 web resources to help you on your quest in getting current about the impending technology that’s already being adopted by major web browsers and leveraged in large sites such as Google. 1. WTF is HTML5 For the visually-inclined and casual folks out there, here’s an interesting HTML5 infographic covering useful things such as a comparison of HTML5 and Flash, web browser support/readiness, and a highlight of some of the more popular and powerful modules in HTML5. 2.
Software developer and popular blogger, Mark Pilgrim, has written an online book about HTML5. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Related Content About the Author. Periodic Table of the Elements - Josh Duck. Let’s Call It a Draw(ing Surface) You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Nothing, really. Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank.
Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing .