background preloader

HTML5 Custom Data Attributes (data-*)

HTML5 Custom Data Attributes (data-*)
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul> We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. A word of warning Summary

Google Analytics Tagging with HTML5 data-* Attributes » Code Nomad Imagine if you will, a page with a significant amount of dynamic page elements. For instance, a slide-out panel containing a number of ‘panes’ containing topical information on various ‘factors’. Let’s assume that once this slide-out is open, we wish the user to be able to jump from factor to factor (similar to a slideshow) using buttons along the bottom of each factor. Let’s go even deeper and say that within each factor, we have a collection of close-up images. Again, the user should be able to navigate the close-ups via next/previous buttons similar to a slideshow. Tag Templates Tagging template for the factor navigation along the bottom of each [x] factor: /page_name/factor_[x]/factor_1_icon /page_name/factor_[x]/factor_2_icon /page_name/factor_[x]/factor_3_icon Tagging template for the prev/next buttons on each [y] close-up on each [x] factor: /page_name/factor_[x]/closeup_[y]/next_arrow /page_name/factor_[x]/closeup_[y]/prev_arrow Approach As with anything, I try to keep my code DRY.

HTML5 This Version: Latest Published Version: Latest Version of HTML: Latest Editor's Draft of HTML: Previous Version: Previous Recommendation: Editors: Ian Hickson, Google, Inc. Robin Berjon, W3C Steve Faulkner, The Paciello Group Travis Leithead, Microsoft Corporation Erika Doyle Navara, Microsoft Corporation Edward O'Connor, Apple Inc. Silvia Pfeiffer Please check the errata for any errors or issues reported since publication. This specification is also available as a single page HTML document. Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). Status of This document

A Basic HTML5 Template For Any Project What follows is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This post was originally published in 2013 and was updated in April 2016. As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself boilerplate, from which you can begin all your HTML5-based projects. We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.[] In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to include every new element or technique, so we’ll also explain some new features that don’t fit into the project. Let’s start simple, with a bare-bones HTML5 page: <! The Doctype First, we have the Document Type Declaration, or doctype. And for HTML4 Transitional: Simple, and to the point.

Responsive Web Design - Learn to Code Advanced HTML Lesson 4 The Internet took off quicker than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has exploded onto the scene. The growth of mobile Internet usage is also far out pacing that of general Internet usage growth. These days it is hard to find someone who doesn’t own a mobile device, or multiple, connected to the Internet. In the UK there are more mobile phones than people, and should trends continue mobile Internet usage will surpass that of desktop Internet usage within the year. With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. Responsive Overview#responsive-web-design Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. The responsive web design term itself was coined, and largely developed, by Ethan Marcotte. Responsive vs. Flexible Layouts#flexible-layouts

Related: