Tuesday, March 19, 2024

Top HTML5 Tutorials from HTMLGoodies

HTML5 is an emerging technology that is slowly changing the face of the web. The latest browsers support it, and developers are eager to begin using it on their websites. HTMLGoodies features many tutorials on the topic, and we’ve brought the best of them together here for your perusal.

Primers, Tutorials, References and Overviews

  • Three Ways You Can Use HTML5 On Your Website Today – HTML5 promises to affect the way we think about and use the web, but what can be done with HTML5 today? In our last article we discussed five essential HTML5 editors to get you started. In this article we will look at several ways you can use HTML5 on your website right now!
  • A Modernizr Primer: Getting Started – Modernizr is a JavaScript library that helps you add HTML5 capabilities to your web sites. HTML5 is a combination of HTML, JavaScript, and CSS3. In the first article in this primer series, we will show you how to get started using Modernizr.
  • Using HTML5 Automatically For Placeholders in Email Forms–With No JavaScript – Previously, if a developer wanted to include some sample text in an email field in a form, and then make that text disappear when the user clicked within that field, they had to use some JavaScript to make it happen. Enter HTML5 and the placeholder attribute, which simplifies the whole process–using no JavaScript at all!
  • Use CSS3 and jQuery to Recreate Google+ Photo Stacking – The newest social network, Google+, is built on HTML5 and CSS3, and has some pretty cool affects. If you look at a person’s profile page, under the Photos section, you’ll see some HTML5, CSS3 and jQuery in action. This article will show you to create the fan and stacking effect as a means to convey a link that opens a page with multiple photos.
  • Web Developer Tutorial: HTML5 Microdata – The HTML 5 draft specification includes Microdata. The Microdata spec provides a standardized syntax for addition additional semantic markup to your web pages to enhance the machine readability of your web pages. This tutorial will discuss microdata and will show why you should be interested in it!
  • Web Developer Basics: Multimedia In HTML5 – In the last installment of this series, we talked about link relations in HTML5. In this article, we’ll see how support for various multimedia formats in HTML5 will make things much easier for you as a developer…eventually.
  • Web Developer Class: HTML5 Geolocation – Many websites can benefit from knowing exactly where the user accessing their site is from, enabling a more personalized local experience. HTML5’s geolocation functionality can help you do just that, as we show in this tutorial.
  • Web Developer Basics: Link Relations In HTML5 – In the first installment of this series, we introduced HTML5 and saw how much of its most basic syntax is far more simple and direct than the way most developers are used to coding. In this article, we’ll look at some other basic tags and see some of the power of the language.
  • Web Developer Basics: Learning About HTML5 – HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.
  • HTML5 Development: Form & Keyboard Events – Recently we have covered some of the major event categories for HTML5. In this installment we’ll take a look at the “miscellaneous” categories that we have not yet covered. We’ll see what HTML5 offers in new form events as well as most of the form and keyboard events developers have become accustomed to in HTML4.
  • HTML5 Development Class: Media Events – There has been much discussion surrounding the Media capabilities in HTML5: How will it impact Flash? Will we still need different media players like QuickTime and Windows Media Player? Why is HTML5 attempting to standardize media on the web? This article will give you the foundation for making informed opinions on HTML5 and its media capabilities.
  • HTML5 Development Class: Mouse Events – HTML5 is changing and expanding the landscape of web development. There are a multitude of new attributes and events that are being introduced with HTML5. In this installment we”ll take a look at the new and old events surrounding the mouse including movement, position and clicking as well as the new drag and drop events.
  • HTML 5 Tutorial for Web Developers: The Video Element – The HTML 5 specification is from being an official specification. That said, the W3C has just released an overview of the vocabulary and associated APIs for HTML and XHTML, and we’ll bring you the details of the <video> element in this article for web developers.
  • HTML 5 Features: What Web Developers Can Use NOW – There are several articles that list some important upcoming features of HTML5, which can work on certain browsers. This tutorial for the web developer will show you how you can use certain features of HTML 5 NOW!
  • Top 10 HTML5 Resources for the Web Developer – HTML5 has become the latest buzzword for the internet industry, and many folks believe it’s the future of the web. Others aren’t so eager to join the party, but even they concede that HTML5 includes features that should have been included in the HTML spec from the beginning. In this article we’ll tell you about 10 HTML5 resources that will allow you to begin using the technology right now.
  • What’s New with HTML 5: Global Attributes – In the new world of HTML 5 some things will remain the same, some will go away and many will be added. In this article we will take a look specifically at what’s new with the global (sometimes called standard) attributes.
  • HTML Class: Elements of HTML5 – Since 2004, the future of web development known as HTML 5 has been envisioned, discussed and re-envisioned over and over again. Here we will take a look at some of the current highlights and help you envision how they may one day affect your web development.

If you somehow stumbled on this page, and are looking for even more HTML5 resources, including articles on related technologies such as JavaScript and CSS3, be sure to check out our HTML5 Development Center.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured